@charset "UTF-8";

@font-face {
  font-family: "FolioStdBook";
  font-weight: 400;
  font-display: block;
  src: local("Folio Bk BT Book"), url("../fonts/FolioStdBook.woff2") format("woff2");
}

/* Pretendard(한국 현지어): weight 100~900을 Regular(400) 단일 매핑 */
@font-face {
  font-family: "Pretendard";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
}

/* NotoSansJP: 일본몰(ja) 현지어 기본(영문/라틴은 Facility 우선) */
/* weight 100~900을 Regular(400) 단일 매핑 */
@font-face {
  font-family: "NotoSansJP";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
}

/* Facility는 영문/라틴 글자만 렌더 — 숫자·기호는 현지 폰트로 폴백 */
/* weight 100~900을 400 단일 매핑 */
@font-face {
  font-family: "Facility";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Facility-Regular.woff2") format("woff2");
  unicode-range: U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153;
}

/* FacilityAll: 글로벌몰(en) 전용 — 영문+숫자·기호(ASCII U+0020-007E)까지 Facility */
/* weight 100~900을 400 단일 매핑 */
@font-face {
  font-family: "FacilityAll";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Facility-Regular.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153;
}

:root {
  --blue: #0070d2;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #c00;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #008827;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #000;
  --secondary: #6c757d;
  --success: #008827;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #c00;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 544px;
  --breakpoint-md: 769px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "FolioStdBook", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: "FolioStdBook", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: "Facility", "Pretendard", "FolioStdBook", sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: "FacilityAll", "Pretendard", "FolioStdBook", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #f9f9f9;
}

/* 몰별 기본 폰트 — 영문/라틴은 unicode-range로 항상 Facility, 현지어는 아래 폰트 */
/* 한국몰: 한글 Pretendard */
:lang(ko) body {
  font-family: "Facility", "Pretendard", "NotoSansJP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 일본몰: 현지어 NotoSansJP (영문 글자는 Facility 유지) */
:lang(ja) body {
  font-family: "Facility", "NotoSansJP", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

a:hover {
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: "FolioStdBook", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

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

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

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

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

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

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

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1,
.h1 {
  font-size: 2.5rem;
}

h2,
.h2 {
  font-size: 2rem;
}

h3,
.h3 {
  font-size: 1.75rem;
}

h4,
.h4 {
  font-size: 1.5rem;
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid #ccc;
}

small,
.small {
  font-size: 0.875em;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 0.875em;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #f9f9f9;
  border: 1px solid #dee2e6;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}

a>code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

body,
body.modal-open {
  padding-right: 0 !important;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {

  .container-md,
  .container-sm,
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {

  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 940px;
  }
}

@media (min-width: 1200px) {

  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1140px;
  }
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.col-xl,
.col-xl-auto,
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-lg,
.col-lg-auto,
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-md,
.col-md-auto,
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-sm,
.col-sm-auto,
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col,
.col-auto,
.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1>* {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2>* {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3>* {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.3333333333%;
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.row-cols-4>* {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5>* {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6>* {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.6666666667%;
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-auto {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.33333333%;
  flex: 0 0 8.33333333%;
  max-width: 8.33333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.66666667%;
  flex: 0 0 16.66666667%;
  max-width: 16.66666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.33333333%;
  flex: 0 0 33.33333333%;
  max-width: 33.33333333%;
}

.col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.66666667%;
  flex: 0 0 41.66666667%;
  max-width: 41.66666667%;
}

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.33333333%;
  flex: 0 0 58.33333333%;
  max-width: 58.33333333%;
}

.col-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.66666667%;
  flex: 0 0 66.66666667%;
  max-width: 66.66666667%;
}

.col-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83.33333333%;
  flex: 0 0 83.33333333%;
  max-width: 83.33333333%;
}

.col-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.66666667%;
  flex: 0 0 91.66666667%;
  max-width: 91.66666667%;
}

.col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -webkit-box-ordinal-group: 12;
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -webkit-box-ordinal-group: 13;
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

@media (min-width: 544px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-sm-1>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-sm-2>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-sm-3>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-sm-4>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-sm-5>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-sm-6>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-sm-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-sm-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-sm-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-sm-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-sm-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-sm-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-sm-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-sm-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-sm-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-sm-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-sm-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-sm-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-sm-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-sm-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-sm-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-sm-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-sm-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-sm-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-sm-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-sm-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.33333333%;
  }

  .offset-sm-2 {
    margin-left: 16.66666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.33333333%;
  }

  .offset-sm-5 {
    margin-left: 41.66666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.33333333%;
  }

  .offset-sm-8 {
    margin-left: 66.66666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.33333333%;
  }

  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
}

@media (min-width: 769px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-md-1>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-md-2>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-md-3>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-md-4>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-md-5>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-md-6>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-md-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-md-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-md-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-md-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-md-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-md-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-md-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-md-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-md-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-md-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-md-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-md-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-md-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-md-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-md-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-md-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-md-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-md-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-md-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.33333333%;
  }

  .offset-md-2 {
    margin-left: 16.66666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.33333333%;
  }

  .offset-md-5 {
    margin-left: 41.66666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.33333333%;
  }

  .offset-md-8 {
    margin-left: 66.66666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.33333333%;
  }

  .offset-md-11 {
    margin-left: 91.66666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-lg-1>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-lg-2>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-lg-3>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-lg-4>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-lg-5>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-lg-6>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-lg-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-lg-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-lg-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-lg-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-lg-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-lg-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-lg-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-lg-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-lg-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-lg-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-lg-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-lg-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-lg-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-lg-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-lg-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-lg-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-lg-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-lg-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-lg-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.33333333%;
  }

  .offset-lg-2 {
    margin-left: 16.66666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.33333333%;
  }

  .offset-lg-5 {
    margin-left: 41.66666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.33333333%;
  }

  .offset-lg-8 {
    margin-left: 66.66666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.33333333%;
  }

  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-xl-1>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-xl-2>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-xl-3>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-xl-4>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-xl-5>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-xl-6>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xl-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-xl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-xl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-xl-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-xl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-xl-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-xl-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-xl-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-xl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-xl-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-xl-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-xl-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-xl-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-xl-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-xl-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-xl-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-xl-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-xl-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-xl-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-xl-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-xl-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-xl-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-xl-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.33333333%;
  }

  .offset-xl-2 {
    margin-left: 16.66666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.33333333%;
  }

  .offset-xl-5 {
    margin-left: 41.66666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.33333333%;
  }

  .offset-xl-8 {
    margin-left: 66.66666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.33333333%;
  }

  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #ccc;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #ccc;
}

.table tbody+tbody {
  border-top: 2px solid #ccc;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #ccc;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #ccc;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody+tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary>th,
.table-primary>td {
  background-color: rgb(183.6, 183.6, 183.6);
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody+tbody {
  border-color: rgb(122.4, 122.4, 122.4);
}

.table-hover .table-primary:hover {
  background-color: rgb(170.85, 170.85, 170.85);
}

.table-hover .table-primary:hover>td,
.table-hover .table-primary:hover>th {
  background-color: rgb(170.85, 170.85, 170.85);
}

.table-secondary,
.table-secondary>th,
.table-secondary>td {
  background-color: rgb(213.84, 216.36, 218.6);
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody+tbody {
  border-color: rgb(178.56, 183.24, 187.4);
}

.table-hover .table-secondary:hover {
  background-color: rgb(200.3075090253, 203.6560288809, 206.6324909747);
}

.table-hover .table-secondary:hover>td,
.table-hover .table-secondary:hover>th {
  background-color: rgb(200.3075090253, 203.6560288809, 206.6324909747);
}

.table-success,
.table-success>th,
.table-success>td {
  background-color: rgb(183.6, 221.68, 194.52);
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody+tbody {
  border-color: rgb(122.4, 193.12, 142.68);
}

.table-hover .table-success:hover {
  background-color: rgb(166.2136363636, 213.5663636364, 179.7927272727);
}

.table-hover .table-success:hover>td,
.table-hover .table-success:hover>th {
  background-color: rgb(166.2136363636, 213.5663636364, 179.7927272727);
}

.table-info,
.table-info>th,
.table-info>td {
  background-color: rgb(190.04, 228.96, 235.12);
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody+tbody {
  border-color: rgb(134.36, 206.64, 218.08);
}

.table-hover .table-info:hover {
  background-color: rgb(170.5152475248, 221.1332673267, 229.1447524752);
}

.table-hover .table-info:hover>td,
.table-hover .table-info:hover>th {
  background-color: rgb(170.5152475248, 221.1332673267, 229.1447524752);
}

.table-warning,
.table-warning>th,
.table-warning>td {
  background-color: rgb(255, 237.64, 185.56);
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody+tbody {
  border-color: rgb(255, 222.76, 126.04);
}

.table-hover .table-warning:hover {
  background-color: rgb(255, 231.265, 160.06);
}

.table-hover .table-warning:hover>td,
.table-hover .table-warning:hover>th {
  background-color: rgb(255, 231.265, 160.06);
}

.table-danger,
.table-danger>th,
.table-danger>td {
  background-color: rgb(240.72, 183.6, 183.6);
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody+tbody {
  border-color: rgb(228.48, 122.4, 122.4);
}

.table-hover .table-danger:hover {
  background-color: rgb(236.47, 162.35, 162.35);
}

.table-hover .table-danger:hover>td,
.table-hover .table-danger:hover>th {
  background-color: rgb(236.47, 162.35, 162.35);
}

.table-light,
.table-light>th,
.table-light>td {
  background-color: rgb(253.04, 253.32, 253.6);
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody+tbody {
  border-color: rgb(251.36, 251.88, 252.4);
}

.table-hover .table-light:hover {
  background-color: rgb(238.165, 240.57, 242.975);
}

.table-hover .table-light:hover>td,
.table-hover .table-light:hover>th {
  background-color: rgb(238.165, 240.57, 242.975);
}

.table-dark,
.table-dark>th,
.table-dark>td {
  background-color: rgb(198.16, 199.84, 201.52);
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody+tbody {
  border-color: rgb(149.44, 152.56, 155.68);
}

.table-hover .table-dark:hover {
  background-color: rgb(185.0216751269, 187.09, 189.1583248731);
}

.table-hover .table-dark:hover>td,
.table-hover .table-dark:hover>th {
  background-color: rgb(185.0216751269, 187.09, 189.1583248731);
}

.table-active,
.table-active>th,
.table-active>td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover>td,
.table-hover .table-active:hover>th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: rgb(69.1465517241, 77.125, 85.1034482759);
}

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #ccc;
}

.table-dark {
  color: #fff;
  background-color: #343a40;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: rgb(69.1465517241, 77.125, 85.1034482759);
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 543.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-sm>.table-bordered {
    border: 0;
  }
}

@media (max-width: 1024px) {
  html {
    font-size: 62.5%;
  }

  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-md>.table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-lg>.table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-xl>.table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive>.table-bordered {
  border: 0;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    -webkit-transition: none;
    transition: none;
  }
}

input[type=date].form-control,
input[type=time].form-control,
input[type=datetime-local].form-control,
input[type=month].form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

select.form-control[size],
select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row>.col,
.form-row>[class*=col-] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-input[disabled]~.form-check-label,
.form-check-input:disabled~.form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #008827;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(0, 136, 39, 0.9);
}

.form-row>.col>.valid-tooltip,
.form-row>[class*=col-]>.valid-tooltip {
  left: 5px;
}

.was-validated :valid~.valid-feedback,
.was-validated :valid~.valid-tooltip,
.is-valid~.valid-feedback,
.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #008827;
  padding-right: calc(1.5em + 0.75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23008827' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #008827;
}

.was-validated select.form-control:valid,
select.form-control.is-valid {
  padding-right: 3rem !important;
  background-position: right 1.5rem center;
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid,
.custom-select.is-valid {
  border-color: #008827;
  padding-right: calc(0.75em + 2.3125rem) !important;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23008827' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.was-validated .form-check-input:valid~.form-check-label,
.form-check-input.is-valid~.form-check-label {
  color: #008827;
}

.was-validated .form-check-input:valid~.valid-feedback,
.was-validated .form-check-input:valid~.valid-tooltip,
.form-check-input.is-valid~.valid-feedback,
.form-check-input.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid~.custom-control-label,
.custom-control-input.is-valid~.custom-control-label {
  color: #008827;
}

.was-validated .custom-control-input:valid~.custom-control-label::before,
.custom-control-input.is-valid~.custom-control-label::before {
  border-color: #008827;
}

.was-validated .custom-control-input:valid:checked~.custom-control-label::before,
.custom-control-input.is-valid:checked~.custom-control-label::before {
  border-color: rgb(0, 187, 53.625);
  background-color: rgb(0, 187, 53.625);
}

.was-validated .custom-file-input:valid~.custom-file-label,
.custom-file-input.is-valid~.custom-file-label {
  border-color: #008827;
}

.was-validated .custom-file-input:valid:focus~.custom-file-label,
.custom-file-input.is-valid:focus~.custom-file-label {
  border-color: #008827;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #c00;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(204, 0, 0, 0.9);
}

.form-row>.col>.invalid-tooltip,
.form-row>[class*=col-]>.invalid-tooltip {
  left: 5px;
}

.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip,
.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #c00;
  padding-right: calc(1.5em + 0.75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23c00' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c00' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #c00;
}

.was-validated select.form-control:invalid,
select.form-control.is-invalid {
  padding-right: 3rem !important;
  background-position: right 1.5rem center;
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid,
.custom-select.is-invalid {
  border-color: #c00;
  padding-right: calc(0.75em + 2.3125rem) !important;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23c00' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c00' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
  border-color: #c00;
}

.was-validated .form-check-input:invalid~.form-check-label,
.form-check-input.is-invalid~.form-check-label {
  color: #c00;
}

.was-validated .form-check-input:invalid~.invalid-feedback,
.was-validated .form-check-input:invalid~.invalid-tooltip,
.form-check-input.is-invalid~.invalid-feedback,
.form-check-input.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid~.custom-control-label,
.custom-control-input.is-invalid~.custom-control-label {
  color: #c00;
}

.was-validated .custom-control-input:invalid~.custom-control-label::before,
.custom-control-input.is-invalid~.custom-control-label::before {
  border-color: #c00;
}

.was-validated .custom-control-input:invalid:checked~.custom-control-label::before,
.custom-control-input.is-invalid:checked~.custom-control-label::before {
  border-color: red;
  background-color: red;
}

.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before,
.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before {
  border-color: #c00;
}

.was-validated .custom-file-input:invalid~.custom-file-label,
.custom-file-input.is-invalid~.custom-file-label {
  border-color: #c00;
}

.was-validated .custom-file-input:invalid:focus~.custom-file-label,
.custom-file-input.is-invalid:focus~.custom-file-label {
  border-color: #c00;
}

.form-inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 544px) {
  .form-inline label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .form-inline .form-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .form-control-plaintext {
    display: inline-block;
  }

  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }

  .form-inline .form-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }

  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }

  .form-inline .custom-control {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 46px;
  height: 36px;
  font-weight: 400;
  color: #000;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 1.34;
  background-color: #fff;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    -webkit-transition: none;
    transition: none;
  }
}

.btn:hover {
  text-decoration: underline;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.btn-primary:hover {
  color: #fff;
  background-color: black;
  border-color: black;
}

.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: black;
  border-color: black;
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: black;
  border-color: black;
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-success {
  color: #fff;
  background-color: #008827;
  border-color: #008827;
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #008827;
  border-color: #008827;
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning.disabled,
.btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-danger {
  color: #fff;
  background-color: #c00;
  border-color: #c00;
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: #c00;
  border-color: #c00;
}

.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light.disabled,
.btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-primary {
  color: #000;
  border-color: #000;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #000;
  background-color: transparent;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-outline-success {
  color: #008827;
  border-color: #008827;
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #008827;
  background-color: transparent;
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-danger {
  color: #c00;
  border-color: #c00;
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #c00;
  background-color: transparent;
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}

.btn-link {
  font-weight: 400;
  color: #444;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-link:focus,
.btn-link.focus {
  text-decoration: underline;
}

.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg,
.btn-group-lg>.btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

input[type=submit].btn-block,
input[type=reset].btn-block,
input[type=button].btn-block {
  width: 100%;
}

.fade {
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    -webkit-transition: none;
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    -webkit-transition: none;
    transition: none;
  }
}

.collapsing.width {
  width: 0;
  height: auto;
  -webkit-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing.width {
    -webkit-transition: none;
    transition: none;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

@media (min-width: 544px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 769px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^=top],
.dropdown-menu[x-placement^=right],
.dropdown-menu[x-placement^=bottom],
.dropdown-menu[x-placement^=left] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: rgb(21.6283783784, 24.25, 26.8716216216);
  text-decoration: none;
  background-color: #e9ecef;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #000;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #adb5bd;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.btn-group>.btn:hover,
.btn-group-vertical>.btn:hover {
  z-index: 1;
}

.btn-group>.btn:focus,
.btn-group>.btn:active,
.btn-group>.btn.active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child) {
  margin-left: -1px;
}

.btn-group>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group>.btn-group:not(:last-child)>.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm+.dropdown-toggle-split,
.btn-group-sm>.btn+.dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg+.dropdown-toggle-split,
.btn-group-lg>.btn+.dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
  width: 100%;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical>.btn-group:not(:last-child)>.btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle>.btn,
.btn-group-toggle>.btn-group>.btn {
  margin-bottom: 0;
}

.btn-group-toggle>.btn input[type=radio],
.btn-group-toggle>.btn input[type=checkbox],
.btn-group-toggle>.btn-group>.btn input[type=radio],
.btn-group-toggle>.btn-group>.btn input[type=checkbox] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group>.form-control,
.input-group>.form-control-plaintext,
.input-group>.custom-select,
.input-group>.custom-file {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group>.form-control+.form-control,
.input-group>.form-control+.custom-select,
.input-group>.form-control+.custom-file,
.input-group>.form-control-plaintext+.form-control,
.input-group>.form-control-plaintext+.custom-select,
.input-group>.form-control-plaintext+.custom-file,
.input-group>.custom-select+.form-control,
.input-group>.custom-select+.custom-select,
.input-group>.custom-select+.custom-file,
.input-group>.custom-file+.form-control,
.input-group>.custom-file+.custom-select,
.input-group>.custom-file+.custom-file {
  margin-left: -1px;
}

.input-group>.form-control:focus,
.input-group>.custom-select:focus,
.input-group>.custom-file .custom-file-input:focus~.custom-file-label {
  z-index: 3;
}

.input-group>.custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group>.form-control:not(:first-child),
.input-group>.custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group>.custom-file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.input-group>.custom-file:not(:last-child) .custom-file-label,
.input-group>.custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group:not(.has-validation)>.form-control:not(:last-child),
.input-group:not(.has-validation)>.custom-select:not(:last-child),
.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label,
.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group.has-validation>.form-control:nth-last-child(n+3),
.input-group.has-validation>.custom-select:nth-last-child(n+3),
.input-group.has-validation>.custom-file:nth-last-child(n+3) .custom-file-label,
.input-group.has-validation>.custom-file:nth-last-child(n+3) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-prepend,
.input-group-append {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

.input-group-prepend .btn+.btn,
.input-group-prepend .btn+.input-group-text,
.input-group-prepend .input-group-text+.input-group-text,
.input-group-prepend .input-group-text+.btn,
.input-group-append .btn+.btn,
.input-group-append .btn+.input-group-text,
.input-group-append .input-group-text+.input-group-text,
.input-group-append .input-group-text+.btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
}

.input-group-text input[type=radio],
.input-group-text input[type=checkbox] {
  margin-top: 0;
}

.input-group-lg>.form-control:not(textarea),
.input-group-lg>.custom-select {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg>.form-control,
.input-group-lg>.custom-select,
.input-group-lg>.input-group-prepend>.input-group-text,
.input-group-lg>.input-group-append>.input-group-text,
.input-group-lg>.input-group-prepend>.btn,
.input-group-lg>.input-group-append>.btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.input-group-sm>.form-control:not(textarea),
.input-group-sm>.custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm>.form-control,
.input-group-sm>.custom-select,
.input-group-sm>.input-group-prepend>.input-group-text,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-append>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.input-group-lg>.custom-select,
.input-group-sm>.custom-select {
  padding-right: 1.75rem;
}

.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text,
.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.btn,
.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.input-group-text,
.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.btn,
.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.input-group-text,
.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.custom-control-inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #000;
  background-color: #000;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: rgb(63.75, 63.75, 63.75);
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: rgb(89.25, 89.25, 89.25);
  border-color: rgb(89.25, 89.25, 89.25);
}

.custom-control-input[disabled]~.custom-control-label,
.custom-control-input:disabled~.custom-control-label {
  color: #6c757d;
}

.custom-control-input[disabled]~.custom-control-label::before,
.custom-control-input:disabled~.custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: 1px solid #adb5bd;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: 50%/50% 50% no-repeat;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
  border-color: #000;
  background-color: #000;
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(0, 0, 0, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {
  background-color: rgba(0, 0, 0, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(0, 0, 0, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    -webkit-transition: none;
    transition: none;
  }
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(0, 0, 0, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

.custom-file-input:focus~.custom-file-label {
  border-color: rgb(63.75, 63.75, 63.75);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.custom-file-input[disabled]~.custom-file-label,
.custom-file-input:disabled~.custom-file-label {
  background-color: #e9ecef;
}

.custom-file-input:lang(en)~.custom-file-label::after {
  content: "Browse";
}

.custom-file-input~.custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  border: 1px solid #ced4da;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #000;
  content: "Browse";
  background-color: #e9ecef;
  border-left: inherit;
}

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: 0;
}

.custom-range:focus::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0 1px #f9f9f9, 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 1px #f9f9f9, 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #f9f9f9, 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #f9f9f9, 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #000;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: rgb(89.25, 89.25, 89.25);
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #000;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: rgb(89.25, 89.25, 89.25);
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #000;
  border: 0;
  border-radius: 1rem;
  -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    -ms-transition: none;
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: rgb(89.25, 89.25, 89.25);
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {

  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    -webkit-transition: none;
    transition: none;
  }
}

.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 0 solid #dee2e6;
}

.nav-tabs .nav-link {
  margin-bottom: 0;
  background-color: transparent;
  border: 0 solid transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #f9f9f9;
  border-color: #dee2e6 #dee2e6 #f9f9f9;
}

.nav-tabs .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  background: none;
  border: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #000;
}

.nav-fill>.nav-link,
.nav-fill .nav-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified>.nav-link,
.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.tab-content>.tab-pane {
  display: none;
}

.tab-content>.active {
  display: block;
}

.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar .container,
.navbar .container-fluid,
.navbar .container-md,
.navbar .container-lg,
.navbar .container-xl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: 50%/100% 100% no-repeat;
}

.navbar-nav-scroll {
  max-height: 75vh;
  overflow-y: auto;
}

@media (max-width: 543.98px) {

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid,
  .navbar-expand-sm>.container-md,
  .navbar-expand-sm>.container-lg,
  .navbar-expand-sm>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 544px) {
  .navbar-expand-sm {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid,
  .navbar-expand-sm>.container-md,
  .navbar-expand-sm>.container-lg,
  .navbar-expand-sm>.container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-sm .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1024px) {

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid,
  .navbar-expand-md>.container-md,
  .navbar-expand-md>.container-lg,
  .navbar-expand-md>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 769px) {
  .navbar-expand-md {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid,
  .navbar-expand-md>.container-md,
  .navbar-expand-md>.container-lg,
  .navbar-expand-md>.container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-md .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid,
  .navbar-expand-lg>.container-md,
  .navbar-expand-lg>.container-lg,
  .navbar-expand-lg>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid,
  .navbar-expand-lg>.container-md,
  .navbar-expand-lg>.container-lg,
  .navbar-expand-lg>.container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-lg .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid,
  .navbar-expand-xl>.container-md,
  .navbar-expand-xl>.container-lg,
  .navbar-expand-xl>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid,
  .navbar-expand-xl>.container-md,
  .navbar-expand-xl>.container-lg,
  .navbar-expand-xl>.container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-xl .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid,
.navbar-expand>.container-md,
.navbar-expand>.container-lg,
.navbar-expand>.container-xl {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand .navbar-nav {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid,
.navbar-expand>.container-md,
.navbar-expand>.container-lg,
.navbar-expand>.container-xl {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}

.navbar-expand .navbar-collapse {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card>.list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card>.list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(0.1875rem - 1px);
  border-top-right-radius: calc(0.1875rem - 1px);
}

.card>.list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.1875rem - 1px);
  border-bottom-left-radius: calc(0.1875rem - 1px);
}

.card>.card-header+.list-group,
.card>.list-group+.card-footer {
  border-top: 0;
}

.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link+.card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img,
.card-img-top,
.card-img-bottom {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(0.1875rem - 1px);
  border-top-right-radius: calc(0.1875rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.1875rem - 1px);
  border-bottom-left-radius: calc(0.1875rem - 1px);
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 544px) {
  .card-deck {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .card-deck .card {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group>.card {
  margin-bottom: 15px;
}

@media (min-width: 544px) {
  .card-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  .card-group>.card {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group>.card+.card {
    margin-left: 0;
    border-left: 0;
  }

  .card-group>.card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group>.card:not(:last-child) .card-img-top,
  .card-group>.card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }

  .card-group>.card:not(:last-child) .card-img-bottom,
  .card-group>.card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }

  .card-group>.card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group>.card:not(:first-child) .card-img-top,
  .card-group>.card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }

  .card-group>.card:not(:first-child) .card-img-bottom,
  .card-group>.card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 544px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion {
  overflow-anchor: none;
}

.accordion>.card {
  overflow: hidden;
}

.accordion>.card:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion>.card:not(:first-of-type) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion>.card>.card-header {
  border-radius: 0;
  margin-bottom: -1px;
}

.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: transparent;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #444;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  z-index: 2;
  text-decoration: underline;
}

.page-link:focus {
  z-index: 3;
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.1875rem;
  border-bottom-left-radius: 0.1875rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.1875rem;
  border-bottom-right-radius: 0.1875rem;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.1875rem;
  border-bottom-left-radius: 0.1875rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.1875rem;
  border-bottom-right-radius: 0.1875rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.1875rem;
  border-bottom-left-radius: 0.1875rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.1875rem;
  border-bottom-right-radius: 0.1875rem;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    -webkit-transition: none;
    transition: none;
  }
}

a.badge:hover,
a.badge:focus {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #000;
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

.badge-success {
  color: #fff;
  background-color: #008827;
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

.badge-danger {
  color: #fff;
  background-color: #c00;
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
}

@media (min-width: 544px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: black;
  background-color: #cccccc;
  border-color: rgb(183.6, 183.6, 183.6);
}

.alert-primary hr {
  border-top-color: rgb(170.85, 170.85, 170.85);
}

.alert-primary .alert-link {
  color: black;
}

.alert-secondary {
  color: rgb(56.16, 60.84, 65);
  background-color: rgb(225.6, 227.4, 229);
  border-color: rgb(213.84, 216.36, 218.6);
}

.alert-secondary hr {
  border-top-color: rgb(200.3075090253, 203.6560288809, 206.6324909747);
}

.alert-secondary .alert-link {
  color: rgb(32.5205150215, 35.2305579399, 37.6394849785);
}

.alert-success {
  color: rgb(0, 70.72, 20.28);
  background-color: rgb(204, 231.2, 211.8);
  border-color: rgb(183.6, 221.68, 194.52);
}

.alert-success hr {
  border-top-color: rgb(166.2136363636, 213.5663636364, 179.7927272727);
}

.alert-success .alert-link {
  color: rgb(0, 19.72, 5.655);
}

.alert-info {
  color: rgb(11.96, 84.24, 95.68);
  background-color: rgb(208.6, 236.4, 240.8);
  border-color: rgb(190.04, 228.96, 235.12);
}

.alert-info hr {
  border-top-color: rgb(170.5152475248, 221.1332673267, 229.1447524752);
}

.alert-info .alert-link {
  color: rgb(6.2933333333, 44.3269565217, 50.3466666667);
}

.alert-warning {
  color: rgb(132.6, 100.36, 3.64);
  background-color: rgb(255, 242.6, 205.4);
  border-color: rgb(255, 237.64, 185.56);
}

.alert-warning hr {
  border-top-color: rgb(255, 231.265, 160.06);
}

.alert-warning .alert-link {
  color: rgb(82.9625954198, 62.7912977099, 2.2774045802);
}

.alert-danger {
  color: rgb(106.08, 0, 0);
  background-color: rgb(244.8, 204, 204);
  border-color: rgb(240.72, 183.6, 183.6);
}

.alert-danger hr {
  border-top-color: rgb(236.47, 162.35, 162.35);
}

.alert-danger .alert-link {
  color: rgb(55.08, 0, 0);
}

.alert-light {
  color: rgb(128.96, 129.48, 130);
  background-color: rgb(253.6, 253.8, 254);
  border-color: rgb(253.04, 253.32, 253.6);
}

.alert-light hr {
  border-top-color: rgb(238.165, 240.57, 242.975);
}

.alert-light .alert-link {
  color: rgb(103.5492351816, 103.98, 104.4107648184);
}

.alert-dark {
  color: rgb(27.04, 30.16, 33.28);
  background-color: rgb(214.4, 215.6, 216.8);
  border-color: rgb(198.16, 199.84, 201.52);
}

.alert-dark hr {
  border-top-color: rgb(185.0216751269, 187.09, 189.1583248731);
}

.alert-dark .alert-link {
  color: rgb(4.1779310345, 4.66, 5.1420689655);
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  line-height: 0;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.1875rem;
}

.progress-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #000;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    -webkit-transition: none;
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
  animation: 1s linear infinite progress-bar-stripes;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}

.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.media-body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.list-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
}

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.list-group-item+.list-group-item {
  border-top-width: 0;
}

.list-group-item+.list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

.list-group-horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.list-group-horizontal>.list-group-item:first-child {
  border-bottom-left-radius: 0.1875rem;
  border-top-right-radius: 0;
}

.list-group-horizontal>.list-group-item:last-child {
  border-top-right-radius: 0.1875rem;
  border-bottom-left-radius: 0;
}

.list-group-horizontal>.list-group-item.active {
  margin-top: 0;
}

.list-group-horizontal>.list-group-item+.list-group-item {
  border-top-width: 1px;
  border-left-width: 0;
}

.list-group-horizontal>.list-group-item+.list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}

@media (min-width: 544px) {
  .list-group-horizontal-sm {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-sm>.list-group-item:first-child {
    border-bottom-left-radius: 0.1875rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-sm>.list-group-item:last-child {
    border-top-right-radius: 0.1875rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-sm>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-sm>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-sm>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 769px) {
  .list-group-horizontal-md {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-md>.list-group-item:first-child {
    border-bottom-left-radius: 0.1875rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-md>.list-group-item:last-child {
    border-top-right-radius: 0.1875rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-md>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-md>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-md>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-lg>.list-group-item:first-child {
    border-bottom-left-radius: 0.1875rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-lg>.list-group-item:last-child {
    border-top-right-radius: 0.1875rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-lg>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-lg>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-lg>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-group-horizontal-xl>.list-group-item:first-child {
    border-bottom-left-radius: 0.1875rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-xl>.list-group-item:last-child {
    border-top-right-radius: 0.1875rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-xl>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-xl>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-xl>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

.list-group-flush {
  border-radius: 0;
}

.list-group-flush>.list-group-item {
  border-width: 0 0 1px;
}

.list-group-flush>.list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  color: black;
  background-color: rgb(183.6, 183.6, 183.6);
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: black;
  border-color: black;
}

.list-group-item-secondary {
  color: rgb(56.16, 60.84, 65);
  background-color: rgb(213.84, 216.36, 218.6);
}

.list-group-item-success {
  color: rgb(0, 70.72, 20.28);
  background-color: rgb(183.6, 221.68, 194.52);
}

.list-group-item-info {
  color: rgb(11.96, 84.24, 95.68);
  background-color: rgb(190.04, 228.96, 235.12);
}

.list-group-item-warning {
  color: rgb(132.6, 100.36, 3.64);
  background-color: rgb(255, 237.64, 185.56);
}

.list-group-item-danger {
  color: rgb(106.08, 0, 0);
  background-color: rgb(240.72, 183.6, 183.6);
}

.list-group-item-light {
  color: rgb(128.96, 129.48, 130);
  background-color: rgb(253.04, 253.32, 253.6);
}

.list-group-item-dark {
  color: rgb(27.04, 30.16, 33.28);
  background-color: rgb(198.16, 199.84, 201.52);
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}

a.close.disabled {
  pointer-events: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
  padding-right: 0 !important;
}

.modal-dialog {
  position: relative;
  width: auto;
  min-width: 470px;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    -webkit-transition: none;
    transition: none;
  }
}

.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}

.modal.modal-static .modal-dialog {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 260px);
  pointer-events: auto;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.1875rem - 1px);
  border-top-right-radius: calc(0.1875rem - 1px);
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.1875rem - 1px);
  border-bottom-left-radius: calc(0.1875rem - 1px);
}

.modal-footer>* {
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (max-width: 544px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }

  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {

  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^=top] {
  padding: 0.4rem 0;
}

.bs-tooltip-top .arrow,
.bs-tooltip-auto[x-placement^=top] .arrow {
  bottom: 0;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^=right] {
  padding: 0 0.4rem;
}

.bs-tooltip-right .arrow,
.bs-tooltip-auto[x-placement^=right] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^=right] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^=bottom] {
  padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow,
.bs-tooltip-auto[x-placement^=bottom] .arrow {
  top: 0;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^=left] {
  padding: 0 0.4rem;
}

.bs-tooltip-left .arrow,
.bs-tooltip-auto[x-placement^=left] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^=left] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.1875rem;
}

.popover .arrow::before,
.popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top,
.bs-popover-auto[x-placement^=top] {
  margin-bottom: 0.5rem;
}

.bs-popover-top>.arrow,
.bs-popover-auto[x-placement^=top]>.arrow {
  bottom: calc(-0.5rem - 1px);
}

.bs-popover-top>.arrow::before,
.bs-popover-auto[x-placement^=top]>.arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-top>.arrow::after,
.bs-popover-auto[x-placement^=top]>.arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}

.bs-popover-right,
.bs-popover-auto[x-placement^=right] {
  margin-left: 0.5rem;
}

.bs-popover-right>.arrow,
.bs-popover-auto[x-placement^=right]>.arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.1875rem 0;
}

.bs-popover-right>.arrow::before,
.bs-popover-auto[x-placement^=right]>.arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-right>.arrow::after,
.bs-popover-auto[x-placement^=right]>.arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: #fff;
}

.bs-popover-bottom,
.bs-popover-auto[x-placement^=bottom] {
  margin-top: 0.5rem;
}

.bs-popover-bottom>.arrow,
.bs-popover-auto[x-placement^=bottom]>.arrow {
  top: calc(-0.5rem - 1px);
}

.bs-popover-bottom>.arrow::before,
.bs-popover-auto[x-placement^=bottom]>.arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-bottom>.arrow::after,
.bs-popover-auto[x-placement^=bottom]>.arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid rgb(247.35, 247.35, 247.35);
}

.bs-popover-left,
.bs-popover-auto[x-placement^=left] {
  margin-right: 0.5rem;
}

.bs-popover-left>.arrow,
.bs-popover-auto[x-placement^=left]>.arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.1875rem 0;
}

.bs-popover-left>.arrow::before,
.bs-popover-auto[x-placement^=left]>.arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-left>.arrow::after,
.bs-popover-auto[x-placement^=left]>.arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: #fff;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: rgb(247.35, 247.35, 247.35);
  border-bottom: 1px solid rgb(234.6, 234.6, 234.6);
  border-top-left-radius: calc(0.1875rem - 1px);
  border-top-right-radius: calc(0.1875rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: #212529;
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

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

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    -webkit-transition: none;
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 0s 0.6s;
  transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    -webkit-transition: none;
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-control-prev,
  .carousel-control-next {
    -webkit-transition: none;
    transition: none;
  }
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: 50%/100% 100% no-repeat;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    -webkit-transition: none;
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

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

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

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

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

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

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

.bg-primary {
  background-color: #000 !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.bg-success {
  background-color: #008827 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-danger {
  background-color: #c00 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

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

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #000 !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-success {
  border-color: #008827 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #c00 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded-sm {
  border-radius: 0.1875rem !important;
}

.rounded {
  border-radius: 0.1875rem !important;
}

.rounded-top {
  border-top-left-radius: 0.1875rem !important;
  border-top-right-radius: 0.1875rem !important;
}

.rounded-right {
  border-top-right-radius: 0.1875rem !important;
  border-bottom-right-radius: 0.1875rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.1875rem !important;
  border-bottom-left-radius: 0.1875rem !important;
}

.rounded-left {
  border-top-left-radius: 0.1875rem !important;
  border-bottom-left-radius: 0.1875rem !important;
}

.rounded-lg {
  border-radius: 0.1875rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

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

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

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

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

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

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

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 544px) {
  .d-sm-none {
    display: none !important;
  }

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

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

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

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1025px) {
  .d-md-none {
    display: none !important;
  }

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

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

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

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-md-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

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

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

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

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

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

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

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

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }

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

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

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

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-print-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.85714286%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

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

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

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

.flex-fill {
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  -webkit-box-flex: 0 !important;
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -webkit-box-flex: 1 !important;
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

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

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

.justify-content-start {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

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

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

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

.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -webkit-box-align: baseline !important;
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -webkit-box-align: stretch !important;
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

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

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

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

@media (min-width: 544px) {
  .flex-sm-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-sm-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

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

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

  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-sm-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-sm-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-sm-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-sm-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-sm-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

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

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

  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 769px) {
  .flex-md-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-md-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

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

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

  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-md-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-md-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-md-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-md-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-md-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-md-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-md-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-md-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

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

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

  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-lg-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

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

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

  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-lg-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-lg-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-lg-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-lg-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-lg-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

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

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

  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-xl-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

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

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

  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .flex-xl-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-xl-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .justify-content-xl-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-xl-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .align-items-xl-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-xl-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

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

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

  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 544px) {
  .float-sm-left {
    float: left !important;
  }

  .float-sm-right {
    float: right !important;
  }

  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 769px) {
  .float-md-left {
    float: left !important;
  }

  .float-md-right {
    float: right !important;
  }

  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }

  .float-lg-right {
    float: right !important;
  }

  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }

  .float-xl-right {
    float: right !important;
  }

  .float-xl-none {
    float: none !important;
  }
}

.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

.user-select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

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

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@supports (position: sticky) {
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

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

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

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

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

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

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

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

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

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

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

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

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

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

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

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

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 544px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

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

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

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .m-sm-n1 {
    margin: -0.25rem !important;
  }

  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }

  .m-sm-n2 {
    margin: -0.5rem !important;
  }

  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }

  .m-sm-n3 {
    margin: -1rem !important;
  }

  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }

  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }

  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }

  .m-sm-n4 {
    margin: -1.5rem !important;
  }

  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }

  .m-sm-n5 {
    margin: -3rem !important;
  }

  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }

  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }

  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 769px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

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

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

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .m-md-n1 {
    margin: -0.25rem !important;
  }

  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }

  .m-md-n2 {
    margin: -0.5rem !important;
  }

  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }

  .m-md-n3 {
    margin: -1rem !important;
  }

  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }

  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }

  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }

  .m-md-n4 {
    margin: -1.5rem !important;
  }

  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }

  .m-md-n5 {
    margin: -3rem !important;
  }

  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }

  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }

  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

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

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

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .m-lg-n1 {
    margin: -0.25rem !important;
  }

  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }

  .m-lg-n2 {
    margin: -0.5rem !important;
  }

  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }

  .m-lg-n3 {
    margin: -1rem !important;
  }

  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }

  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }

  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }

  .m-lg-n4 {
    margin: -1.5rem !important;
  }

  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }

  .m-lg-n5 {
    margin: -3rem !important;
  }

  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }

  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }

  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

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

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

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }

  .m-xl-n1 {
    margin: -0.25rem !important;
  }

  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }

  .m-xl-n2 {
    margin: -0.5rem !important;
  }

  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }

  .m-xl-n3 {
    margin: -1rem !important;
  }

  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }

  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }

  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }

  .m-xl-n4 {
    margin: -1.5rem !important;
  }

  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }

  .m-xl-n5 {
    margin: -3rem !important;
  }

  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }

  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }

  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.text-monospace {
  font-family: "FolioStdBook", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

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

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

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

@media (min-width: 544px) {
  .text-sm-left {
    text-align: left !important;
  }

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

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

@media (min-width: 769px) {
  .text-md-left {
    text-align: left !important;
  }

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

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

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }

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

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

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }

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

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

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

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

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

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #000 !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #008827 !important;
}

.text-info {
  color: #17a2b8 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #c00 !important;
}

.text-light {
  color: #f8f9fa !important;
}

.text-dark {
  color: #343a40 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  font-size: 12px !important;
  color: #000 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media print {

  *,
  *::before,
  *::after {
    text-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  @page {
    size: a3;
  }

  body {
    min-width: 992px !important;
  }

  .container {
    min-width: 992px !important;
  }

  .navbar {
    display: none;
  }

  .badge {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }

  .table-dark {
    color: inherit;
  }

  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody+tbody {
    border-color: #ccc;
  }

  .table .thead-dark th {
    color: inherit;
    border-color: #ccc;
  }
}

.carousel .icon-prev,
.carousel .icon-next {
  background-color: #fff;
  font-size: 1.875em;
  height: 3rem;
  padding-top: 0.24em;
  width: 3rem;
}

.carousel .icon-prev::before,
.carousel .icon-next::before {
  color: black;
  font-family: FontAwesome, sans-serif;
}

.carousel .icon-prev::before {
  content: "\f104";
}

.carousel .icon-next::before {
  content: "\f105";
}

.carousel .carousel-control-prev {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.carousel .carousel-control-next {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.carousel .carousel-control-next,
.carousel .carousel-control-prev {
  width: 3rem;
}

.carousel .carousel-control-next:focus,
.carousel .carousel-control-prev:focus {
  outline: auto black;
}

.nav-tabs {
  border-bottom: none;
}

.nav-tabs .nav-link {
  font-size: 1.1rem;
  color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.active {
  border-bottom: 0.188em solid var(--skin-primary-color-1);
}

.card {
  margin-bottom: 1em;
}

.card-header h4 {
  margin-bottom: 0;
}

.modal .modal-body {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

dt {
  color: #495057;
  font-weight: normal;
}

.form-control.is-invalid {
  background-image: none;
}

.pull-left-xs {
  float: left;
}

.pull-right-xs {
  float: right;
}

@media (min-width: 544px) and (max-width: 768.98px) {
  .pull-left-sm {
    float: left;
  }

  .pull-right-sm {
    float: right;
  }
}

@media (min-width: 769px) and (max-width: 991.98px) {
  .pull-left-md {
    float: left;
  }

  .pull-right-md {
    float: right;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .pull-left-lg {
    float: left;
  }

  .pull-right-lg {
    float: right;
  }
}

@media (min-width: 1200px) {
  .pull-left-xl {
    float: left;
  }

  .pull-right-xl {
    float: right;
  }
}

@media (max-width: 543.98px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  .hidden-lg-down {
    display: none !important;
  }
}

.hidden-xl-down {
  display: none !important;
}

.row.equal-height>[class^=col] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*!
*  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/* FONT PATH */
@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 아이콘 컨테이너 대비 폰트 33% 확대 */
.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.2857142857em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none;
}

.fa-ul>li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center;
}

.fa-li.fa-lg {
  left: -1.8571428571em;
}

.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.fa-pull-left {
  float: left;
}

.fa-pull-right {
  float: right;
}

.fa.fa-pull-left {
  margin-right: 0.3em;
}

.fa.fa-pull-right {
  margin-left: 0.3em;
}

/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: 0.3em;
}

.fa.pull-right {
  margin-left: 0.3em;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  -webkit-filter: none;
  filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

/* 아이콘 문자(PUA)를 스크린리더가 읽지 않도록 */
.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper-pp:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-newspaper-o:before {
  content: "\f1ea";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bell-slash-o:before {
  content: "\f1f7";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-eyedropper:before {
  content: "\f1fb";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-pie-chart:before {
  content: "\f200";
}

.fa-line-chart:before {
  content: "\f201";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-bus:before {
  content: "\f207";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-cc:before {
  content: "\f20a";
}

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}

.fa-meanpath:before {
  content: "\f20c";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-diamond:before {
  content: "\f219";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-venus:before {
  content: "\f221";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-genderless:before {
  content: "\f22d";
}

.fa-facebook-official:before {
  content: "\f230";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-server:before {
  content: "\f233";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-train:before {
  content: "\f238";
}

.fa-subway:before {
  content: "\f239";
}

.fa-medium:before {
  content: "\f23a";
}

.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}

.fa-optin-monster:before {
  content: "\f23c";
}

.fa-opencart:before {
  content: "\f23d";
}

.fa-expeditedssl:before {
  content: "\f23e";
}

.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}

.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}

.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}

.fa-mouse-pointer:before {
  content: "\f245";
}

.fa-i-cursor:before {
  content: "\f246";
}

.fa-object-group:before {
  content: "\f247";
}

.fa-object-ungroup:before {
  content: "\f248";
}

.fa-sticky-note:before {
  content: "\f249";
}

.fa-sticky-note-o:before {
  content: "\f24a";
}

.fa-cc-jcb:before {
  content: "\f24b";
}

.fa-cc-diners-club:before {
  content: "\f24c";
}

.fa-clone:before {
  content: "\f24d";
}

.fa-balance-scale:before {
  content: "\f24e";
}

.fa-hourglass-o:before {
  content: "\f250";
}

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}

.fa-hourglass:before {
  content: "\f254";
}

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}

.fa-hand-scissors-o:before {
  content: "\f257";
}

.fa-hand-lizard-o:before {
  content: "\f258";
}

.fa-hand-spock-o:before {
  content: "\f259";
}

.fa-hand-pointer-o:before {
  content: "\f25a";
}

.fa-hand-peace-o:before {
  content: "\f25b";
}

.fa-trademark:before {
  content: "\f25c";
}

.fa-registered:before {
  content: "\f25d";
}

.fa-creative-commons:before {
  content: "\f25e";
}

.fa-gg:before {
  content: "\f260";
}

.fa-gg-circle:before {
  content: "\f261";
}

.fa-tripadvisor:before {
  content: "\f262";
}

.fa-odnoklassniki:before {
  content: "\f263";
}

.fa-odnoklassniki-square:before {
  content: "\f264";
}

.fa-get-pocket:before {
  content: "\f265";
}

.fa-wikipedia-w:before {
  content: "\f266";
}

.fa-safari:before {
  content: "\f267";
}

.fa-chrome:before {
  content: "\f268";
}

.fa-firefox:before {
  content: "\f269";
}

.fa-opera:before {
  content: "\f26a";
}

.fa-internet-explorer:before {
  content: "\f26b";
}

.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}

.fa-contao:before {
  content: "\f26d";
}

.fa-500px:before {
  content: "\f26e";
}

.fa-amazon:before {
  content: "\f270";
}

.fa-calendar-plus-o:before {
  content: "\f271";
}

.fa-calendar-minus-o:before {
  content: "\f272";
}

.fa-calendar-times-o:before {
  content: "\f273";
}

.fa-calendar-check-o:before {
  content: "\f274";
}

.fa-industry:before {
  content: "\f275";
}

.fa-map-pin:before {
  content: "\f276";
}

.fa-map-signs:before {
  content: "\f277";
}

.fa-map-o:before {
  content: "\f278";
}

.fa-map:before {
  content: "\f279";
}

.fa-commenting:before {
  content: "\f27a";
}

.fa-commenting-o:before {
  content: "\f27b";
}

.fa-houzz:before {
  content: "\f27c";
}

.fa-vimeo:before {
  content: "\f27d";
}

.fa-black-tie:before {
  content: "\f27e";
}

.fa-fonticons:before {
  content: "\f280";
}

.fa-reddit-alien:before {
  content: "\f281";
}

.fa-edge:before {
  content: "\f282";
}

.fa-credit-card-alt:before {
  content: "\f283";
}

.fa-codiepie:before {
  content: "\f284";
}

.fa-modx:before {
  content: "\f285";
}

.fa-fort-awesome:before {
  content: "\f286";
}

.fa-usb:before {
  content: "\f287";
}

.fa-product-hunt:before {
  content: "\f288";
}

.fa-mixcloud:before {
  content: "\f289";
}

.fa-scribd:before {
  content: "\f28a";
}

.fa-pause-circle:before {
  content: "\f28b";
}

.fa-pause-circle-o:before {
  content: "\f28c";
}

.fa-stop-circle:before {
  content: "\f28d";
}

.fa-stop-circle-o:before {
  content: "\f28e";
}

.fa-shopping-bag:before {
  content: "\f290";
}

.fa-shopping-basket:before {
  content: "\f291";
}

.fa-hashtag:before {
  content: "\f292";
}

.fa-bluetooth:before {
  content: "\f293";
}

.fa-bluetooth-b:before {
  content: "\f294";
}

.fa-percent:before {
  content: "\f295";
}

.fa-gitlab:before {
  content: "\f296";
}

.fa-wpbeginner:before {
  content: "\f297";
}

.fa-wpforms:before {
  content: "\f298";
}

.fa-envira:before {
  content: "\f299";
}

.fa-universal-access:before {
  content: "\f29a";
}

.fa-wheelchair-alt:before {
  content: "\f29b";
}

.fa-question-circle-o:before {
  content: "\f29c";
}

.fa-blind:before {
  content: "\f29d";
}

.fa-audio-description:before {
  content: "\f29e";
}

.fa-volume-control-phone:before {
  content: "\f2a0";
}

.fa-braille:before {
  content: "\f2a1";
}

.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}

.fa-glide:before {
  content: "\f2a5";
}

.fa-glide-g:before {
  content: "\f2a6";
}

.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}

.fa-low-vision:before {
  content: "\f2a8";
}

.fa-viadeo:before {
  content: "\f2a9";
}

.fa-viadeo-square:before {
  content: "\f2aa";
}

.fa-snapchat:before {
  content: "\f2ab";
}

.fa-snapchat-ghost:before {
  content: "\f2ac";
}

.fa-snapchat-square:before {
  content: "\f2ad";
}

.fa-pied-piper:before {
  content: "\f2ae";
}

.fa-first-order:before {
  content: "\f2b0";
}

.fa-yoast:before {
  content: "\f2b1";
}

.fa-themeisle:before {
  content: "\f2b2";
}

.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}

.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}

.fa-handshake-o:before {
  content: "\f2b5";
}

.fa-envelope-open:before {
  content: "\f2b6";
}

.fa-envelope-open-o:before {
  content: "\f2b7";
}

.fa-linode:before {
  content: "\f2b8";
}

.fa-address-book:before {
  content: "\f2b9";
}

.fa-address-book-o:before {
  content: "\f2ba";
}

.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}

.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}

.fa-user-circle:before {
  content: "\f2bd";
}

.fa-user-circle-o:before {
  content: "\f2be";
}

.fa-user-o:before {
  content: "\f2c0";
}

.fa-id-badge:before {
  content: "\f2c1";
}

.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}

.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}

.fa-quora:before {
  content: "\f2c4";
}

.fa-free-code-camp:before {
  content: "\f2c5";
}

.fa-telegram:before {
  content: "\f2c6";
}

.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}

.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}

.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}

.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

.fa-shower:before {
  content: "\f2cc";
}

.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}

.fa-podcast:before {
  content: "\f2ce";
}

.fa-window-maximize:before {
  content: "\f2d0";
}

.fa-window-minimize:before {
  content: "\f2d1";
}

.fa-window-restore:before {
  content: "\f2d2";
}

.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}

.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}

.fa-bandcamp:before {
  content: "\f2d5";
}

.fa-grav:before {
  content: "\f2d6";
}

.fa-etsy:before {
  content: "\f2d7";
}

.fa-imdb:before {
  content: "\f2d8";
}

.fa-ravelry:before {
  content: "\f2d9";
}

.fa-eercast:before {
  content: "\f2da";
}

.fa-microchip:before {
  content: "\f2db";
}

.fa-snowflake-o:before {
  content: "\f2dc";
}

.fa-superpowers:before {
  content: "\f2dd";
}

.fa-wpexplorer:before {
  content: "\f2de";
}

.fa-meetup:before {
  content: "\f2e0";
}

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

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.fib,
.fi {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.fi {
  position: relative;
  display: inline-block;
  width: 1.333333em;
  line-height: 1em;
}

.fi:before {
  content: " ";
}

.fi.fis {
  width: 1em;
}

.fi-xx {
  background-image: url(../fonts/flags/4x3/xx.svg);
}

.fi-xx.fis {
  background-image: url(../fonts/flags/1x1/xx.svg);
}

.fi-ad {
  background-image: url(../fonts/flags/4x3/ad.svg);
}

.fi-ad.fis {
  background-image: url(../fonts/flags/1x1/ad.svg);
}

.fi-ae {
  background-image: url(../fonts/flags/4x3/ae.svg);
}

.fi-ae.fis {
  background-image: url(../fonts/flags/1x1/ae.svg);
}

.fi-af {
  background-image: url(../fonts/flags/4x3/af.svg);
}

.fi-af.fis {
  background-image: url(../fonts/flags/1x1/af.svg);
}

.fi-ag {
  background-image: url(../fonts/flags/4x3/ag.svg);
}

.fi-ag.fis {
  background-image: url(../fonts/flags/1x1/ag.svg);
}

.fi-ai {
  background-image: url(../fonts/flags/4x3/ai.svg);
}

.fi-ai.fis {
  background-image: url(../fonts/flags/1x1/ai.svg);
}

.fi-al {
  background-image: url(../fonts/flags/4x3/al.svg);
}

.fi-al.fis {
  background-image: url(../fonts/flags/1x1/al.svg);
}

.fi-am {
  background-image: url(../fonts/flags/4x3/am.svg);
}

.fi-am.fis {
  background-image: url(../fonts/flags/1x1/am.svg);
}

.fi-ao {
  background-image: url(../fonts/flags/4x3/ao.svg);
}

.fi-ao.fis {
  background-image: url(../fonts/flags/1x1/ao.svg);
}

.fi-aq {
  background-image: url(../fonts/flags/4x3/aq.svg);
}

.fi-aq.fis {
  background-image: url(../fonts/flags/1x1/aq.svg);
}

.fi-ar {
  background-image: url(../fonts/flags/4x3/ar.svg);
}

.fi-ar.fis {
  background-image: url(../fonts/flags/1x1/ar.svg);
}

.fi-as {
  background-image: url(../fonts/flags/4x3/as.svg);
}

.fi-as.fis {
  background-image: url(../fonts/flags/1x1/as.svg);
}

.fi-at {
  background-image: url(../fonts/flags/4x3/at.svg);
}

.fi-at.fis {
  background-image: url(../fonts/flags/1x1/at.svg);
}

.fi-au {
  background-image: url(../fonts/flags/4x3/au.svg);
}

.fi-au.fis {
  background-image: url(../fonts/flags/1x1/au.svg);
}

.fi-aw {
  background-image: url(../fonts/flags/4x3/aw.svg);
}

.fi-aw.fis {
  background-image: url(../fonts/flags/1x1/aw.svg);
}

.fi-ax {
  background-image: url(../fonts/flags/4x3/ax.svg);
}

.fi-ax.fis {
  background-image: url(../fonts/flags/1x1/ax.svg);
}

.fi-az {
  background-image: url(../fonts/flags/4x3/az.svg);
}

.fi-az.fis {
  background-image: url(../fonts/flags/1x1/az.svg);
}

.fi-ba {
  background-image: url(../fonts/flags/4x3/ba.svg);
}

.fi-ba.fis {
  background-image: url(../fonts/flags/1x1/ba.svg);
}

.fi-bb {
  background-image: url(../fonts/flags/4x3/bb.svg);
}

.fi-bb.fis {
  background-image: url(../fonts/flags/1x1/bb.svg);
}

.fi-bd {
  background-image: url(../fonts/flags/4x3/bd.svg);
}

.fi-bd.fis {
  background-image: url(../fonts/flags/1x1/bd.svg);
}

.fi-be {
  background-image: url(../fonts/flags/4x3/be.svg);
}

.fi-be.fis {
  background-image: url(../fonts/flags/1x1/be.svg);
}

.fi-bf {
  background-image: url(../fonts/flags/4x3/bf.svg);
}

.fi-bf.fis {
  background-image: url(../fonts/flags/1x1/bf.svg);
}

.fi-bg {
  background-image: url(../fonts/flags/4x3/bg.svg);
}

.fi-bg.fis {
  background-image: url(../fonts/flags/1x1/bg.svg);
}

.fi-bh {
  background-image: url(../fonts/flags/4x3/bh.svg);
}

.fi-bh.fis {
  background-image: url(../fonts/flags/1x1/bh.svg);
}

.fi-bi {
  background-image: url(../fonts/flags/4x3/bi.svg);
}

.fi-bi.fis {
  background-image: url(../fonts/flags/1x1/bi.svg);
}

.fi-bj {
  background-image: url(../fonts/flags/4x3/bj.svg);
}

.fi-bj.fis {
  background-image: url(../fonts/flags/1x1/bj.svg);
}

.fi-bl {
  background-image: url(../fonts/flags/4x3/bl.svg);
}

.fi-bl.fis {
  background-image: url(../fonts/flags/1x1/bl.svg);
}

.fi-bm {
  background-image: url(../fonts/flags/4x3/bm.svg);
}

.fi-bm.fis {
  background-image: url(../fonts/flags/1x1/bm.svg);
}

.fi-bn {
  background-image: url(../fonts/flags/4x3/bn.svg);
}

.fi-bn.fis {
  background-image: url(../fonts/flags/1x1/bn.svg);
}

.fi-bo {
  background-image: url(../fonts/flags/4x3/bo.svg);
}

.fi-bo.fis {
  background-image: url(../fonts/flags/1x1/bo.svg);
}

.fi-bq {
  background-image: url(../fonts/flags/4x3/bq.svg);
}

.fi-bq.fis {
  background-image: url(../fonts/flags/1x1/bq.svg);
}

.fi-br {
  background-image: url(../fonts/flags/4x3/br.svg);
}

.fi-br.fis {
  background-image: url(../fonts/flags/1x1/br.svg);
}

.fi-bs {
  background-image: url(../fonts/flags/4x3/bs.svg);
}

.fi-bs.fis {
  background-image: url(../fonts/flags/1x1/bs.svg);
}

.fi-bt {
  background-image: url(../fonts/flags/4x3/bt.svg);
}

.fi-bt.fis {
  background-image: url(../fonts/flags/1x1/bt.svg);
}

.fi-bv {
  background-image: url(../fonts/flags/4x3/bv.svg);
}

.fi-bv.fis {
  background-image: url(../fonts/flags/1x1/bv.svg);
}

.fi-bw {
  background-image: url(../fonts/flags/4x3/bw.svg);
}

.fi-bw.fis {
  background-image: url(../fonts/flags/1x1/bw.svg);
}

.fi-by {
  background-image: url(../fonts/flags/4x3/by.svg);
}

.fi-by.fis {
  background-image: url(../fonts/flags/1x1/by.svg);
}

.fi-bz {
  background-image: url(../fonts/flags/4x3/bz.svg);
}

.fi-bz.fis {
  background-image: url(../fonts/flags/1x1/bz.svg);
}

.fi-ca {
  background-image: url(../fonts/flags/4x3/ca.svg);
}

.fi-ca.fis {
  background-image: url(../fonts/flags/1x1/ca.svg);
}

.fi-cc {
  background-image: url(../fonts/flags/4x3/cc.svg);
}

.fi-cc.fis {
  background-image: url(../fonts/flags/1x1/cc.svg);
}

.fi-cd {
  background-image: url(../fonts/flags/4x3/cd.svg);
}

.fi-cd.fis {
  background-image: url(../fonts/flags/1x1/cd.svg);
}

.fi-cf {
  background-image: url(../fonts/flags/4x3/cf.svg);
}

.fi-cf.fis {
  background-image: url(../fonts/flags/1x1/cf.svg);
}

.fi-cg {
  background-image: url(../fonts/flags/4x3/cg.svg);
}

.fi-cg.fis {
  background-image: url(../fonts/flags/1x1/cg.svg);
}

.fi-ch {
  background-image: url(../fonts/flags/4x3/ch.svg);
}

.fi-ch.fis {
  background-image: url(../fonts/flags/1x1/ch.svg);
}

.fi-ci {
  background-image: url(../fonts/flags/4x3/ci.svg);
}

.fi-ci.fis {
  background-image: url(../fonts/flags/1x1/ci.svg);
}

.fi-ck {
  background-image: url(../fonts/flags/4x3/ck.svg);
}

.fi-ck.fis {
  background-image: url(../fonts/flags/1x1/ck.svg);
}

.fi-cl {
  background-image: url(../fonts/flags/4x3/cl.svg);
}

.fi-cl.fis {
  background-image: url(../fonts/flags/1x1/cl.svg);
}

.fi-cm {
  background-image: url(../fonts/flags/4x3/cm.svg);
}

.fi-cm.fis {
  background-image: url(../fonts/flags/1x1/cm.svg);
}

.fi-cn {
  background-image: url(../fonts/flags/4x3/cn.svg);
}

.fi-cn.fis {
  background-image: url(../fonts/flags/1x1/cn.svg);
}

.fi-co {
  background-image: url(../fonts/flags/4x3/co.svg);
}

.fi-co.fis {
  background-image: url(../fonts/flags/1x1/co.svg);
}

.fi-cr {
  background-image: url(../fonts/flags/4x3/cr.svg);
}

.fi-cr.fis {
  background-image: url(../fonts/flags/1x1/cr.svg);
}

.fi-cu {
  background-image: url(../fonts/flags/4x3/cu.svg);
}

.fi-cu.fis {
  background-image: url(../fonts/flags/1x1/cu.svg);
}

.fi-cv {
  background-image: url(../fonts/flags/4x3/cv.svg);
}

.fi-cv.fis {
  background-image: url(../fonts/flags/1x1/cv.svg);
}

.fi-cw {
  background-image: url(../fonts/flags/4x3/cw.svg);
}

.fi-cw.fis {
  background-image: url(../fonts/flags/1x1/cw.svg);
}

.fi-cx {
  background-image: url(../fonts/flags/4x3/cx.svg);
}

.fi-cx.fis {
  background-image: url(../fonts/flags/1x1/cx.svg);
}

.fi-cy {
  background-image: url(../fonts/flags/4x3/cy.svg);
}

.fi-cy.fis {
  background-image: url(../fonts/flags/1x1/cy.svg);
}

.fi-cz {
  background-image: url(../fonts/flags/4x3/cz.svg);
}

.fi-cz.fis {
  background-image: url(../fonts/flags/1x1/cz.svg);
}

.fi-de {
  background-image: url(../fonts/flags/4x3/de.svg);
}

.fi-de.fis {
  background-image: url(../fonts/flags/1x1/de.svg);
}

.fi-dj {
  background-image: url(../fonts/flags/4x3/dj.svg);
}

.fi-dj.fis {
  background-image: url(../fonts/flags/1x1/dj.svg);
}

.fi-dk {
  background-image: url(../fonts/flags/4x3/dk.svg);
}

.fi-dk.fis {
  background-image: url(../fonts/flags/1x1/dk.svg);
}

.fi-dm {
  background-image: url(../fonts/flags/4x3/dm.svg);
}

.fi-dm.fis {
  background-image: url(../fonts/flags/1x1/dm.svg);
}

.fi-do {
  background-image: url(../fonts/flags/4x3/do.svg);
}

.fi-do.fis {
  background-image: url(../fonts/flags/1x1/do.svg);
}

.fi-dz {
  background-image: url(../fonts/flags/4x3/dz.svg);
}

.fi-dz.fis {
  background-image: url(../fonts/flags/1x1/dz.svg);
}

.fi-ec {
  background-image: url(../fonts/flags/4x3/ec.svg);
}

.fi-ec.fis {
  background-image: url(../fonts/flags/1x1/ec.svg);
}

.fi-ee {
  background-image: url(../fonts/flags/4x3/ee.svg);
}

.fi-ee.fis {
  background-image: url(../fonts/flags/1x1/ee.svg);
}

.fi-eg {
  background-image: url(../fonts/flags/4x3/eg.svg);
}

.fi-eg.fis {
  background-image: url(../fonts/flags/1x1/eg.svg);
}

.fi-eh {
  background-image: url(../fonts/flags/4x3/eh.svg);
}

.fi-eh.fis {
  background-image: url(../fonts/flags/1x1/eh.svg);
}

.fi-er {
  background-image: url(../fonts/flags/4x3/er.svg);
}

.fi-er.fis {
  background-image: url(../fonts/flags/1x1/er.svg);
}

.fi-es {
  background-image: url(../fonts/flags/4x3/es.svg);
}

.fi-es.fis {
  background-image: url(../fonts/flags/1x1/es.svg);
}

.fi-et {
  background-image: url(../fonts/flags/4x3/et.svg);
}

.fi-et.fis {
  background-image: url(../fonts/flags/1x1/et.svg);
}

.fi-fi {
  background-image: url(../fonts/flags/4x3/fi.svg);
}

.fi-fi.fis {
  background-image: url(../fonts/flags/1x1/fi.svg);
}

.fi-fj {
  background-image: url(../fonts/flags/4x3/fj.svg);
}

.fi-fj.fis {
  background-image: url(../fonts/flags/1x1/fj.svg);
}

.fi-fk {
  background-image: url(../fonts/flags/4x3/fk.svg);
}

.fi-fk.fis {
  background-image: url(../fonts/flags/1x1/fk.svg);
}

.fi-fm {
  background-image: url(../fonts/flags/4x3/fm.svg);
}

.fi-fm.fis {
  background-image: url(../fonts/flags/1x1/fm.svg);
}

.fi-fo {
  background-image: url(../fonts/flags/4x3/fo.svg);
}

.fi-fo.fis {
  background-image: url(../fonts/flags/1x1/fo.svg);
}

.fi-fr {
  background-image: url(../fonts/flags/4x3/fr.svg);
}

.fi-fr.fis {
  background-image: url(../fonts/flags/1x1/fr.svg);
}

.fi-ga {
  background-image: url(../fonts/flags/4x3/ga.svg);
}

.fi-ga.fis {
  background-image: url(../fonts/flags/1x1/ga.svg);
}

.fi-gb {
  background-image: url(../fonts/flags/4x3/gb.svg);
}

.fi-gb.fis {
  background-image: url(../fonts/flags/1x1/gb.svg);
}

.fi-gd {
  background-image: url(../fonts/flags/4x3/gd.svg);
}

.fi-gd.fis {
  background-image: url(../fonts/flags/1x1/gd.svg);
}

.fi-ge {
  background-image: url(../fonts/flags/4x3/ge.svg);
}

.fi-ge.fis {
  background-image: url(../fonts/flags/1x1/ge.svg);
}

.fi-gf {
  background-image: url(../fonts/flags/4x3/gf.svg);
}

.fi-gf.fis {
  background-image: url(../fonts/flags/1x1/gf.svg);
}

.fi-gg {
  background-image: url(../fonts/flags/4x3/gg.svg);
}

.fi-gg.fis {
  background-image: url(../fonts/flags/1x1/gg.svg);
}

.fi-gh {
  background-image: url(../fonts/flags/4x3/gh.svg);
}

.fi-gh.fis {
  background-image: url(../fonts/flags/1x1/gh.svg);
}

.fi-gi {
  background-image: url(../fonts/flags/4x3/gi.svg);
}

.fi-gi.fis {
  background-image: url(../fonts/flags/1x1/gi.svg);
}

.fi-gl {
  background-image: url(../fonts/flags/4x3/gl.svg);
}

.fi-gl.fis {
  background-image: url(../fonts/flags/1x1/gl.svg);
}

.fi-gm {
  background-image: url(../fonts/flags/4x3/gm.svg);
}

.fi-gm.fis {
  background-image: url(../fonts/flags/1x1/gm.svg);
}

.fi-gn {
  background-image: url(../fonts/flags/4x3/gn.svg);
}

.fi-gn.fis {
  background-image: url(../fonts/flags/1x1/gn.svg);
}

.fi-gp {
  background-image: url(../fonts/flags/4x3/gp.svg);
}

.fi-gp.fis {
  background-image: url(../fonts/flags/1x1/gp.svg);
}

.fi-gq {
  background-image: url(../fonts/flags/4x3/gq.svg);
}

.fi-gq.fis {
  background-image: url(../fonts/flags/1x1/gq.svg);
}

.fi-gr {
  background-image: url(../fonts/flags/4x3/gr.svg);
}

.fi-gr.fis {
  background-image: url(../fonts/flags/1x1/gr.svg);
}

.fi-gs {
  background-image: url(../fonts/flags/4x3/gs.svg);
}

.fi-gs.fis {
  background-image: url(../fonts/flags/1x1/gs.svg);
}

.fi-gt {
  background-image: url(../fonts/flags/4x3/gt.svg);
}

.fi-gt.fis {
  background-image: url(../fonts/flags/1x1/gt.svg);
}

.fi-gu {
  background-image: url(../fonts/flags/4x3/gu.svg);
}

.fi-gu.fis {
  background-image: url(../fonts/flags/1x1/gu.svg);
}

.fi-gw {
  background-image: url(../fonts/flags/4x3/gw.svg);
}

.fi-gw.fis {
  background-image: url(../fonts/flags/1x1/gw.svg);
}

.fi-gy {
  background-image: url(../fonts/flags/4x3/gy.svg);
}

.fi-gy.fis {
  background-image: url(../fonts/flags/1x1/gy.svg);
}

.fi-hk {
  background-image: url(../fonts/flags/4x3/hk.svg);
}

.fi-hk.fis {
  background-image: url(../fonts/flags/1x1/hk.svg);
}

.fi-hm {
  background-image: url(../fonts/flags/4x3/hm.svg);
}

.fi-hm.fis {
  background-image: url(../fonts/flags/1x1/hm.svg);
}

.fi-hn {
  background-image: url(../fonts/flags/4x3/hn.svg);
}

.fi-hn.fis {
  background-image: url(../fonts/flags/1x1/hn.svg);
}

.fi-hr {
  background-image: url(../fonts/flags/4x3/hr.svg);
}

.fi-hr.fis {
  background-image: url(../fonts/flags/1x1/hr.svg);
}

.fi-ht {
  background-image: url(../fonts/flags/4x3/ht.svg);
}

.fi-ht.fis {
  background-image: url(../fonts/flags/1x1/ht.svg);
}

.fi-hu {
  background-image: url(../fonts/flags/4x3/hu.svg);
}

.fi-hu.fis {
  background-image: url(../fonts/flags/1x1/hu.svg);
}

.fi-id {
  background-image: url(../fonts/flags/4x3/id.svg);
}

.fi-id.fis {
  background-image: url(../fonts/flags/1x1/id.svg);
}

.fi-ie {
  background-image: url(../fonts/flags/4x3/ie.svg);
}

.fi-ie.fis {
  background-image: url(../fonts/flags/1x1/ie.svg);
}

.fi-il {
  background-image: url(../fonts/flags/4x3/il.svg);
}

.fi-il.fis {
  background-image: url(../fonts/flags/1x1/il.svg);
}

.fi-im {
  background-image: url(../fonts/flags/4x3/im.svg);
}

.fi-im.fis {
  background-image: url(../fonts/flags/1x1/im.svg);
}

.fi-in {
  background-image: url(../fonts/flags/4x3/in.svg);
}

.fi-in.fis {
  background-image: url(../fonts/flags/1x1/in.svg);
}

.fi-io {
  background-image: url(../fonts/flags/4x3/io.svg);
}

.fi-io.fis {
  background-image: url(../fonts/flags/1x1/io.svg);
}

.fi-iq {
  background-image: url(../fonts/flags/4x3/iq.svg);
}

.fi-iq.fis {
  background-image: url(../fonts/flags/1x1/iq.svg);
}

.fi-ir {
  background-image: url(../fonts/flags/4x3/ir.svg);
}

.fi-ir.fis {
  background-image: url(../fonts/flags/1x1/ir.svg);
}

.fi-is {
  background-image: url(../fonts/flags/4x3/is.svg);
}

.fi-is.fis {
  background-image: url(../fonts/flags/1x1/is.svg);
}

.fi-it {
  background-image: url(../fonts/flags/4x3/it.svg);
}

.fi-it.fis {
  background-image: url(../fonts/flags/1x1/it.svg);
}

.fi-je {
  background-image: url(../fonts/flags/4x3/je.svg);
}

.fi-je.fis {
  background-image: url(../fonts/flags/1x1/je.svg);
}

.fi-jm {
  background-image: url(../fonts/flags/4x3/jm.svg);
}

.fi-jm.fis {
  background-image: url(../fonts/flags/1x1/jm.svg);
}

.fi-jo {
  background-image: url(../fonts/flags/4x3/jo.svg);
}

.fi-jo.fis {
  background-image: url(../fonts/flags/1x1/jo.svg);
}

.fi-jp {
  background-image: url(../fonts/flags/4x3/jp.svg);
}

.fi-jp.fis {
  background-image: url(../fonts/flags/1x1/jp.svg);
}

.fi-ke {
  background-image: url(../fonts/flags/4x3/ke.svg);
}

.fi-ke.fis {
  background-image: url(../fonts/flags/1x1/ke.svg);
}

.fi-kg {
  background-image: url(../fonts/flags/4x3/kg.svg);
}

.fi-kg.fis {
  background-image: url(../fonts/flags/1x1/kg.svg);
}

.fi-kh {
  background-image: url(../fonts/flags/4x3/kh.svg);
}

.fi-kh.fis {
  background-image: url(../fonts/flags/1x1/kh.svg);
}

.fi-ki {
  background-image: url(../fonts/flags/4x3/ki.svg);
}

.fi-ki.fis {
  background-image: url(../fonts/flags/1x1/ki.svg);
}

.fi-km {
  background-image: url(../fonts/flags/4x3/km.svg);
}

.fi-km.fis {
  background-image: url(../fonts/flags/1x1/km.svg);
}

.fi-kn {
  background-image: url(../fonts/flags/4x3/kn.svg);
}

.fi-kn.fis {
  background-image: url(../fonts/flags/1x1/kn.svg);
}

.fi-kp {
  background-image: url(../fonts/flags/4x3/kp.svg);
}

.fi-kp.fis {
  background-image: url(../fonts/flags/1x1/kp.svg);
}

.fi-kr {
  background-image: url(../fonts/flags/4x3/kr.svg);
}

.fi-kr.fis {
  background-image: url(../fonts/flags/1x1/kr.svg);
}

.fi-kw {
  background-image: url(../fonts/flags/4x3/kw.svg);
}

.fi-kw.fis {
  background-image: url(../fonts/flags/1x1/kw.svg);
}

.fi-ky {
  background-image: url(../fonts/flags/4x3/ky.svg);
}

.fi-ky.fis {
  background-image: url(../fonts/flags/1x1/ky.svg);
}

.fi-kz {
  background-image: url(../fonts/flags/4x3/kz.svg);
}

.fi-kz.fis {
  background-image: url(../fonts/flags/1x1/kz.svg);
}

.fi-la {
  background-image: url(../fonts/flags/4x3/la.svg);
}

.fi-la.fis {
  background-image: url(../fonts/flags/1x1/la.svg);
}

.fi-lb {
  background-image: url(../fonts/flags/4x3/lb.svg);
}

.fi-lb.fis {
  background-image: url(../fonts/flags/1x1/lb.svg);
}

.fi-lc {
  background-image: url(../fonts/flags/4x3/lc.svg);
}

.fi-lc.fis {
  background-image: url(../fonts/flags/1x1/lc.svg);
}

.fi-li {
  background-image: url(../fonts/flags/4x3/li.svg);
}

.fi-li.fis {
  background-image: url(../fonts/flags/1x1/li.svg);
}

.fi-lk {
  background-image: url(../fonts/flags/4x3/lk.svg);
}

.fi-lk.fis {
  background-image: url(../fonts/flags/1x1/lk.svg);
}

.fi-lr {
  background-image: url(../fonts/flags/4x3/lr.svg);
}

.fi-lr.fis {
  background-image: url(../fonts/flags/1x1/lr.svg);
}

.fi-ls {
  background-image: url(../fonts/flags/4x3/ls.svg);
}

.fi-ls.fis {
  background-image: url(../fonts/flags/1x1/ls.svg);
}

.fi-lt {
  background-image: url(../fonts/flags/4x3/lt.svg);
}

.fi-lt.fis {
  background-image: url(../fonts/flags/1x1/lt.svg);
}

.fi-lu {
  background-image: url(../fonts/flags/4x3/lu.svg);
}

.fi-lu.fis {
  background-image: url(../fonts/flags/1x1/lu.svg);
}

.fi-lv {
  background-image: url(../fonts/flags/4x3/lv.svg);
}

.fi-lv.fis {
  background-image: url(../fonts/flags/1x1/lv.svg);
}

.fi-ly {
  background-image: url(../fonts/flags/4x3/ly.svg);
}

.fi-ly.fis {
  background-image: url(../fonts/flags/1x1/ly.svg);
}

.fi-ma {
  background-image: url(../fonts/flags/4x3/ma.svg);
}

.fi-ma.fis {
  background-image: url(../fonts/flags/1x1/ma.svg);
}

.fi-mc {
  background-image: url(../fonts/flags/4x3/mc.svg);
}

.fi-mc.fis {
  background-image: url(../fonts/flags/1x1/mc.svg);
}

.fi-md {
  background-image: url(../fonts/flags/4x3/md.svg);
}

.fi-md.fis {
  background-image: url(../fonts/flags/1x1/md.svg);
}

.fi-me {
  background-image: url(../fonts/flags/4x3/me.svg);
}

.fi-me.fis {
  background-image: url(../fonts/flags/1x1/me.svg);
}

.fi-mf {
  background-image: url(../fonts/flags/4x3/mf.svg);
}

.fi-mf.fis {
  background-image: url(../fonts/flags/1x1/mf.svg);
}

.fi-mg {
  background-image: url(../fonts/flags/4x3/mg.svg);
}

.fi-mg.fis {
  background-image: url(../fonts/flags/1x1/mg.svg);
}

.fi-mh {
  background-image: url(../fonts/flags/4x3/mh.svg);
}

.fi-mh.fis {
  background-image: url(../fonts/flags/1x1/mh.svg);
}

.fi-mk {
  background-image: url(../fonts/flags/4x3/mk.svg);
}

.fi-mk.fis {
  background-image: url(../fonts/flags/1x1/mk.svg);
}

.fi-ml {
  background-image: url(../fonts/flags/4x3/ml.svg);
}

.fi-ml.fis {
  background-image: url(../fonts/flags/1x1/ml.svg);
}

.fi-mm {
  background-image: url(../fonts/flags/4x3/mm.svg);
}

.fi-mm.fis {
  background-image: url(../fonts/flags/1x1/mm.svg);
}

.fi-mn {
  background-image: url(../fonts/flags/4x3/mn.svg);
}

.fi-mn.fis {
  background-image: url(../fonts/flags/1x1/mn.svg);
}

.fi-mo {
  background-image: url(../fonts/flags/4x3/mo.svg);
}

.fi-mo.fis {
  background-image: url(../fonts/flags/1x1/mo.svg);
}

.fi-mp {
  background-image: url(../fonts/flags/4x3/mp.svg);
}

.fi-mp.fis {
  background-image: url(../fonts/flags/1x1/mp.svg);
}

.fi-mq {
  background-image: url(../fonts/flags/4x3/mq.svg);
}

.fi-mq.fis {
  background-image: url(../fonts/flags/1x1/mq.svg);
}

.fi-mr {
  background-image: url(../fonts/flags/4x3/mr.svg);
}

.fi-mr.fis {
  background-image: url(../fonts/flags/1x1/mr.svg);
}

.fi-ms {
  background-image: url(../fonts/flags/4x3/ms.svg);
}

.fi-ms.fis {
  background-image: url(../fonts/flags/1x1/ms.svg);
}

.fi-mt {
  background-image: url(../fonts/flags/4x3/mt.svg);
}

.fi-mt.fis {
  background-image: url(../fonts/flags/1x1/mt.svg);
}

.fi-mu {
  background-image: url(../fonts/flags/4x3/mu.svg);
}

.fi-mu.fis {
  background-image: url(../fonts/flags/1x1/mu.svg);
}

.fi-mv {
  background-image: url(../fonts/flags/4x3/mv.svg);
}

.fi-mv.fis {
  background-image: url(../fonts/flags/1x1/mv.svg);
}

.fi-mw {
  background-image: url(../fonts/flags/4x3/mw.svg);
}

.fi-mw.fis {
  background-image: url(../fonts/flags/1x1/mw.svg);
}

.fi-mx {
  background-image: url(../fonts/flags/4x3/mx.svg);
}

.fi-mx.fis {
  background-image: url(../fonts/flags/1x1/mx.svg);
}

.fi-my {
  background-image: url(../fonts/flags/4x3/my.svg);
}

.fi-my.fis {
  background-image: url(../fonts/flags/1x1/my.svg);
}

.fi-mz {
  background-image: url(../fonts/flags/4x3/mz.svg);
}

.fi-mz.fis {
  background-image: url(../fonts/flags/1x1/mz.svg);
}

.fi-na {
  background-image: url(../fonts/flags/4x3/na.svg);
}

.fi-na.fis {
  background-image: url(../fonts/flags/1x1/na.svg);
}

.fi-nc {
  background-image: url(../fonts/flags/4x3/nc.svg);
}

.fi-nc.fis {
  background-image: url(../fonts/flags/1x1/nc.svg);
}

.fi-ne {
  background-image: url(../fonts/flags/4x3/ne.svg);
}

.fi-ne.fis {
  background-image: url(../fonts/flags/1x1/ne.svg);
}

.fi-nf {
  background-image: url(../fonts/flags/4x3/nf.svg);
}

.fi-nf.fis {
  background-image: url(../fonts/flags/1x1/nf.svg);
}

.fi-ng {
  background-image: url(../fonts/flags/4x3/ng.svg);
}

.fi-ng.fis {
  background-image: url(../fonts/flags/1x1/ng.svg);
}

.fi-ni {
  background-image: url(../fonts/flags/4x3/ni.svg);
}

.fi-ni.fis {
  background-image: url(../fonts/flags/1x1/ni.svg);
}

.fi-nl {
  background-image: url(../fonts/flags/4x3/nl.svg);
}

.fi-nl.fis {
  background-image: url(../fonts/flags/1x1/nl.svg);
}

.fi-no {
  background-image: url(../fonts/flags/4x3/no.svg);
}

.fi-no.fis {
  background-image: url(../fonts/flags/1x1/no.svg);
}

.fi-np {
  background-image: url(../fonts/flags/4x3/np.svg);
}

.fi-np.fis {
  background-image: url(../fonts/flags/1x1/np.svg);
}

.fi-nr {
  background-image: url(../fonts/flags/4x3/nr.svg);
}

.fi-nr.fis {
  background-image: url(../fonts/flags/1x1/nr.svg);
}

.fi-nu {
  background-image: url(../fonts/flags/4x3/nu.svg);
}

.fi-nu.fis {
  background-image: url(../fonts/flags/1x1/nu.svg);
}

.fi-nz {
  background-image: url(../fonts/flags/4x3/nz.svg);
}

.fi-nz.fis {
  background-image: url(../fonts/flags/1x1/nz.svg);
}

.fi-om {
  background-image: url(../fonts/flags/4x3/om.svg);
}

.fi-om.fis {
  background-image: url(../fonts/flags/1x1/om.svg);
}

.fi-pa {
  background-image: url(../fonts/flags/4x3/pa.svg);
}

.fi-pa.fis {
  background-image: url(../fonts/flags/1x1/pa.svg);
}

.fi-pe {
  background-image: url(../fonts/flags/4x3/pe.svg);
}

.fi-pe.fis {
  background-image: url(../fonts/flags/1x1/pe.svg);
}

.fi-pf {
  background-image: url(../fonts/flags/4x3/pf.svg);
}

.fi-pf.fis {
  background-image: url(../fonts/flags/1x1/pf.svg);
}

.fi-pg {
  background-image: url(../fonts/flags/4x3/pg.svg);
}

.fi-pg.fis {
  background-image: url(../fonts/flags/1x1/pg.svg);
}

.fi-ph {
  background-image: url(../fonts/flags/4x3/ph.svg);
}

.fi-ph.fis {
  background-image: url(../fonts/flags/1x1/ph.svg);
}

.fi-pk {
  background-image: url(../fonts/flags/4x3/pk.svg);
}

.fi-pk.fis {
  background-image: url(../fonts/flags/1x1/pk.svg);
}

.fi-pl {
  background-image: url(../fonts/flags/4x3/pl.svg);
}

.fi-pl.fis {
  background-image: url(../fonts/flags/1x1/pl.svg);
}

.fi-pm {
  background-image: url(../fonts/flags/4x3/pm.svg);
}

.fi-pm.fis {
  background-image: url(../fonts/flags/1x1/pm.svg);
}

.fi-pn {
  background-image: url(../fonts/flags/4x3/pn.svg);
}

.fi-pn.fis {
  background-image: url(../fonts/flags/1x1/pn.svg);
}

.fi-pr {
  background-image: url(../fonts/flags/4x3/pr.svg);
}

.fi-pr.fis {
  background-image: url(../fonts/flags/1x1/pr.svg);
}

.fi-ps {
  background-image: url(../fonts/flags/4x3/ps.svg);
}

.fi-ps.fis {
  background-image: url(../fonts/flags/1x1/ps.svg);
}

.fi-pt {
  background-image: url(../fonts/flags/4x3/pt.svg);
}

.fi-pt.fis {
  background-image: url(../fonts/flags/1x1/pt.svg);
}

.fi-pw {
  background-image: url(../fonts/flags/4x3/pw.svg);
}

.fi-pw.fis {
  background-image: url(../fonts/flags/1x1/pw.svg);
}

.fi-py {
  background-image: url(../fonts/flags/4x3/py.svg);
}

.fi-py.fis {
  background-image: url(../fonts/flags/1x1/py.svg);
}

.fi-qa {
  background-image: url(../fonts/flags/4x3/qa.svg);
}

.fi-qa.fis {
  background-image: url(../fonts/flags/1x1/qa.svg);
}

.fi-re {
  background-image: url(../fonts/flags/4x3/re.svg);
}

.fi-re.fis {
  background-image: url(../fonts/flags/1x1/re.svg);
}

.fi-ro {
  background-image: url(../fonts/flags/4x3/ro.svg);
}

.fi-ro.fis {
  background-image: url(../fonts/flags/1x1/ro.svg);
}

.fi-rs {
  background-image: url(../fonts/flags/4x3/rs.svg);
}

.fi-rs.fis {
  background-image: url(../fonts/flags/1x1/rs.svg);
}

.fi-ru {
  background-image: url(../fonts/flags/4x3/ru.svg);
}

.fi-ru.fis {
  background-image: url(../fonts/flags/1x1/ru.svg);
}

.fi-rw {
  background-image: url(../fonts/flags/4x3/rw.svg);
}

.fi-rw.fis {
  background-image: url(../fonts/flags/1x1/rw.svg);
}

.fi-sa {
  background-image: url(../fonts/flags/4x3/sa.svg);
}

.fi-sa.fis {
  background-image: url(../fonts/flags/1x1/sa.svg);
}

.fi-sb {
  background-image: url(../fonts/flags/4x3/sb.svg);
}

.fi-sb.fis {
  background-image: url(../fonts/flags/1x1/sb.svg);
}

.fi-sc {
  background-image: url(../fonts/flags/4x3/sc.svg);
}

.fi-sc.fis {
  background-image: url(../fonts/flags/1x1/sc.svg);
}

.fi-sd {
  background-image: url(../fonts/flags/4x3/sd.svg);
}

.fi-sd.fis {
  background-image: url(../fonts/flags/1x1/sd.svg);
}

.fi-se {
  background-image: url(../fonts/flags/4x3/se.svg);
}

.fi-se.fis {
  background-image: url(../fonts/flags/1x1/se.svg);
}

.fi-sg {
  background-image: url(../fonts/flags/4x3/sg.svg);
}

.fi-sg.fis {
  background-image: url(../fonts/flags/1x1/sg.svg);
}

.fi-sh {
  background-image: url(../fonts/flags/4x3/sh.svg);
}

.fi-sh.fis {
  background-image: url(../fonts/flags/1x1/sh.svg);
}

.fi-si {
  background-image: url(../fonts/flags/4x3/si.svg);
}

.fi-si.fis {
  background-image: url(../fonts/flags/1x1/si.svg);
}

.fi-sj {
  background-image: url(../fonts/flags/4x3/sj.svg);
}

.fi-sj.fis {
  background-image: url(../fonts/flags/1x1/sj.svg);
}

.fi-sk {
  background-image: url(../fonts/flags/4x3/sk.svg);
}

.fi-sk.fis {
  background-image: url(../fonts/flags/1x1/sk.svg);
}

.fi-sl {
  background-image: url(../fonts/flags/4x3/sl.svg);
}

.fi-sl.fis {
  background-image: url(../fonts/flags/1x1/sl.svg);
}

.fi-sm {
  background-image: url(../fonts/flags/4x3/sm.svg);
}

.fi-sm.fis {
  background-image: url(../fonts/flags/1x1/sm.svg);
}

.fi-sn {
  background-image: url(../fonts/flags/4x3/sn.svg);
}

.fi-sn.fis {
  background-image: url(../fonts/flags/1x1/sn.svg);
}

.fi-so {
  background-image: url(../fonts/flags/4x3/so.svg);
}

.fi-so.fis {
  background-image: url(../fonts/flags/1x1/so.svg);
}

.fi-sr {
  background-image: url(../fonts/flags/4x3/sr.svg);
}

.fi-sr.fis {
  background-image: url(../fonts/flags/1x1/sr.svg);
}

.fi-ss {
  background-image: url(../fonts/flags/4x3/ss.svg);
}

.fi-ss.fis {
  background-image: url(../fonts/flags/1x1/ss.svg);
}

.fi-st {
  background-image: url(../fonts/flags/4x3/st.svg);
}

.fi-st.fis {
  background-image: url(../fonts/flags/1x1/st.svg);
}

.fi-sv {
  background-image: url(../fonts/flags/4x3/sv.svg);
}

.fi-sv.fis {
  background-image: url(../fonts/flags/1x1/sv.svg);
}

.fi-sx {
  background-image: url(../fonts/flags/4x3/sx.svg);
}

.fi-sx.fis {
  background-image: url(../fonts/flags/1x1/sx.svg);
}

.fi-sy {
  background-image: url(../fonts/flags/4x3/sy.svg);
}

.fi-sy.fis {
  background-image: url(../fonts/flags/1x1/sy.svg);
}

.fi-sz {
  background-image: url(../fonts/flags/4x3/sz.svg);
}

.fi-sz.fis {
  background-image: url(../fonts/flags/1x1/sz.svg);
}

.fi-tc {
  background-image: url(../fonts/flags/4x3/tc.svg);
}

.fi-tc.fis {
  background-image: url(../fonts/flags/1x1/tc.svg);
}

.fi-td {
  background-image: url(../fonts/flags/4x3/td.svg);
}

.fi-td.fis {
  background-image: url(../fonts/flags/1x1/td.svg);
}

.fi-tf {
  background-image: url(../fonts/flags/4x3/tf.svg);
}

.fi-tf.fis {
  background-image: url(../fonts/flags/1x1/tf.svg);
}

.fi-tg {
  background-image: url(../fonts/flags/4x3/tg.svg);
}

.fi-tg.fis {
  background-image: url(../fonts/flags/1x1/tg.svg);
}

.fi-th {
  background-image: url(../fonts/flags/4x3/th.svg);
}

.fi-th.fis {
  background-image: url(../fonts/flags/1x1/th.svg);
}

.fi-tj {
  background-image: url(../fonts/flags/4x3/tj.svg);
}

.fi-tj.fis {
  background-image: url(../fonts/flags/1x1/tj.svg);
}

.fi-tk {
  background-image: url(../fonts/flags/4x3/tk.svg);
}

.fi-tk.fis {
  background-image: url(../fonts/flags/1x1/tk.svg);
}

.fi-tl {
  background-image: url(../fonts/flags/4x3/tl.svg);
}

.fi-tl.fis {
  background-image: url(../fonts/flags/1x1/tl.svg);
}

.fi-tm {
  background-image: url(../fonts/flags/4x3/tm.svg);
}

.fi-tm.fis {
  background-image: url(../fonts/flags/1x1/tm.svg);
}

.fi-tn {
  background-image: url(../fonts/flags/4x3/tn.svg);
}

.fi-tn.fis {
  background-image: url(../fonts/flags/1x1/tn.svg);
}

.fi-to {
  background-image: url(../fonts/flags/4x3/to.svg);
}

.fi-to.fis {
  background-image: url(../fonts/flags/1x1/to.svg);
}

.fi-tr {
  background-image: url(../fonts/flags/4x3/tr.svg);
}

.fi-tr.fis {
  background-image: url(../fonts/flags/1x1/tr.svg);
}

.fi-tt {
  background-image: url(../fonts/flags/4x3/tt.svg);
}

.fi-tt.fis {
  background-image: url(../fonts/flags/1x1/tt.svg);
}

.fi-tv {
  background-image: url(../fonts/flags/4x3/tv.svg);
}

.fi-tv.fis {
  background-image: url(../fonts/flags/1x1/tv.svg);
}

.fi-tw {
  background-image: url(../fonts/flags/4x3/tw.svg);
}

.fi-tw.fis {
  background-image: url(../fonts/flags/1x1/tw.svg);
}

.fi-tz {
  background-image: url(../fonts/flags/4x3/tz.svg);
}

.fi-tz.fis {
  background-image: url(../fonts/flags/1x1/tz.svg);
}

.fi-ua {
  background-image: url(../fonts/flags/4x3/ua.svg);
}

.fi-ua.fis {
  background-image: url(../fonts/flags/1x1/ua.svg);
}

.fi-ug {
  background-image: url(../fonts/flags/4x3/ug.svg);
}

.fi-ug.fis {
  background-image: url(../fonts/flags/1x1/ug.svg);
}

.fi-um {
  background-image: url(../fonts/flags/4x3/um.svg);
}

.fi-um.fis {
  background-image: url(../fonts/flags/1x1/um.svg);
}

.fi-us {
  background-image: url(../fonts/flags/4x3/us.svg);
}

.fi-us.fis {
  background-image: url(../fonts/flags/1x1/us.svg);
}

.fi-uy {
  background-image: url(../fonts/flags/4x3/uy.svg);
}

.fi-uy.fis {
  background-image: url(../fonts/flags/1x1/uy.svg);
}

.fi-uz {
  background-image: url(../fonts/flags/4x3/uz.svg);
}

.fi-uz.fis {
  background-image: url(../fonts/flags/1x1/uz.svg);
}

.fi-va {
  background-image: url(../fonts/flags/4x3/va.svg);
}

.fi-va.fis {
  background-image: url(../fonts/flags/1x1/va.svg);
}

.fi-vc {
  background-image: url(../fonts/flags/4x3/vc.svg);
}

.fi-vc.fis {
  background-image: url(../fonts/flags/1x1/vc.svg);
}

.fi-ve {
  background-image: url(../fonts/flags/4x3/ve.svg);
}

.fi-ve.fis {
  background-image: url(../fonts/flags/1x1/ve.svg);
}

.fi-vg {
  background-image: url(../fonts/flags/4x3/vg.svg);
}

.fi-vg.fis {
  background-image: url(../fonts/flags/1x1/vg.svg);
}

.fi-vi {
  background-image: url(../fonts/flags/4x3/vi.svg);
}

.fi-vi.fis {
  background-image: url(../fonts/flags/1x1/vi.svg);
}

.fi-vn {
  background-image: url(../fonts/flags/4x3/vn.svg);
}

.fi-vn.fis {
  background-image: url(../fonts/flags/1x1/vn.svg);
}

.fi-vu {
  background-image: url(../fonts/flags/4x3/vu.svg);
}

.fi-vu.fis {
  background-image: url(../fonts/flags/1x1/vu.svg);
}

.fi-wf {
  background-image: url(../fonts/flags/4x3/wf.svg);
}

.fi-wf.fis {
  background-image: url(../fonts/flags/1x1/wf.svg);
}

.fi-ws {
  background-image: url(../fonts/flags/4x3/ws.svg);
}

.fi-ws.fis {
  background-image: url(../fonts/flags/1x1/ws.svg);
}

.fi-ye {
  background-image: url(../fonts/flags/4x3/ye.svg);
}

.fi-ye.fis {
  background-image: url(../fonts/flags/1x1/ye.svg);
}

.fi-yt {
  background-image: url(../fonts/flags/4x3/yt.svg);
}

.fi-yt.fis {
  background-image: url(../fonts/flags/1x1/yt.svg);
}

.fi-za {
  background-image: url(../fonts/flags/4x3/za.svg);
}

.fi-za.fis {
  background-image: url(../fonts/flags/1x1/za.svg);
}

.fi-zm {
  background-image: url(../fonts/flags/4x3/zm.svg);
}

.fi-zm.fis {
  background-image: url(../fonts/flags/1x1/zm.svg);
}

.fi-zw {
  background-image: url(../fonts/flags/4x3/zw.svg);
}

.fi-zw.fis {
  background-image: url(../fonts/flags/1x1/zw.svg);
}

.fi-arab {
  background-image: url(../fonts/flags/4x3/arab.svg);
}

.fi-arab.fis {
  background-image: url(../fonts/flags/1x1/arab.svg);
}

.fi-cefta {
  background-image: url(../fonts/flags/4x3/cefta.svg);
}

.fi-cefta.fis {
  background-image: url(../fonts/flags/1x1/cefta.svg);
}

.fi-cp {
  background-image: url(../fonts/flags/4x3/cp.svg);
}

.fi-cp.fis {
  background-image: url(../fonts/flags/1x1/cp.svg);
}

.fi-dg {
  background-image: url(../fonts/flags/4x3/dg.svg);
}

.fi-dg.fis {
  background-image: url(../fonts/flags/1x1/dg.svg);
}

.fi-eac {
  background-image: url(../fonts/flags/4x3/eac.svg);
}

.fi-eac.fis {
  background-image: url(../fonts/flags/1x1/eac.svg);
}

.fi-es-ct {
  background-image: url(../fonts/flags/4x3/es-ct.svg);
}

.fi-es-ct.fis {
  background-image: url(../fonts/flags/1x1/es-ct.svg);
}

.fi-es-ga {
  background-image: url(../fonts/flags/4x3/es-ga.svg);
}

.fi-es-ga.fis {
  background-image: url(../fonts/flags/1x1/es-ga.svg);
}

.fi-es-pv {
  background-image: url(../fonts/flags/4x3/es-pv.svg);
}

.fi-es-pv.fis {
  background-image: url(../fonts/flags/1x1/es-pv.svg);
}

.fi-eu {
  background-image: url(../fonts/flags/4x3/eu.svg);
}

.fi-eu.fis {
  background-image: url(../fonts/flags/1x1/eu.svg);
}

.fi-gb-eng {
  background-image: url(../fonts/flags/4x3/gb-eng.svg);
}

.fi-gb-eng.fis {
  background-image: url(../fonts/flags/1x1/gb-eng.svg);
}

.fi-gb-nir {
  background-image: url(../fonts/flags/4x3/gb-nir.svg);
}

.fi-gb-nir.fis {
  background-image: url(../fonts/flags/1x1/gb-nir.svg);
}

.fi-gb-sct {
  background-image: url(../fonts/flags/4x3/gb-sct.svg);
}

.fi-gb-sct.fis {
  background-image: url(../fonts/flags/1x1/gb-sct.svg);
}

.fi-gb-wls {
  background-image: url(../fonts/flags/4x3/gb-wls.svg);
}

.fi-gb-wls.fis {
  background-image: url(../fonts/flags/1x1/gb-wls.svg);
}

.fi-ic {
  background-image: url(../fonts/flags/4x3/ic.svg);
}

.fi-ic.fis {
  background-image: url(../fonts/flags/1x1/ic.svg);
}

.fi-pc {
  background-image: url(../fonts/flags/4x3/pc.svg);
}

.fi-pc.fis {
  background-image: url(../fonts/flags/1x1/pc.svg);
}

.fi-sh-ac {
  background-image: url(../fonts/flags/4x3/sh-ac.svg);
}

.fi-sh-ac.fis {
  background-image: url(../fonts/flags/1x1/sh-ac.svg);
}

.fi-sh-hl {
  background-image: url(../fonts/flags/4x3/sh-hl.svg);
}

.fi-sh-hl.fis {
  background-image: url(../fonts/flags/1x1/sh-hl.svg);
}

.fi-sh-ta {
  background-image: url(../fonts/flags/4x3/sh-ta.svg);
}

.fi-sh-ta.fis {
  background-image: url(../fonts/flags/1x1/sh-ta.svg);
}

.fi-un {
  background-image: url(../fonts/flags/4x3/un.svg);
}

.fi-un.fis {
  background-image: url(../fonts/flags/1x1/un.svg);
}

.fi-xk {
  background-image: url(../fonts/flags/4x3/xk.svg);
}

.fi-xk.fis {
  background-image: url(../fonts/flags/1x1/xk.svg);
}

.modal-background {
  background-color: #000;
  display: none;
  height: 100%;
  position: fixed;
  opacity: 0.5;
  width: 100%;
  top: 0;
  left: 0;
}

input[placeholder] {
  text-overflow: ellipsis;
  color: #000;
  font-size: 12px;
}

.form-control::-webkit-input-placeholder {
  color: #000;
  font-size: 12px;
}

.form-control::-moz-placeholder {
  color: #000;
  font-size: 12px;
}

.form-control:-ms-input-placeholder {
  color: #000;
  font-size: 12px;
}

.form-control::-ms-input-placeholder {
  color: #000;
  font-size: 12px;
}

.form-control::placeholder {
  color: #000;
  font-size: 12px;
}

header~#maincontent .container a:not(.btn-primary, .btn-outline-primary) {
  color: var(--skin-link-color-2);
}

.hide-order-discount {
  display: none;
}

.hide-shipping-discount {
  display: none;
}

.order-discount {
  color: #008827;
}

.shipping-discount {
  color: #008827;
}

.error-messaging {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.error-hero {
  background-image: url("../images/storelocator.jpg");
  margin-bottom: 0.625em;
}

.error-message {
  margin-top: 3.125rem;
  margin-bottom: 3.125rem;
}

.error.continue-shopping {
  margin-bottom: 6.25em;
}

.error-unassigned-category {
  color: #c00;
}

.skip {
  position: absolute;
  left: 0;
  top: -4.2em;
  overflow: hidden;
  padding: 1em 1.5em;
  background: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.card-header-custom {
  font-size: 1.5rem;
  margin-bottom: 0;
}

/* stylelint-disable scss/no-global-function-names */
@media (max-width: 543.98px) {
  .menu-toggleable-left.navbar-toggleable-xs {
    position: fixed;
    left: -103%;
    top: 0;
    bottom: 0;
    -webkit-transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    display: block;
    max-width: 100%;
    margin-top: 30%;
  }

  .menu-toggleable-left.navbar-toggleable-xs.in {
    min-width: 100%;
    left: 0;
    margin-top: 14%;
    height: auto;
  }
}

@media (max-width: 1024px) {
  .menu-toggleable-left.navbar-toggleable-sm {
    position: fixed;
    left: -103%;
    top: 6.8rem;
    bottom: 0;
    height: 100%;
    -webkit-transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    display: block;
    max-width: 100%;
    margin-top: 30%;
  }

  /* LNB 패널 top: 배너 숨김 6.8rem / 노출 9.8rem */
  .header.header-banner-hide .menu-toggleable-left.navbar-toggleable-sm {
    top: 6.8rem;
  }
  .header.header-banner-show .menu-toggleable-left.navbar-toggleable-sm {
    top: 9.8rem;
  }

  .menu-toggleable-left.navbar-toggleable-sm.in {
    min-width: 100%;
    left: 0;
    height: auto;
    background-color: #fff;
  }
}

@media (max-width: 991.98px) {
  .menu-toggleable-left.navbar-toggleable-md {
    position: fixed;
    left: -103%;
    top: 0;
    bottom: 0;
    -webkit-transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    display: block;
    max-width: 100%;
    margin-top: 30%;
  }

  .menu-toggleable-left.navbar-toggleable-md.in {
    min-width: 100%;
    left: 0;
    margin-top: 14%;
    height: auto;
  }
}

@media (max-width: 1199.98px) {
  .menu-toggleable-left.navbar-toggleable-lg {
    position: fixed;
    left: -103%;
    top: 0;
    bottom: 0;
    -webkit-transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
    display: block;
    max-width: 100%;
    margin-top: 30%;
  }

  .menu-toggleable-left.navbar-toggleable-lg.in {
    min-width: 100%;
    left: 0;
    margin-top: 14%;
    height: auto;
  }
}

.menu-toggleable-left.navbar-toggleable-xl {
  position: fixed;
  left: -103%;
  top: 0;
  bottom: 0;
  -webkit-transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
  transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
  display: block;
  max-width: 100%;
  margin-top: 30%;
}

.menu-toggleable-left.navbar-toggleable-xl.in {
  min-width: 100%;
  left: 0;
  margin-top: 14%;
  height: auto;
}

@media (max-width: 1024px) {
  .main-menu.menu-toggleable-left {
    background-color: #fff;
    z-index: 4;
  }
}

.menu-toggleable-left .close-menu {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}

@media (min-width: 769px) {
  .menu-toggleable-left .close-menu {
    display: none;
  }
}

.menu-toggleable-left .menu-group {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}

.menu-toggleable-left li>.close-menu {
  margin-right: 0;
  margin-top: -0.6rem;
  margin-left: 0;
}

@media (max-width: 1024px) {
  .menu-toggleable-left .bg-inverse {
    background-color: white !important;
    color: #222;
  }
}

@media (max-width: 543.98px) {
  .menu-toggleable-left.in {
    right: 0;
    margin-right: 1.25em;
  }
}

@media (max-width: 1024px) {
  .menu-toggleable-left.in .dropdown {
    display: block;
    position: static;
  }

  .menu-toggleable-left.in .dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
    position: absolute;
    margin-top: 0.39em;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-left: 7px;
  }

  .menu-toggleable-left.in .show>.dropdown-menu {
    left: 0;
  }
}

.multilevel-dropdown .dropdown-menu {
  top: 90%;
  border: 0;
  border-radius: 0;
}

@media (min-width: 769px) {
  .multilevel-dropdown .dropdown-menu {
    -webkit-box-shadow: 0 3px 5px rgba(43, 36, 25, 0.4);
    box-shadow: 0 3px 5px rgba(43, 36, 25, 0.4);
  }
}

.multilevel-dropdown .dropdown-item.dropdown>.dropdown-toggle::after {
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  position: absolute;
  margin-top: 0.39em;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-left: 7px;
}

@media (min-width: 769px) {
  .multilevel-dropdown .dropdown-menu>.dropdown>.dropdown-menu {
    top: -0.65em;
    left: 99%;
  }
}

.multilevel-dropdown .close-menu .back .caret-left {
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-left: 0.3 solid transparent;
  width: 0;
  height: 0;
  display: inline-block;
  margin-bottom: 0.125em;
}

.multilevel-dropdown .navbar>.close-menu>.back {
  display: none;
}

.multilevel-dropdown .dropdown-item {
  padding: 0 0 0 1em;
}

.multilevel-dropdown .dropdown-item .dropdown-link {
  display: block;
  padding: 0.425em 5em 0.425em 0;
}

.multilevel-dropdown .dropdown-item+.dropdown-item {
  border-top: 1px solid #eee;
}

.multilevel-dropdown .dropdown-item.top-category {
  font-weight: bold;
}

.multilevel-dropdown .dropdown-item.top-category>.nav-link {
  padding-left: 0;
}

.main-menu {
  padding: 0 0;
  margin-top: 0 !important;
}

@media (max-width: 1024px) {
  .main-menu {
    padding: 0 0;
  }
}

.main-menu {
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: var(--header-height);
  padding: 0 25px;
  background: #fff;
}

.main-menu .navbar .close-menu button,
.main-menu .navbar .close-button button {
  background-color: transparent;
  border: 0;
}

.menu-left,
.menu-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.menu-right>div {
  margin-left: 15px;
}

.menu-right>div {
  margin-left: 0 !important;
}

@media only screen and (max-width: 1024px) {
  /* 모바일 LNB 좌우 패딩 0 */
  .main-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    z-index: 9;
    background: #fff;
    position: relative;
    width: 100%;
    padding: 0;
  }
}

* {
  margin: 0;
  padding: 0;
}

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
button,
p,
a,
blockquote,
th,
td,
select {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: #000;
}

body {
  font-weight: 400;
  color: #000;
  background: #fff;
  font-size: 12px;
}

.form-control {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.page {
  max-width: 100%;
}

.minicart-link {
  position: relative;
}

.minicart_value {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 18px;
  text-align: center;
  margin-top: 4px;
}

/* navbar left after click */
/* 100dvh로 iOS 주소창 표시 시에도 하단까지 채움(vh 폴백) */
.sliding-left-navbar {
  position: fixed;
  top: 0;
  left: -448px;
  height: 100vh;
  height: 100dvh;
  width: 448px;
  background: #f5f5f5;
  border-right: 1px solid #f5f5f5;
  -webkit-transition: left 0.8s ease-in-out;
  transition: left 0.8s ease-in-out;
  z-index: 99999;
  color: #313131;
  overflow-y: auto;
}

.sliding-left-navbar.open {
  left: 0;
}

.content-top {
  cursor: pointer;
}

.lm-banner-detail-close {
  padding: 12px 12px 0 0;
  text-align: right;
  border: 0;
  background: none;
  border-radius: 0;
  cursor: pointer;
  color: #000;
}

.navbar_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.sliding-left-navbar h1 {
  font-size: 14px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.sliding-left-navbar .wrap-navabr {
  padding-top: 10px;
  padding-left: 32px;
  padding-right: 32px;
  line-height: 1.5;
}

.sliding-left-navbar p {
  font-size: 12px;
  padding-bottom: 5px;
}

.content.banner-xy {
  cursor: pointer;
}

.minicart {
  margin-top: 0.1875em;
  vertical-align: top;
}

.minicart .minicart-icon {
  font-size: 1.5em;
}

.minicart a.minicart-link:hover {
  text-decoration: none;
}

.navbar-header {
  height: 4.375em;
}

.navbar-header .user,
.navbar-header .country-selector,
.navbar-header .search,
.navbar-header .minicart {
  display: inline-block;
  margin: 1.125em 0 0 0.5em;
}

.navbar-header .user,
.navbar-header .country-selector,
.navbar-header .minicart,
.navbar-header .navbar-toggler {
  line-height: 2.25em;
  height: auto;
}

.navbar-header .navbar-toggler {
  font-size: 1.6em;
  width: auto;
}

.navbar-header .user {
  position: relative;
}

.navbar-header .user .popover {
  position: absolute;
  display: none;
  padding: 1em;
  top: 85%;
  left: 0;
}

.navbar-header .user .popover a {
  white-space: nowrap;
  margin-bottom: 0.5em;
}

.navbar-header .user .popover::before {
  left: 1.5rem;
}

.navbar-header .user .popover::after {
  left: 1.5rem;
}

.navbar-header .user .popover.show {
  display: block;
}

.brand {
  position: absolute;
  left: 49%;
  display: block;
  text-align: center;
}

.brand img {
  width: 100%;
}

@media (min-width: 992px) {
  .brand {
    width: 14.125em;
    margin-left: -7.0625em;
    padding-top: 0.5em;
  }
}

@media (max-width: 991.98px) {
  .brand {
    width: 4em;
    margin-left: -2em;
    padding-top: 0.8em;
  }
}

.close-button {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
}

@media (max-width: 543.98px) {
  .close-button {
    right: 16px;
  }
}

.content-top {
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  font-size: 12px;
  color: #000;
}

.header-banner {
  background-color: #fafafa;
  text-align: center;
  color: #fff;
}

.header-banner .close-button .close {
  opacity: 1;
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: var(--skin-primary-color-1);
}

.header-banner .header-bar {
  background-color: #eee;
  border-bottom: 0.063em solid #eee;
}

.header-banner .header-bar button.close {
  font-size: 1rem;
  font-weight: normal;
  opacity: 1;
}

.header-banner .header-bar .fa.fa-close::before {
  font-size: 1.25em;
}

@media (min-width: 544px) and (max-width: 1024px) {
  .header-banner .header-bar {
    padding: 0.938em 2.813em;
  }
}

@media (max-width: 543.98px) {
  .header-banner .header-bar {
    padding: 0.938em;
  }
}

.header-banner .content {
  margin-right: 1.5em;
  padding: 0.3125em 2.083em;
  padding-bottom: 0.3125em;
}

a.normal {
  color: var(--skin-primary-color-1);
  text-decoration: underline;
}

.nav-item a {
  padding-right: 50px;
}

.nav-link {
  color: #000 !important;
}

.brand {
  top: -31%;
  width: auto !important;
  margin: 0 !important;
}

.navbar-header {
  height: 5em !important;
}

.hero {
  height: 70vw !important;
}

.minicart {
  margin-top: 0 !important;
}

.close {
  line-height: 0;
}

.navbar-nav {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-item a {
  color: #000 !important;
  display: block;
  border-radius: 5px;
  padding: 0 5px 0 5px;
  line-height: 30px;
  letter-spacing: 0.015em;
  line-height: 16px;
}

.header-banner {
  background-color: #fff;
  width: 100%;
  height: 30px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  color: #fff;
  font-size: 14px;
}

/* 배너 content absolute top:0 고정(30px overflow:hidden 스트립), 우측 패딩으로 닫기 X 회피 / translateY(-50%) 중앙정렬 해제 — top:0 상단정렬 */
.header-banner .content {
  position: absolute;
  top: 0;
  transform: none;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 30px;
  padding: 8px 50px 0 25px;
  text-align: left;
  font-size: 12px;
  color: #000;
}

/* 배너 텍스트: 한 줄 표시 + 길면 말줄임(...) */
.header-banner .content .header-promotion,
.header-banner .content .header-promotion-sec {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Message Bar marquee: 영역 초과 시 우→좌 무한 루프(28px/s, 간격 40px, 2벌 seamless), reduced-motion은 정적 */
.header-banner .content .is-marquee {
  text-overflow: clip;
}

.header-banner .content .hp-marquee__track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  -webkit-animation: hp-marquee linear infinite;
  animation: hp-marquee linear infinite;
}

.header-banner .content .hp-marquee__item {
  display: inline-block;
  margin-right: 40px;
}

@-webkit-keyframes hp-marquee {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes hp-marquee {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .header-banner .content .hp-marquee__track {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: none;
    transform: none;
  }
}
/* 모바일 좌우 패딩은 common.css @media(max-width:64em)에서 관리 */

.header-banner .close-button .close {
  color: #525252 !important;
  background-color: transparent;
}

/* 닫기 X 10×10px (SVG width/height 14 attr 오버라이드) */
.header-banner .close-button .close .close-icon {
  width: 10px;
  height: 10px;
}

/* 헤더 배너: 홈=투명 배경+흰 텍스트/닫기, 서브=흰 배경+검정 */
.page[data-action="Default-Start"] .header-banner,
.page[data-action="Home-Show"] .header-banner {
  background-color: transparent;
}

.page[data-action="Default-Start"] .header-banner .content,
.page[data-action="Default-Start"] .header-banner .content *,
.page[data-action="Home-Show"] .header-banner .content,
.page[data-action="Home-Show"] .header-banner .content * {
  color: #fff;
}

.page[data-action="Default-Start"] .header-banner .close-button .close,
.page[data-action="Home-Show"] .header-banner .close-button .close {
  color: #fff !important;
  background-color: transparent;
}

.close {
  line-height: 0;
}

.slide-up {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  max-height: 100px;
  overflow: hidden;
}

.slide-up.hide {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.dropdown-country-selector {
  margin-top: -0.0625em;
}

.cookie-warning-messaging.cookie-warning {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-align: center;
  display: none;
}

.valid-cookie-warning {
  background-color: var(--skin-link-color-1);
  color: #fff;
  white-space: nowrap;
}

.valid-cookie-warning p {
  margin-top: 0;
  margin-bottom: 0.2em;
  padding-right: 2em;
}

.search-field {
  border: none;
  outline: none;
}

.search-field::-webkit-input-placeholder {
  opacity: 0;
}

.search-field::-moz-placeholder {
  opacity: 0;
}

.search-field:-ms-input-placeholder {
  opacity: 0;
}

.search-field::-ms-input-placeholder {
  opacity: 0;
}

.search-field::placeholder {
  opacity: 0;
}

button.fa.fa-search {
  font-size: 23px;
  top: 4px;
  right: -7px;
  color: #778899;
  font-weight: 100;
}

.content-asset-container {
  padding-top: var(--header-height);
}

.navbar-nav li:last-child {
  padding-right: 0;
}

.header-top-banner {
  width: 100%;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #FAFAFA;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.content {
  color: #000;
}

.header {
  left: 0;
  background-color: #fff;
  z-index: 99999;
  position: fixed;
  top: 30px;
  width: 100%;
}

.h_logo_wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 10;
}

.h_logo {
  -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
  transition: -webkit-transform 0.4s ease-in-out !important;
  transition: transform 0.4s ease-in-out !important;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out !important;
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}

.h_logo:hover {
  -webkit-transform: rotate(180deg) !important;
  transform: rotate(180deg) !important;
}

.logo-home:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.logo-home {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}

.logo-home img {
  width: 40px;
  height: 36px;
}

.header-top-banner.hidden {
  display: none;
}

.header-top-banner.hidden~.header {
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}

.header-top-banner .close-button:checked~.close-button {
  display: none;
}

.only_mobile_header {
  display: none;
  z-index: 99;
}

@media (max-width: 1024px) {
  /* 모바일 내비 패딩 16px 사방 */
  .header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 6.8rem;
    width: 100%;
    padding: 1.6rem;
    box-sizing: border-box;
  }

  .only_mobile_header {
    display: block;
  }

  .h_logo_wrap_mob {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.flex_wrap_Ul {
  display: flex;
  align-items: center;
  justify-content: right;
  column-gap: 15px;
}

@media (max-width: 1024px) {
  .navbar-toggler {
    padding: 0 !important;
    text-align: left;
  }
}

.navbar-toggler-mob {
  font-size: 1.6em;
  width: auto;
  line-height: 2.25em;
  height: auto;
  padding: 0 !important;
  text-align: left;
  border: 0;
  background: transparent;
}

@media (max-width: 1024px) {
  .nav-item {
    position: relative;
    padding-bottom: 30px;
    list-style: none;
    font-size: 18px;
  }
}

@media (max-width: 543.98px) {
  .nav-item {
    width: 100%;
    position: relative;
    padding-bottom: 30px;
    list-style: none;
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  .nav-item a {
    font-size: 18px !important;
  }

  .navbar-nav {
    padding-left: 20px;
    padding-top: 180px;
  }
}

.navbar-toggler-wrap {
  position: absolute;
  left: 0;
  padding: 15px 16px;
}

.navbar-toggler {
  position: relative;
  width: 18px;
  left: 0;
  top: 50%;
  background: none;
  transform: translateY(-50%);
  transform-origin: center center;
}

.navbar-toggler span {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform-origin: center center;
  transition: all 0.5s ease;
}

.navbar-toggler span {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform-origin: center center;
  transition: all 0.5s ease;
}

.navbar-toggler span:nth-child(1) {
  top: -5px;
  right: 0;
}

.navbar-toggler span:nth-child(2) {
  top: 1px;
  right: 0;
}

.navbar-toggler span:nth-child(3) {
  bottom: -8px;
  right: 0;
}

.navbar-toggler.open {
  height: 1px;
  transition: all 0.5s ease;
}

.navbar-toggler.open span:nth-child(1) {
  width: 20px;
  top: -2px;
  transform: rotate(45deg);
  transition: all 0.5s ease;
}

.navbar-toggler.open span:nth-child(2) {
  width: 20px;
  top: 0;
  opacity: 0;
  transition: all 0.5s ease;
}

.navbar-toggler.open span:nth-child(3) {
  width: 20px;
  bottom: 1px;
  transform: rotate(-45deg);
  transition: all 0.5s ease;
}

/* Menu and modal background transitions */
.modal-background {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  display: none;
  opacity: 0;
}

.modal-background.in {
  display: block;
  opacity: 1;
}

@media (max-width: 1024px) {
  /* LNB 패널 자체 스크롤(viewport max-height 기준). top: 배너 없음 6.8rem / 있음 9.8rem / iOS Safari 내부 터치 스크롤 활성화 + body 스크롤 체이닝 차단 */
  .nav-section-mob {
    padding-top: 3rem;
    padding-left: 1.6rem;
    padding-bottom: 4rem;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* svh로 주소창 표시 시 실제 보이는 높이 기준(vh 폴백) */
  body.h-banner-hide .nav-section-mob {
    max-height: calc(100vh - 6.8rem);
    max-height: calc(100svh - 6.8rem);
  }

  body.h-banner-show .nav-section-mob {
    max-height: calc(100vh - 9.8rem);
    max-height: calc(100svh - 9.8rem);
  }

  /* 모바일 메뉴 블록 간격 40px */
  .flex_wrap-mobile-sec {
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
  }

  .flex_wrap-mobile-sec li {
    padding-bottom: 0;
  }

  .M_login_menu_button,
  a.m_search_menu_button {
    display: block;
  }
}

.flex_wrap_right {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 25px;
}

.flex_wrap_right li {
  list-style: none;
}

.flex_wrap>li>a {
  display: block;
}

.flex_wrap-mobile-sec li {
  position: relative;
}

.flex_wrap-mobile-sec li>a {
  font-size: 16px;
}

.flex_wrap {
  display: flex;
  align-items: center;
  column-gap: 60px;
}

/* [MOD-header 02] 데스크탑(≥1025px) 헤더: 로고 좌측 상단(호버 회전), 상단 바=로고+아이콘, 헤더 호버 시 GNB 풀폭 흰 패널 드롭다운 */
@media (min-width: 1025px) {
  .h_logo_wrap {
    left: 25px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  /* 로고 호버 회전 0.4s */
  .h_logo,
  .logo-home {
    -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
    transition: -webkit-transform 0.4s ease-in-out !important;
    transition: transform 0.4s ease-in-out !important;
    transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out !important;
  }

  /* 아이콘 우측 고정 */
  .menu-right {
    margin-left: auto;
  }

  /* 데스크탑 우측 유틸 라벨 숨김(아이콘만 노출) */
  .menu-right .m_util_label {
    display: none;
  }

  /* GNB: 기본 숨김 → 헤더 호버 시 풀폭 흰색 패널로 드롭다운 */
  /* 펼침 여백: 상단 30px / 하단 40px / 좌우 25px / translateY 슬라이드 없이 opacity 페이드만 — 상단 흰색 2겹 겹침 띠 방지 / 닫힘 지연 없음(열림 지연은 :hover 규칙) */
  .menu-left {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 30px 25px 40px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 8;
  }

  /* 헤더 호버 또는 패널 자체 호버 시 열림 유지(패널 위 마우스 동안 닫히지 않음) */
  /* 호버 인텐트: 상단바에 0.05s 머물러야 펼침(아래 3depth 탭 통과 시 미열림) */
  .header:hover .menu-left,
  .menu-left:hover {
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }

  /* 패널 내부: 1depth=컬럼 헤더, 2depth(.sub-menu)=세로 목록 */
  /* GNB 컬럼 간격 10px */
  .menu-left .flex_wrap {
    align-items: flex-start;
    -webkit-column-gap: 10px;
    column-gap: 10px;
  }

  /* GNB 컬럼 min 180px~max 200px(flex+min-width로 180px 보장) */
  .menu-left .flex_wrap > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 180px;
    max-width: 200px;
  }

  /* 1depth 컬럼 헤더: opacity 0.4 */
  .menu-left .flex_wrap > li > a {
    color: #000;
    opacity: 0.4;
    margin-bottom: 30px;
  }

  /* 1depth(하위 있음): 클릭 비활성 — 단독 1depth는 링크 유지 */
  .menu-left .flex_wrap > li.has-sub-menu > a {
    pointer-events: none;
  }

  /* 1depth 단독(하위 없음): opacity 1 */
  .menu-left .flex_wrap > li:not(.has-sub-menu) > a {
    color: #000;
    opacity: 1;
  }

  /* 2depth 목록 */
  .menu-left .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
  }

  .menu-left .sub-menu > li {
    padding: 0;
  }

  /* 2depth 항목: 검정 */
  .menu-left .sub-menu > li > a {
    display: block;
    color: #000;
    font-size: 12px;
  }

  /* 메가메뉴 링크 hover: opacity 0.8 + underline 제거 */
  .menu-left .flex_wrap > li > a:hover,
  .menu-left .sub-menu > li > a:hover {
    opacity: 0.8;
    text-decoration: none;
  }

  /* 헤더 배경: 메인(Home-Show/Default-Start)은 기본 투명→호버 시 흰색 / 서브는 항상 흰색 */
  /* 닫힘 즉시(열림 지연 0.05s는 :hover 규칙) */
  .page[data-action="Home-Show"] .header,
  .page[data-action="Default-Start"] .header,
  .page[data-action="Home-Show"] .main-menu,
  .page[data-action="Default-Start"] .main-menu {
    background: transparent;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  /* 흰 배경은 .header에만 적용 — .main-menu는 투명 유지(2겹 겹침 방지) */
  .page[data-action="Home-Show"] .header:hover,
  .page[data-action="Default-Start"] .header:hover {
    background: #fff;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }

  /* 상단바 호버 시 이벤트바 배너도 흰 배경(:has()로 .page에서 분기) */
  .page[data-action="Home-Show"] .header-banner,
  .page[data-action="Default-Start"] .header-banner {
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  .page[data-action="Home-Show"] .header-banner .content,
  .page[data-action="Home-Show"] .header-banner .content *,
  .page[data-action="Home-Show"] .header-banner .close-button .close,
  .page[data-action="Default-Start"] .header-banner .content,
  .page[data-action="Default-Start"] .header-banner .content *,
  .page[data-action="Default-Start"] .header-banner .close-button .close {
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  .page[data-action="Home-Show"]:has(.header:hover) .header-banner,
  .page[data-action="Default-Start"]:has(.header:hover) .header-banner {
    background-color: #fff;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }

  /* 흰 배경 위 → 배너 텍스트/닫기 검정 (메인 기본은 흰 글자라 반전) */
  .page[data-action="Home-Show"]:has(.header:hover) .header-banner .content,
  .page[data-action="Home-Show"]:has(.header:hover) .header-banner .content *,
  .page[data-action="Default-Start"]:has(.header:hover) .header-banner .content,
  .page[data-action="Default-Start"]:has(.header:hover) .header-banner .content * {
    color: #000;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }

  .page[data-action="Home-Show"]:has(.header:hover) .header-banner .close-button .close,
  .page[data-action="Default-Start"]:has(.header:hover) .header-banner .close-button .close {
    color: #525252 !important;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }

  /* 메인 로고: 투명 헤더 흰색 → 헤더 호버 시 검정(img라 filter) */
  .page[data-action="Home-Show"] .logo-home img,
  .page[data-action="Default-Start"] .logo-home img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    -webkit-transition: -webkit-filter 0.2s ease;
    transition: filter 0.2s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  /* 배경 fill과 동일한 0.05s 지연 */
  .page[data-action="Home-Show"] .header:hover .logo-home img,
  .page[data-action="Default-Start"] .header:hover .logo-home img {
    -webkit-filter: none;
    filter: none;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }

  /* 우측 아이콘: 메인 기본 흰색 → 헤더 호버 시 원래 색(img라 filter) */
  .page[data-action="Home-Show"] .menu-right .flex_wrap_right img,
  .page[data-action="Default-Start"] .menu-right .flex_wrap_right img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    -webkit-transition: -webkit-filter 0.2s ease;
    transition: filter 0.2s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  .page[data-action="Home-Show"] .header:hover .menu-right .flex_wrap_right img,
  .page[data-action="Default-Start"] .header:hover .menu-right .flex_wrap_right img {
    -webkit-filter: none;
    filter: none;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }

  /* 장바구니 수량 텍스트: 흰색 → 헤더 호버 시 검정 */
  .page[data-action="Home-Show"] .menu-right .minicart_value,
  .page[data-action="Default-Start"] .menu-right .minicart_value {
    color: #fff;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  .page[data-action="Home-Show"] .header:hover .menu-right .minicart_value,
  .page[data-action="Default-Start"] .header:hover .menu-right .minicart_value {
    color: #000;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }
}

/* [MOD-header 03] LNB 노출: 패널 전체 opacity fade in/out */

/* [MOD-header 03] 모바일(≤1024px) 헤더: 기본 바=로고+카트, LNB 열림=X+유틸+2depth, 검색 오버레이 */
@media (max-width: 1024px) {
  /* --- 2depth (LNB 메뉴) --- */
  .nav-section-mob .sub-menu {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 1.5rem;
  }

  .nav-section-mob .sub-menu > li {
    padding: 0;
  }

  /* 1depth(섹션 헤더, 하위 있음): 검정 40% */
  .nav-section-mob .flex_wrap-mobile-sec > li > a {
    color: #000;
    opacity: 0.4;
  }

  /* 1depth(하위 있음): 클릭 비활성 — 단독 1depth는 링크 유지 */
  .nav-section-mob .flex_wrap-mobile-sec > li.has-sub-menu > a {
    pointer-events: none;
  }

  /* 1depth 단독(하위 없음, .has-sub-menu 아님): 검정 불투명 */
  .nav-section-mob .flex_wrap-mobile-sec > li:not(.has-sub-menu) > a {
    color: #000;
    opacity: 1;
  }

  /* 2depth 항목: 검정 (메뉴 링크 16px 통일) */
  .nav-section-mob .sub-menu > li > a {
    display: block;
    color: #000;
    font-size: 1.6rem;
  }

  /* LNB 상단 브랜드 타이틀 */
  .nav-section-mob .lnb-brand-title {
    margin: 0 0 4rem;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #000;
  }

  /* 브랜드 타이틀 → Home 링크: 타이틀 텍스트 스타일 그대로 상속 */
  .nav-section-mob .lnb-brand-title a {
    color: inherit;
    text-decoration: none;
  }

  /* --- 기본 바(LNB 닫힘): 로고 좌 + 카트 우 --- */
  .navbar-toggler-wrap {
    display: none;
  }

  /* 모바일 로고: 가로 센터링(translateX)만 해제 — 수직은 top으로 중앙 */
  .h_logo_wrap_mob {
    left: 1.6rem !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  .h_header_right .m_search_menu_button,
  .h_header_right .M_login_menu_button {
    display: none;
  }

  /* 유틸 라벨: 기본 숨김 (LNB 열림 시에만 노출) */
  .m_util_label {
    display: none;
  }

  /* LNB 패널: 제자리 fade in/out. 닫힘=opacity:0+visibility:hidden, 열림(.in)=opacity:1. visibility는 fade-out 후 숨김(delay 0.3s). */
  #sg-navbar-collapse.menu-toggleable-left.navbar-toggleable-sm {
    left: 0 !important;
    background: transparent !important;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
  }

  #sg-navbar-collapse.menu-toggleable-left.navbar-toggleable-sm::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-transform-origin: top;
    transform-origin: top;
    z-index: -1;
    pointer-events: none;
  }

  /* 열림(.in): 패널 전체 fade in (slide 없음) */
  #sg-navbar-collapse.menu-toggleable-left.navbar-toggleable-sm.in {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.2s ease, visibility 0s linear 0s !important;
    transition: opacity 0.2s ease, visibility 0s linear 0s !important;
  }

  /* [MOD-header] 모바일 LNB 항목 stagger: 상단부터 순차 fade in(delay calc(0.18s+i*0.08s)) */
  .nav-section-mob .lnb-brand-title { --i: 0; }
  .nav-section-mob .flex_wrap-mobile-sec > li:nth-child(1) { --i: 1; }
  .nav-section-mob .flex_wrap-mobile-sec > li:nth-child(2) { --i: 2; }
  .nav-section-mob .flex_wrap-mobile-sec > li:nth-child(3) { --i: 3; }
  .nav-section-mob .flex_wrap-mobile-sec > li:nth-child(4) { --i: 4; }

  .nav-section-mob .lnb-brand-title,
  .nav-section-mob .flex_wrap-mobile-sec > li {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
    -webkit-transition-delay: calc(0.18s + (var(--i, 0) * 0.08s));
    transition-delay: calc(0.18s + (var(--i, 0) * 0.08s));
  }

  #sg-navbar-collapse.menu-toggleable-left.navbar-toggleable-sm.in .nav-section-mob .lnb-brand-title,
  #sg-navbar-collapse.menu-toggleable-left.navbar-toggleable-sm.in .nav-section-mob .flex_wrap-mobile-sec > li {
    opacity: 1;
  }

  /* --- LNB 열림: X(좌) + SEARCH/MYPAGE/CART 라벨(우) --- */
  #sg-navbar-collapse.in ~ .navbar-toggler-wrap {
    display: block;
  }

  /* 닫기(X) 아이콘 30x30: 대각선 X SVG(검색 닫기와 동일), 햄버거 라인 span 숨김 */
  #sg-navbar-collapse.in ~ .navbar-toggler-wrap .navbar-toggler {
    position: relative;
    width: 3rem;
    height: 3rem;
    top: unset;
    transform: unset;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><line x1='0' y1='0' x2='30' y2='30' stroke='%23000' stroke-width='1'/><line x1='30' y1='0' x2='0' y2='30' stroke='%23000' stroke-width='1'/></svg>") no-repeat center / 3rem 3rem;
  }

  #sg-navbar-collapse.in ~ .navbar-toggler-wrap .navbar-toggler span {
    display: none;
  }

  #sg-navbar-collapse.in ~ .h_logo_wrap_mob {
    display: none;
  }

  #sg-navbar-collapse.in ~ .h_header_right .m_search_menu_button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  #sg-navbar-collapse.in ~ .h_header_right .M_login_menu_button {
    display: block;
  }

  #sg-navbar-collapse.in ~ .h_header_right .flex_wrap_Ul {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2.4rem;
  }

  #sg-navbar-collapse.in ~ .h_header_right .m_util_label {
    display: inline-block;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: rgba(0, 0, 0, 0.4);
    vertical-align: middle;
    margin-right: 1rem;
  }

  #sg-navbar-collapse.in ~ .h_header_right .m_search_menu_button,
  #sg-navbar-collapse.in ~ .h_header_right .M_login_menu_button > a,
  #sg-navbar-collapse.in ~ .h_header_right .minicart .minicart-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  /* LNB 카트: 링크 기준(relative)으로 수량 배지를 가방 우단 위 중앙에 앵커 */
  #sg-navbar-collapse.in ~ .h_header_right .minicart-link {
    position: relative;
  }

  #sg-navbar-collapse.in ~ .h_header_right .minicart-link .minicart-quantity {
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    margin-top: 0.2rem !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
  }

  /* 헤더 하단 보더 제거 (모바일) */
  .header,
  .main-menu {
    border-bottom: none;
  }

  /* --- 메인 헤더 투명 오버레이(모바일): 메인=투명(히어로 위), 서브=흰색 --- */
  /* .header(상단 바)만 투명 — .main-menu(LNB 슬라이드 패널)는 흰색 유지 */
  .page[data-action="Home-Show"] .header,
  .page[data-action="Default-Start"] .header {
    background: transparent;
  }

  /* 메인 + LNB/검색 열림: 헤더 바·배너 흰 배경(::before 오버레이), transition 없이 즉시 표시/제거 */
  .page[data-action="Home-Show"] .header::before,
  .page[data-action="Default-Start"] .header::before,
  .page[data-action="Home-Show"] .header-banner::before,
  .page[data-action="Default-Start"] .header-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    z-index: -1;
    pointer-events: none;
  }

  .page[data-action="Home-Show"]:has(.main-menu.in) .header::before,
  .page[data-action="Default-Start"]:has(.main-menu.in) .header::before,
  .page[data-action="Home-Show"]:has(.main-menu.in) .header-banner::before,
  .page[data-action="Default-Start"]:has(.main-menu.in) .header-banner::before,
  .page[data-action="Home-Show"]:has(.search_layer_popup_wrap.serch-show) .header::before,
  .page[data-action="Default-Start"]:has(.search_layer_popup_wrap.serch-show) .header::before,
  .page[data-action="Home-Show"]:has(.search_layer_popup_wrap.serch-show) .header-banner::before,
  .page[data-action="Default-Start"]:has(.search_layer_popup_wrap.serch-show) .header-banner::before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  /* 열림 시 배너 텍스트/닫기 검정 (메인 기본은 흰글자라 반전) */
  .page[data-action="Home-Show"]:has(.main-menu.in) .header-banner,
  .page[data-action="Home-Show"]:has(.main-menu.in) .header-banner *,
  .page[data-action="Default-Start"]:has(.main-menu.in) .header-banner,
  .page[data-action="Default-Start"]:has(.main-menu.in) .header-banner *,
  .page[data-action="Home-Show"]:has(.search_layer_popup_wrap.serch-show) .header-banner,
  .page[data-action="Home-Show"]:has(.search_layer_popup_wrap.serch-show) .header-banner *,
  .page[data-action="Default-Start"]:has(.search_layer_popup_wrap.serch-show) .header-banner,
  .page[data-action="Default-Start"]:has(.search_layer_popup_wrap.serch-show) .header-banner * {
    color: #000 !important;
  }

  /* 메인 + LNB 닫힘: 히어로 위 → 로고·카트 흰색 */
  .page[data-action="Home-Show"] .h_logo_wrap_mob .logo-home img,
  .page[data-action="Default-Start"] .h_logo_wrap_mob .logo-home img,
  .page[data-action="Home-Show"] .h_header_right .minicart-link img,
  .page[data-action="Default-Start"] .h_header_right .minicart-link img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
  }

  .page[data-action="Home-Show"] .h_header_right .minicart-link .minicart-quantity,
  .page[data-action="Default-Start"] .h_header_right .minicart-link .minicart-quantity {
    color: #fff;
  }

  /* 메인 + LNB 열림: 패널 흰색 → 카트 검정 복원(로고는 숨김, X·검색·로그인은 기본 검정) */
  .page[data-action="Home-Show"] #sg-navbar-collapse.in ~ .h_header_right .minicart-link img,
  .page[data-action="Default-Start"] #sg-navbar-collapse.in ~ .h_header_right .minicart-link img {
    -webkit-filter: none;
    filter: none;
  }

  .page[data-action="Home-Show"] #sg-navbar-collapse.in ~ .h_header_right .minicart-link .minicart-quantity,
  .page[data-action="Default-Start"] #sg-navbar-collapse.in ~ .h_header_right .minicart-link .minicart-quantity {
    color: #000;
  }

  /* --- 검색 오버레이: X(좌) + SEARCH... + 돋보기(우) --- */
  /* 검색 닫기 X: 콘텐츠 상단(padding-top 2rem) 기준 정렬로 입력 행·LNB X와 높이 일치 */
  .search_close_button_wrap {
    position: absolute;
    left: 1.6rem;
    top: 2rem;
    -webkit-transform: none;
    transform: none;
    z-index: 5;
    padding-bottom: 0 !important;
  }

  /* 검색 닫기 X: LNB와 동일 SVG(30×30). 뒤 1024px 블록 CLOSE 규칙을 이기도록 특이도 (0,3,0) */
  .search_layer_popup .search_close_button_wrap .serch_btn {
    font-size: 0;
    line-height: 0;
    color: transparent;
    width: 3rem;
    height: 3rem;
    border: 0;
    padding: 0;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><line x1='0' y1='0' x2='30' y2='30' stroke='%23000' stroke-width='1'/><line x1='30' y1='0' x2='0' y2='30' stroke='%23000' stroke-width='1'/></svg>") no-repeat center / 3rem 3rem;
  }

  .search_layer_popup .input_box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 0;
    margin-left: 7rem;
  }

  .search_layer_popup .inputTypeText {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 0;
    font-size: 1.1rem;
    padding-left: 0;
  }

  /* placeholder(SEARCH...): 검정 40%, opacity:1로 FF 흐림 방지 */
  .search_layer_popup .inputTypeText::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; }
  .search_layer_popup .inputTypeText::-moz-placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; }
  .search_layer_popup .inputTypeText:-ms-input-placeholder { color: rgba(0, 0, 0, 0.4); }
  .search_layer_popup .inputTypeText::-ms-input-placeholder { color: rgba(0, 0, 0, 0.4); }
  .search_layer_popup .inputTypeText::placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; }

  .search_layer_popup .txt_btn {
    font-size: 0;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    background: url("../images/search.svg") no-repeat center / 2rem;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  /* 검색 열림 시 좌우 분리: SEARCH 텍스트 좌(X 옆), 돋보기 우측 끝 — display 토글이라 keyframe 사용 */
  @-webkit-keyframes searchTextSpreadLeft {
    from { -webkit-transform: translateX(120px); transform: translateX(120px); opacity: 0; }
    to   { -webkit-transform: translateX(0);      transform: translateX(0);      opacity: 1; }
  }
  @keyframes searchTextSpreadLeft {
    from { -webkit-transform: translateX(120px); transform: translateX(120px); opacity: 0; }
    to   { -webkit-transform: translateX(0);      transform: translateX(0);      opacity: 1; }
  }
  /* 돋보기: .txt_btn 정적 translateY(-50%) 유지하며 X만 이동 */
  @-webkit-keyframes searchMagSpreadRight {
    from { -webkit-transform: translate(-150px, -50%); transform: translate(-150px, -50%); }
    to   { -webkit-transform: translate(0, -50%);      transform: translate(0, -50%); }
  }
  @keyframes searchMagSpreadRight {
    from { -webkit-transform: translate(-150px, -50%); transform: translate(-150px, -50%); }
    to   { -webkit-transform: translate(0, -50%);      transform: translate(0, -50%); }
  }
  .search_layer_popup .inputTypeText {
    -webkit-animation: searchTextSpreadLeft 0.3s ease;
    animation: searchTextSpreadLeft 0.3s ease;
  }
  .search_layer_popup .txt_btn {
    -webkit-animation: searchMagSpreadRight 0.3s ease;
    animation: searchMagSpreadRight 0.3s ease;
  }

}

.navbar.bg-inverse {
  background-color: transparent !important;
  padding: 0;
}

@media (min-width: 769px) {
  .navbar.bg-inverse .navbar-nav .nav-item+.nav-item {
    margin-left: 0;
  }

  .navbar.bg-inverse .navbar-nav .nav-link {
    padding: 0.8rem;
    white-space: nowrap;
  }
}

.navbar-expand-md .navbar-nav.nav-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.navbar-expand-md .navbar-nav.nav-spaced {
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.navbar-expand-md .navbar-nav.nav-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}

@media (min-width: 769px) {
  .nav-item>.nav-link {
    color: #fff;
  }
}

/* order list */
.product_info>span:first-child {
  margin-bottom: 10px;
}

.product_info>span {
  display: block;
}

.product_status {
  width: 410px;
}

.order_action_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 10px;
}

.order_action_btn .order_withdraw {
  gap: 16px;
}

.order_withdraw {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.order_apply {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.order_action_btn .order_apply {
  gap: 4px;
}

/* reservation sections */
.reservation_mo p {
  font-size: 12px;
  color: #000;
}

#checkReservations {
  background-color: #000;
  color: #fff;
  padding: 9px 10px;
  border: none;
}

div#reservation_mo {
  width: 100%;
  background: #000;
  text-align: center;
  margin-top: 20px;
}

.res_guide_txt {
  word-break: keep-all;
}

.res_guide_txt li {
  list-style: none;
  padding-bottom: 20px;
}

.res_sub_title {
  padding: 40px 0 40px 40px;
  font-size: 12px;
}

/* registration */
.regSubmit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 10px 20px;
  border: none;
  white-space: nowrap;
  min-width: 80px;
  height: 43px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  margin-left: 10px;
}

/* complete reservations */
.com_page_title {
  padding-bottom: 20px;
}

.res_link_btn {
  margin-top: 36px;
  text-decoration: underline;
}

/* order details */
.acc-trigger {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding: 8px 30px 8px 0;
  border-bottom: 1px solid #000;
  text-align: left;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.orderDetails-card {
  display: grid;
  grid-template-rows: 0fr;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.orderDetails-card-body {
  overflow: hidden;
  padding-top: 15px;
  -webkit-transition-duration: inherit;
  transition-duration: inherit;
}

.order_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}

.order_info li {
  list-style: none;
}

.order_info .label {
  width: 115px;
}

.order_info>li>* {
  display: table-cell;
  vertical-align: middle;
}

.acc-trigger {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-decoration: none;
}

.acc-trigger:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-decoration: none;
}

.accordion .acc-trigger::after {
  content: "";
  position: absolute;
  right: 12px;
  top: calc(50% - 5px);
  width: 7px;
  height: 7px;
  border: 1px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  outline: none;
}

.accordion .acc-trigger .collapsed::after {
  top: calc(50% - 1px);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  outline: none;
}

.btn_secondary {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 46px;
  height: 35px;
  padding: 2px 10px;
  border: 1px solid #000;
  word-break: keep-all;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #fff;
  color: #000;
  border-radius: 0;
}

.btn_primary {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 46px;
  height: 35px;
  padding: 2px 10px;
  border: 1px solid #000;
  word-break: keep-all;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #000;
  color: #fff;
  width: 100%;
  border-radius: 0;
}

.accordion_btn_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding-top: 30px;
  width: 100%;
}

/* order complete */
.order_result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-top: 30px;
}

.order_result>.order_item_body {
  width: 49.701%;
}

.order_completed {
  padding-bottom: 40px;
}

.order_completed>p+p {
  margin-top: 18px;
}

.product_detail {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #000;
}

.product_detail .thumbnail_product {
  width: 90px;
}

.product_info {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-top: 10px;
}

.product_info>span:first-child {
  margin-bottom: 10px;
}

.product_info>span {
  display: block;
}

.order_result .product_sub_title {
  padding-top: 40px;
  font-size: 12px;
}

.product_sub_title {
  padding-bottom: 10px;
  font-size: 12px;
}

.order_info {
  gap: 5px;
}

.order_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  padding: 0;
}

.order_info li {
  list-style: none;
}

.product_item_summary {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 37.126%;
  margin-right: 25px;
}

.order_result .product_sub_title {
  padding-top: 40px;
}

.product_item_summary li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 10px;
  list-style: none;
}

.product_item_summary .total {
  padding-top: 40px;
}

.order_result .order_info .label {
  width: 94px;
  text-align: left;
}

.btn_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding-top: 15px;
}

.btn_wrap .btn_secondary {
  width: 100%;
}

.btn_tertiary {
  min-width: 70px;
  height: 30px;
  border-color: #b5b5b5;
  background-color: #fff;
  color: #000;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 46px;
  height: 35px;
  padding: 2px 10px;
  border: 1px solid #000;
  word-break: keep-all;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 0;
}

/* wishlist */
.product_item_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.product_item_wrap>.product_item_body {
  width: 49.701%;
}

.product_item_body>.product_check_item {
  padding-bottom: 20px;
  font-size: 14px;
  position: relative;
  line-height: 1.5;
}

.product_check_item input {
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
}

.product_check_item label {
  position: relative;
  display: inline-block;
  min-height: var(--check-size);
  padding-left: 24px;
  word-break: keep-all;
  cursor: pointer;
}

.product_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: 12px;
  -moz-column-gap: 12px;
  column-gap: 12px;
}

.product_list.col3 {
  row-gap: 30px;
}

.product_list .order_action_btn:first-child {
  padding: 0 0 4px;
}

.product_list .order_action_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 5px;
}

.product_list .product_thumbnail {
  position: relative;
  display: block;
}

.icon_btn {
  display: inline-block;
  overflow: hidden;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  white-space: nowrap;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn_delete {
  background-size: 12px;
}

.product_hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip-path: polygon(0 0, 0 0, 0 0);
}

.product_info {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-top: 10px;
}

.product_item_summary {
  padding-top: 60px;
}

.product_thumbnail img {
  width: 225px;
  height: 258px;
}

/* [MOD-header 03] 모바일 헤더 하단 보더 제거 */

@media (max-width: 448px) {
  .sliding-left-navbar {
    width: 100%;
    left: -100%;
  }
}

.modal_header {
  padding: 0 0 0 0;
  border: 0;
}

.fixedCommon_body {
  overflow-y: auto;
  max-height: calc(100vh - 3em - 174px);
  min-height: 54px;
  padding: 0 30px;
  margin: 30px -30px 0 -30px;
}

.box_list .itemmodal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #000;
  background-color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.box_list .itemmodal+.itemmodal {
  margin-top: 10px;
}

.div#consent-tracking {
  margin-top: 20px;
}

.modal_body .num {
  position: absolute;
  left: 0;
  top: 0;
}

.modal_body ol>li {
  position: relative;
  padding-left: 18px;
}

.modal_form_list:first-child {
  margin-top: 0 !important;
}

.modal_form_list>* {
  margin-top: 40px;
}

.modalinput_item input {
  height: 30px;
  padding: 4px 0;
  border: 1px solid #000;
  border-width: 0 0 1px;
  border-width: 0 0 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 12px;
  color: #000;
  width: 100%;
}

.modal .modal_form_list .modalinput_box input {
  -ms-flex-negative: 1;
  flex-shrink: 1;
  max-width: 56.62%;
}

.modalinput_item .row>* {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.modaldropdown select {
  height: 30px;
  padding-right: 22px;
  border-width: 0 0 1px;
  background-size: 13px;
  border-width: 0 0 1px !important;
  outline: none;
  padding: 0;
}

.modaldropdown select {
  width: 100%;
  border: 1px solid #000;
  background: url(https://blvp-001.dx.commercecloud.salesforce.com/on/demandware.static/Sites-RefArch-Site/-/default/dwfa5b99a7/images/ico_angle.svg) no-repeat 100% 50%/13px;
  text-align: left;
}

.modalbtn_wrap {
  padding-top: 30px;
}

.modalinput_item .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  margin: 0;
}

button.txt_btn {
  float: inline-end;
}

.modalShippingtitle {
  margin-top: 30px;
}

.cookiesBtn {
  flex: 1 1 0;
  font-size: 12px !important;
}

.modal_body h2:nth-of-type(1),
.modal_body h3:nth-of-type(1) {
  margin-top: 0;
  font-size: 12px;
}

.modal_body h3,
.modal_body h4 {
  margin-top: 15px;
  font-size: 12px;
}

.modalHeight {
  max-height: 423px;
}

li {
  list-style: none;
}

.res_form_list>* {
  margin-top: 30px;
}

.res_form_list> :first-child {
  margin-top: 0 !important;
}

.res_form_list>.input_item>.row {
  margin: 0 !important;
}

/* 예약 생성 모달: 날짜/시간 한 줄 정렬 */
/* 밑줄 기준 정렬 */
#reservation-create-div .res_form_list>.input_item>.row {
  display: flex;
  align-items: flex-end;
}

.termsReservations {
  width: 100% !important;
}

.number_wrap_res {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 10px;
  margin-right: 15px;
}

.number_ctrl_res {
  flex: 1;
  padding-left: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 12px;
}

.btn_minus_res,
.btn_plus_res {
  display: inline-block;
  width: 0;
  text-indent: 100%;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}

.number_ctrl_res .btn_minus_res,
.number_ctrl_res .btn_plus_res {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.number_ctrl_res input {
  max-width: unset !important;
  height: 20px;
  border: 0;
  text-align: center;
}

.btn_plus_res img {
  width: 14px;
  height: 14px;
}

.res_dropdown select {
  width: 100%;
  padding: 4px 0;
  padding-right: 30px;
  border: 1px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-width: 0 0 1px;
  text-align: left;
  outline: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.707' height='8.061' viewBox='0 0 14.707 8.061'%3E%3Cpath d='M4667.148,3013.231l7,7,7-7' transform='translate(-4666.795 -3012.877)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: 100% 50%;
  background-size: 13px auto;
}

.inputReservation input {
  width: 100%;
  padding: 4px 0;
  border: 1px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-width: 0 0 1px;
  text-align: left;
  background: transparent;
  outline: none;
}

.receipt_check_item label {
  position: relative;
  display: inline-block;
  min-height: 16px;
  padding-left: 34px;
  word-break: keep-all;
  cursor: pointer;
  font-size: 12px;
}

.receipt_check_item input {
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
}

#receiptModal {
  margin-top: 100px;
}

.alert-content,
.receipt-content {
  width: 470px;
  padding: 30px;
  border: 1px solid #000;
  background-color: #fff;
}

.receipt-header {
  padding: 0 0 0 0;
  border: 0;
}

.alert-content .modal-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
}

.alert-content .modal-body {
  padding: 0;
}

.modal .receipt_check_group .receipt_check_item {
  width: calc(50% - 25px);
  position: relative;
  line-height: 1.5;
  font-size: 14px;
}

.modal .modal-body.receipt_body:not(.fixed_body) {
  padding: 0;
}

.modal .modal-body.receipt_body #reservation-details {
  margin-top: 10px;
}

.modal .modal-body+.btn_wrap,
.modal .modal-body.receipt_body .common-btn-group {
  margin-top: 40px;
  padding-top: 0;
}

.modal .modal-body.receipt_body .common-btn-group .common-width-btn {
  max-width: unset;
}

.receipt_form_list> :first-child {
  margin-top: 0 !important;
}

.receipt_check_item>.custom-control-label ::before {
  left: 0 !important;
}

.receipt_check_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px 50px;
}

.receipt_form_list>* {
  margin-top: 40px;
}

.receipt_form_list>.input_item>.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  margin: 0;
}

select#cellular {
  width: 100%;
}

.receipt-business-number input {
  width: 100%;
}

.input_item .row>* {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.receipt_body>.location {
  margin-top: 10px;
}

.receipt_body>.reservationinfo {
  margin-top: 10px;
}

.modal-title {
  font-size: 12px;
}

.modal-footer,
.modal-body,
.modal-header {
  border: none;
}

.btn-outline-primary {
  font-size: 12px !important;
}

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

.reservationinfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}

.reservationinfo>li {
  display: table;
}

.guide_txt {
  word-break: keep-all;
  word-wrap: break-word;
}

[lang="ja"] *,
[lang="ja"] .guide_txt {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.guide_txt>.title {
  padding: 30px 0 10px;
  font-size: 12px;
}

.guide_txt li+li {
  margin-top: 15px;
}

.fixed_body {
  max-height: 450px;
  overflow-y: auto;
  min-height: 54px;
  padding: 0 30px;
  margin: 30px -30px 0 -30px;
}

.receipt_body>ul>li {
  list-style: none;
}

.modal .reserved {
  margin-top: 20px;
}

.common-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  margin-top: 20px;
}

.common-width-btn {
  max-width: 196px;
}

.back-to-top {
  margin: 0.1em 0.313em;
  padding: 0;
  background-color: transparent;
  border: 0;
}

.back-to-top i.fa-arrow-up {
  color: rgba(0, 0, 0, 0.7);
}

.back-to-top i.fa-circle {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.to_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 160px;
  padding-top: 20px;
  cursor: pointer;
}

.back-to-top {
  cursor: pointer;
  border: 0;
  background: none;
  border-radius: 0;
  margin-top: 15px;
  color: #000;
}

span#dropdownCountrySelector {
  justify-content: space-between;
  font-size: 12px;
  width: 100%;
  text-align: left;
  height: 40px;
  padding: 0 38px 0 16px;
}

.dropdown-item {
  padding: 0.25rem 0.4rem !important;
}

.dropdown-toggle::after {
  float: right;
  margin-top: 8px;
  border-top: 0.5em solid !important;
  border-right: 0.5em solid transparent !important;
  border-bottom: 0;
  border-left: 0.5em solid transparent !important;
}

.dropdown.country-selector {
  border: 1px solid #000;
  margin-top: 22px;
}

.dropdown-country-selector {
  width: 100%;
  border: 1px solid #000;
}

.dropdown-country-selector a {
  font-size: 12px;
  text-decoration: none;
}

.dropdown.country-selector .dropdown-toggle::after {
  position: absolute;
  right: 16px;
  float: unset;
  width: 15px;
  height: 8px;
  margin: 0;
  border: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.707' height='8.061' viewBox='0 0 14.707 8.061'%3E%3Cpath d='M4667.148,3013.231l7,7,7-7' transform='translate(-4666.795 -3012.877)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}

#selectCountryRegion {
  margin-top: 0 !important;
}

#selectCountryRegion .box_list .itemmodal.mt-5 {
  margin-top: 0 !important;
}

#selectCountryRegion,
#selectCountryRegion * {
  font-family: "FolioStdBook", sans-serif !important;
}

.CountryDroupdownName {
  font-size: 12px;
  text-decoration: none;
}

.footer_copy_link {
  text-decoration: none !important;
}

.footer_copy_link:hover {
  text-decoration: underline !important;
}

footer {
  margin: 0 auto;
  padding: 40px 25px;
  background-color: #fff;
}

footer p {
  margin: 0;
}

footer .pc_only a {
  text-decoration: underline;
}

footer .footer_logo_wrap {
  text-align: left;
  margin-bottom: 40px;
  line-height: pxToRem(18);
}

/* 로고 height 12px (width는 원본 비율 자동) */
footer .footer_logo_wrap img {
  height: 12px;
}

footer .footer_grid_container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px 10px;
  font-size: 12px;
}

footer .footer_grid_container > .footer_logo_wrap {
  grid-column: 1 / span 3;
  margin-bottom: 0;
  align-self: start;
}

footer .footer_grid_container > div:not(.footer_logo_wrap):not(.footer_grid_item) {
  grid-column: 4 / span 6;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

footer .footer-grid_center-inner {
  display: flex;
  flex-direction: column;
  row-gap: 13px;
}

footer .footer-grid_center-inner .footer_grid_item {
  color: #000;
  opacity: 0.6;
  font-size: 10px;
}

footer .footer-grid_center-inner .notice {
  margin-top: 7px;
}

footer .footer-grid_center-inner .footer_bottom {
  margin-top: 7px;
}

footer .footer-grid_center-inner .footer_bottom .copy {
  margin-top: 28px;
}

footer .brand_desc {
  grid-column: 4 / span 6;
}

footer .support {
  grid-column: 4 / span 6;
}

footer .notice {
  grid-column: 4 / span 6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 20px;
}

footer .notice .content-asset {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 20px;
}

footer .notice .content-asset > p {
  margin-bottom: 0;
}

footer .language {
  grid-column: 10 / span 3;
}

footer .footer_bottom {
  grid-column: 4 / span 6;
  font-size: 10px;
  color: #4E4E4E;
  line-height: 14px;
  margin-top: 0;
  max-width: 1250px;
}

footer .footer_heading {
  margin-bottom: 20px;
}

footer .support p {
  margin-bottom: 8px;
}

footer .support p:last-child {
  margin-bottom: 0;
}

footer .notice p {
  margin-bottom: 0;
}

footer #lang_desktop {
  border: 1px solid #000;
}

footer select {
  padding: 0 20px 0 8px;
  color: #000;
  word-break: break-all;
  font-weight: inherit;
  background-size: auto 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #000;
  height: 35px;
  line-height: 35px;
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  outline: 0;
  outline-style: none;
}

.mo_only {
  display: none;
}

@media (max-width: 1024px) {

  .Orderdatepicker {
    display: none !important;
  }

  footer.footer_wrap {
    padding: 4rem 1.6rem;
  }

  footer span#dropdownCountrySelector {
    font-size: 13px;
    padding: 1rem !important;
  }

  footer .dropdown-toggle {
    padding: 0.375rem 0.4rem;
  }

  footer .pc_only {
    display: none;
  }

  footer .mo_only {
    display: block;
  }

  footer .footer_logo_wrap {
    margin-bottom: 4rem;
  }

  /* 로고 height 12px (width는 원본 비율 자동) */
  footer img.footer_logo {
    height: 12px;
    margin: 0;
  }

  footer .footer_desc {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.015em;
    margin-bottom: 4rem;
  }

  footer .language_mo {
    margin-bottom: 4rem;
  }

  footer .language_mo select {
    width: 100%;
    border: 1px solid #000;
    line-height: 15px;
    letter-spacing: 0.016em;
  }

  footer .support_mo {
    margin-bottom: 1.3rem;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.015em;
    color: #000;
    opacity: 0.6;
  }

  footer .support_mo .footer_heading {
    margin-bottom: 20px;
  }

  footer .support_mo p:first-child {
    margin-bottom: 0.8rem;
  }

  footer .footer_links_mo {
    font-size: 10px;
    margin-bottom: 2rem;
    color: #000;
    opacity: 0.6;
  }

  footer .footer_links_mo .footer_heading {
    margin-bottom: 1.3rem;
  }

  footer .footer_bottom_mo {
    font-size: 10px;
    color: #000;
    opacity: 0.6;
    line-height: 14px;
    letter-spacing: 0.02em;
  }

  footer .footer_bottom_mo a {
    font-size: pxToRem(10);
  }

  footer .footer_bottom_mo .copy {
    margin-top: 2.2rem;
  }

  footer .footer_links_mo .content-asset > p {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.3rem;
    column-gap: 3rem;
  }

  footer .footer_links_mo a {
    color: inherit;
    text-decoration: underline;
  }
}

.content_footer-common {
  position: relative;
  padding: 60px 25px 0 25px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.content_footer-common .titleArea {
  grid-column: 5 / span 4;
}
.content_footer-common .titleArea *{
  font-size: 12px !important;
}
.content_footer-common .titleArea strong{
  font-weight: 700;
}
.content_footer-common .titleArea h2{
  margin-top: 50px;
}
.content_footer-common .titleArea .pd-left{
  margin-left: 14px;
}
.content_footer-common .titleArea table{
  margin-bottom: 15px;
  -webkit-appearance: none;
}
.content_footer-common .titleArea table th,
.content_footer-common .titleArea table td {
  border: 1px solid #ddd !important;
  text-align: left;
  padding: 5px;
}
.content_footer-common .titleArea table thead th {
  font-weight: 700;
  text-align: center;
  background-color: #f2f2f2;
}

@media (max-width: 1024px) {
  .content_footer-common {
    display: unset;
  }

  .content_footer-common .titleArea {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.titleArea {
  padding-top: 80px;
  font-weight: normal;
}

.titleArea h2 {
  font-size: 12px;
  padding-bottom: 20px;
}

.cctvTerms {
  max-width: 830px;
  margin: 0 auto;
}

.column_mid {
  max-width: 830px;
  margin: 0 auto;
}

.column_mid h3,
.column_mid h4 {
  font-size: 12px;
  line-height: 12px;
}

.column_mid h3:nth-of-type(1) {
  margin-top: 0;
}

.column_mid h3,
.cctvTerms h4 {
  margin-top: 15px;
  line-height: 12px;
}

.footerLegaltitle {
  padding-bottom: 60px;
  font-size: 12px;
  text-transform: uppercase;
}

li {
  list-style: none;
}

.cctvTerms h3 strong,
.cctvTerms h4 strong {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
}

.cctvTerms h3:nth-of-type(1) {
  margin-top: 0;
}

.cctvTerms h3,
.cctvTerms h4 {
  margin-top: 15px;
  line-height: 12px;
}

.cctvTerms>ul li {
  list-style: none;
}

.basic_table {
  margin-bottom: 12px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ddd;
}

.basic_table thead th {
  font-weight: normal;
  border: 1px solid #ddd;
}

.basic_table tbody tr {
  font-weight: normal;
  border: 1px solid #ddd;
}

.basic_table tbody td {
  font-weight: normal;
  border: 1px solid #ddd;
}

.cctvTerms ol>li {
  position: relative;
  padding-left: 18px;
  list-style: none;
}

.cctvTerms ol>li>.num {
  position: absolute;
  top: 0;
  left: 0;
}

.column_mid .num {
  position: absolute;
  left: 0;
  top: 0;
}

.column_mid .dot>li {
  position: relative;
  padding-left: 18px;
}

/* stylelint-disable scss/no-global-function-names */
@media (min-width: 544px) {
  .slant-down::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 0;
    border-left-width: 90vw;
    border-bottom: 4vw solid #f9f9f9;
  }
}

@media (min-width: 544px) {
  .slant-up::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-left-width: 0;
    border-right-width: 90vw;
    border-top: 4vw solid #f9f9f9;
  }
}

h1.page-title {
  position: relative;
  color: white;
  padding: 0.3125em 0.625em 0.3125em 15px;
  background-color: var(--skin-primary-color-1);
  display: inline-block;
  margin: 0.9375em 0;
  font-size: 1.5rem;
}

@media (min-width: 544px) {
  h1.page-title {
    font-size: 2rem;
  }
}

@media (min-width: 769px) {
  h1.page-title {
    font-size: 3rem;
  }
}

h1.page-title::before {
  content: "";
  background-color: var(--skin-primary-color-1);
  height: 100%;
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
}

@media (min-width: 1200px) {
  h1.page-title::before {
    width: calc((100vw - 1140px) / 2);
    left: calc((100vw - 1140px) / 2 * -1);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  h1.page-title::before {
    width: calc((100vw - 940px) / 2);
    left: calc((100vw - 940px) / 2 * -1);
  }
}

@media (min-width: 769px) and (max-width: 991.98px) {
  h1.page-title::before {
    width: calc((100vw - 720px) / 2);
    left: calc((100vw - 720px) / 2 * -1);
  }
}

@media (min-width: 1200px) {
  h1.page-title {
    left: calc((100% - 1140px) / 2);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  h1.page-title {
    left: calc((100% - 940px) / 2);
  }
}

@media (min-width: 769px) and (max-width: 991.98px) {
  h1.page-title {
    left: calc((100% - 720px) / 2);
  }
}

@media (max-width: 1024px) {
  h1.page-title {
    left: 0;
  }
}

.hero {
  height: 25vw;
  background-size: cover;
  background-position: 50%;
  position: relative;
}

.hero h1.page-title {
  top: 50%;
  margin: -1em 0 0;
}

/* stylelint-enable scss/no-global-function-names */
.notify {
  position: fixed;
  top: 0;
}

.price {
  color: #222;
}

.price .strike-through {
  text-decoration: line-through;
  color: #999;
  margin-right: 0.938rem;
}

.price .starting,
.price .range,
.price .sales {
  font-weight: bold;
}

.price .tiered {
  color: #222;
}

.price .tiered table {
  border-top: 1px solid #ccc;
  margin: 0 auto;
}

.price .tiered table tr:nth-child(odd) {
  background-color: #eee;
}

.price .tiered td,
.price .tiered span.price {
  font-size: 0.875rem;
  font-weight: bold;
}

.price .tiered td {
  padding: 0.313rem;
}

.price .tiered td.quantity {
  font-weight: normal;
  text-align: right;
}

.price .tiered td.value {
  text-align: left;
}

.price .tiered .table-header {
  font-size: 1.125rem;
  padding: 0.313rem;
}

.price .tiered .column-header {
  font-size: 1rem;
  padding: 0.313rem;
  font-weight: normal;
}

.price .tiered .column-header.quantity {
  text-align: right;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-beige {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #f5f5dc;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-beige.disabled {
  opacity: 0.2;
}

.swatch-filter-beige {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #f5f5dc;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #f5f5dc;
  display: block;
  position: relative;
}

.swatch-filter-beige.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-black {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #000;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-black.disabled {
  opacity: 0.2;
}

.swatch-filter-black {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #000;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #000;
  display: block;
  position: relative;
}

.swatch-filter-black.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-blue {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #0070d2;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-blue.disabled {
  opacity: 0.2;
}

.swatch-filter-blue {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #0070d2;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #0070d2;
  display: block;
  position: relative;
}

.swatch-filter-blue.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-brown {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #a52a2a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-brown.disabled {
  opacity: 0.2;
}

.swatch-filter-brown {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #a52a2a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #a52a2a;
  display: block;
  position: relative;
}

.swatch-filter-brown.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-green {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #008827;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-green.disabled {
  opacity: 0.2;
}

.swatch-filter-green {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #008827;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #008827;
  display: block;
  position: relative;
}

.swatch-filter-green.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-grey {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #8f979d;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-grey.disabled {
  opacity: 0.2;
}

.swatch-filter-grey {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #8f979d;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #8f979d;
  display: block;
  position: relative;
}

.swatch-filter-grey.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-navy {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #000080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-navy.disabled {
  opacity: 0.2;
}

.swatch-filter-navy {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #000080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #000080;
  display: block;
  position: relative;
}

.swatch-filter-navy.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-orange {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #ffa500;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-orange.disabled {
  opacity: 0.2;
}

.swatch-filter-orange {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #ffa500;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #ffa500;
  display: block;
  position: relative;
}

.swatch-filter-orange.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-pink {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fe249a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-pink.disabled {
  opacity: 0.2;
}

.swatch-filter-pink {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #fe249a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #fe249a;
  display: block;
  position: relative;
}

.swatch-filter-pink.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-purple {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #800080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-purple.disabled {
  opacity: 0.2;
}

.swatch-filter-purple {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #800080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #800080;
  display: block;
  position: relative;
}

.swatch-filter-purple.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-red {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #f00;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-red.disabled {
  opacity: 0.2;
}

.swatch-filter-red {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #f00;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #f00;
  display: block;
  position: relative;
}

.swatch-filter-red.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-white {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-white.disabled {
  opacity: 0.2;
}

.swatch-filter-white {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #fff;
  display: block;
  position: relative;
}

.swatch-filter-white.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-yellow {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #ff0;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-yellow.disabled {
  opacity: 0.2;
}

.swatch-filter-yellow {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #ff0;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #ff0;
  display: block;
  position: relative;
}

.swatch-filter-yellow.disabled {
  opacity: 0.2;
}

.swatch-circle-miscellaneous {
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(130, 30, 145)), color-stop(25%, rgb(130, 30, 145)), color-stop(25%, rgb(237, 209, 52)), color-stop(50%, rgb(255, 255, 0)), color-stop(50%, rgb(237, 209, 52)), color-stop(50%, #59ba00), color-stop(76%, #59ba00), color-stop(76%, #111), to(#111)), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(14, 92, 209)), color-stop(50%, rgb(14, 92, 209)), color-stop(50%, rgb(226, 11, 11)), to(rgb(226, 11, 11)));
  background: linear-gradient(0deg, rgb(130, 30, 145) 0, rgb(130, 30, 145) 25%, rgb(237, 209, 52) 25%, rgb(255, 255, 0) 50%, rgb(237, 209, 52) 50%, #59ba00 50%, #59ba00 76%, #111 76%, #111 100%), linear-gradient(0deg, rgb(14, 92, 209) 0, rgb(14, 92, 209) 50%, rgb(226, 11, 11) 50%, rgb(226, 11, 11) 100%);
  background-repeat: repeat-y, repeat;
  background-size: 50% 100%, 100% 100%;
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  border-radius: 1.25em;
  display: block;
  height: 2.5em;
  position: relative;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  width: 2.5em;
}

.swatch-circle-miscellaneous.disabled {
  opacity: 0.2;
}

.swatch-circle-miscellaneous.selected::after {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.attribute {
  margin-top: 0.938em;
}

.attribute label {
  display: block;
}

.swatch a {
  text-decoration: none;
}

@media (max-width: 543.98px) {
  .primary-images {
    margin: 0;
    padding: 0;
  }
}

.prices-add-to-cart-actions {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 50;
  padding-right: 0;
  padding-left: 0;
  left: 0;
}

@media (max-width: 543.98px) {
  .prices-add-to-cart-actions {
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
}

@media (min-width: 544px) {
  .prices-add-to-cart-actions {
    position: static;
    padding: 0 0.9375em;
  }
}

.prices-add-to-cart-actions .price {
  text-align: center;
}

.prices {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  text-align: center;
}

.cart-and-ipay {
  text-align: center;
}

@media (max-width: 543.98px) {
  .cart-and-ipay {
    padding-bottom: 26px;
  }

  .cart-and-ipay .btn {
    width: 98%;
    margin: 1%;
    display: block;
  }
}

.add-to-cart-messages {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  top: 5%;
  left: 50%;
  z-index: 99999;
}

#chooseBonusProductModal {
  width: 410px;
  max-width: 100%;
  padding: 10px;
  background-color: #000;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  color: #fff;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.add-to-basket-alert {
  -webkit-animation: fade 5s linear forwards;
  animation: fade 5s linear forwards;
  padding: 1em;
  background: #000;
  max-width: 250px;
  color: #fff;
  z-index: 999999;
}

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.add-to-basket-alert.show {
  display: block;
}

.simple-quantity {
  margin-top: 1em;
}

.main-attributes {
  margin-top: 1em;
}

.size-chart {
  margin-top: 1.071em;
}

div.availability {
  margin-top: 1.071em;
}

.bundle-item {
  padding-bottom: 1em;
  border-bottom: 1px solid #ccc;
}

.bundle-item:last-child {
  border-bottom: none;
}

.container.product-detail {
  margin-top: 2em;
  margin-bottom: 2em;
}

@media (max-width: 543.98px) {
  .container.product-detail {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.product-option:not(:first-child) {
  margin-top: 1.071em;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-beige {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #f5f5dc;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-beige.disabled {
  opacity: 0.2;
}

.swatch-filter-beige {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #f5f5dc;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #f5f5dc;
  display: block;
  position: relative;
}

.swatch-filter-beige.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-black {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #000;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-black.disabled {
  opacity: 0.2;
}

.swatch-filter-black {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #000;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #000;
  display: block;
  position: relative;
}

.swatch-filter-black.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-blue {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #0070d2;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-blue.disabled {
  opacity: 0.2;
}

.swatch-filter-blue {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #0070d2;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #0070d2;
  display: block;
  position: relative;
}

.swatch-filter-blue.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-brown {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #a52a2a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-brown.disabled {
  opacity: 0.2;
}

.swatch-filter-brown {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #a52a2a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #a52a2a;
  display: block;
  position: relative;
}

.swatch-filter-brown.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-green {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #008827;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-green.disabled {
  opacity: 0.2;
}

.swatch-filter-green {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #008827;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #008827;
  display: block;
  position: relative;
}

.swatch-filter-green.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-grey {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #8f979d;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-grey.disabled {
  opacity: 0.2;
}

.swatch-filter-grey {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #8f979d;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #8f979d;
  display: block;
  position: relative;
}

.swatch-filter-grey.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-navy {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #000080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-navy.disabled {
  opacity: 0.2;
}

.swatch-filter-navy {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #000080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #000080;
  display: block;
  position: relative;
}

.swatch-filter-navy.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-orange {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #ffa500;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-orange.disabled {
  opacity: 0.2;
}

.swatch-filter-orange {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #ffa500;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #ffa500;
  display: block;
  position: relative;
}

.swatch-filter-orange.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-pink {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fe249a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-pink.disabled {
  opacity: 0.2;
}

.swatch-filter-pink {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #fe249a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #fe249a;
  display: block;
  position: relative;
}

.swatch-filter-pink.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-purple {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #800080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-purple.disabled {
  opacity: 0.2;
}

.swatch-filter-purple {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #800080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #800080;
  display: block;
  position: relative;
}

.swatch-filter-purple.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-red {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #f00;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-red.disabled {
  opacity: 0.2;
}

.swatch-filter-red {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #f00;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #f00;
  display: block;
  position: relative;
}

.swatch-filter-red.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-white {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-white.disabled {
  opacity: 0.2;
}

.swatch-filter-white {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #fff;
  display: block;
  position: relative;
}

.swatch-filter-white.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-yellow {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #ff0;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-yellow.disabled {
  opacity: 0.2;
}

.swatch-filter-yellow {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #ff0;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #ff0;
  display: block;
  position: relative;
}

.swatch-filter-yellow.disabled {
  opacity: 0.2;
}

.swatch-circle-miscellaneous {
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(130, 30, 145)), color-stop(25%, rgb(130, 30, 145)), color-stop(25%, rgb(237, 209, 52)), color-stop(50%, rgb(255, 255, 0)), color-stop(50%, rgb(237, 209, 52)), color-stop(50%, #59ba00), color-stop(76%, #59ba00), color-stop(76%, #111), to(#111)), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(14, 92, 209)), color-stop(50%, rgb(14, 92, 209)), color-stop(50%, rgb(226, 11, 11)), to(rgb(226, 11, 11)));
  background: linear-gradient(0deg, rgb(130, 30, 145) 0, rgb(130, 30, 145) 25%, rgb(237, 209, 52) 25%, rgb(255, 255, 0) 50%, rgb(237, 209, 52) 50%, #59ba00 50%, #59ba00 76%, #111 76%, #111 100%), linear-gradient(0deg, rgb(14, 92, 209) 0, rgb(14, 92, 209) 50%, rgb(226, 11, 11) 50%, rgb(226, 11, 11) 100%);
  background-repeat: repeat-y, repeat;
  background-size: 50% 100%, 100% 100%;
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  border-radius: 1.25em;
  display: block;
  height: 2.5em;
  position: relative;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  width: 2.5em;
}

.swatch-circle-miscellaneous.disabled {
  opacity: 0.2;
}

.swatch-circle-miscellaneous.selected::after {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.attribute {
  margin-top: 0.938em;
}

.attribute label {
  display: block;
}

.swatch a {
  text-decoration: none;
}

@media (max-width: 543.98px) {
  .primary-images {
    margin: 0;
    padding: 0;
  }
}

.prices-add-to-cart-actions {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 50;
  padding-right: 0;
  padding-left: 0;
  left: 0;
}

@media (max-width: 543.98px) {
  .prices-add-to-cart-actions {
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
}

@media (min-width: 544px) {
  .prices-add-to-cart-actions {
    position: static;
    padding: 0 0.9375em;
  }
}

.prices-add-to-cart-actions .price {
  text-align: center;
}

.prices {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  text-align: center;
}

.cart-and-ipay {
  text-align: center;
}

@media (max-width: 543.98px) {
  .cart-and-ipay {
    padding-bottom: 26px;
  }

  .cart-and-ipay .btn {
    width: 98%;
    margin: 1%;
    display: block;
  }
}

.add-to-cart-messages {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  top: 5%;
  left: 50%;
  z-index: 99999;
}

#chooseBonusProductModal {
  width: 410px;
  max-width: 100%;
  padding: 10px;
  background-color: #000;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  color: #fff;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.add-to-basket-alert {
  -webkit-animation: fade 5s linear forwards;
  animation: fade 5s linear forwards;
  padding: 1em;
  background: #000;
  max-width: 250px;
  color: #fff;
  z-index: 999999;
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.add-to-basket-alert.show {
  display: block;
}

.simple-quantity {
  margin-top: 1em;
}

.main-attributes {
  margin-top: 1em;
}

.size-chart {
  margin-top: 1.071em;
}

div.availability {
  margin-top: 1.071em;
}

.bundle-item {
  padding-bottom: 1em;
  border-bottom: 1px solid #ccc;
}

.bundle-item:last-child {
  border-bottom: none;
}

.container.product-detail {
  margin-top: 2em;
  margin-bottom: 2em;
}

@media (max-width: 543.98px) {
  .container.product-detail {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.product-option:not(:first-child) {
  margin-top: 1.071em;
}

.quick-view-dialog,
.choose-bonus-product-dialog {
  max-width: 56.25em;
  /* stylelint-disable-next-line selector-class-pattern */
}

.quick-view-dialog .selectable-bonus-product-line-item,
.choose-bonus-product-dialog .selectable-bonus-product-line-item {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

.quick-view-dialog .beenSelected,
.choose-bonus-product-dialog .beenSelected {
  background-color: #eee;
}

.quick-view-dialog .modal-header,
.choose-bonus-product-dialog .modal-header {
  background-color: #eee;
  border-bottom: 2px solid #ccc;
  border-top-left-radius: 0.1875rem;
  border-top-right-radius: 0.1875rem;
}

.quick-view-dialog .modal-header .full-pdp-link,
.choose-bonus-product-dialog .modal-header .full-pdp-link {
  color: var(--skin-primary-color-1);
}

.quick-view-dialog .modal-header .close,
.choose-bonus-product-dialog .modal-header .close {
  font-size: 2rem;
  line-height: 1.5rem;
}

.quick-view-dialog .swatch-circle,
.choose-bonus-product-dialog .swatch-circle {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin-right: 0.313em;
  position: relative;
}

.quick-view-dialog .swatch-circle.color-value[data-selected=true]::after,
.choose-bonus-product-dialog .swatch-circle.color-value[data-selected=true]::after {
  color: #000;
  content: "\f058";
  display: table-caption;
  font-family: FontAwesome, sans-serif;
  font-size: 1.625em;
  left: 0.295em;
  position: absolute;
}

.quick-view-dialog .swatch-circle.color-value.selected::after,
.choose-bonus-product-dialog .swatch-circle.color-value.selected::after {
  background: #fff;
  border-radius: 50%;
  color: #000;
  content: "\f058";
  display: table-caption;
  font-family: FontAwesome, sans-serif;
  font-size: 1.625em;
  height: 0.75em;
  left: 0.31em;
  line-height: 0.8em;
  position: absolute;
  top: 0.35em;
  width: 0.8em;
}

.quick-view-dialog .swatch-circle i.fa-times-circle,
.choose-bonus-product-dialog .swatch-circle i.fa-times-circle {
  background: #fff;
  border-radius: 50%;
  height: 0.75em;
  line-height: 0.8em;
  width: 0.8em;
}

.quick-view-dialog a[disabled] .swatch-circle,
.choose-bonus-product-dialog a[disabled] .swatch-circle {
  cursor: not-allowed;
}

.quick-view-dialog a[disabled] .swatch-circle.color-value.selected::after,
.choose-bonus-product-dialog a[disabled] .swatch-circle.color-value.selected::after {
  background-color: #495057;
}

.quick-view-dialog .availablity-container,
.choose-bonus-product-dialog .availablity-container {
  text-align: right;
}

.quick-view-dialog .availablity-container,
.quick-view-dialog .size-chart,
.choose-bonus-product-dialog .availablity-container,
.choose-bonus-product-dialog .size-chart {
  margin-top: 0.938em;
}

.quick-view-dialog .modal-content,
.choose-bonus-product-dialog .modal-content {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.quick-view-dialog .modal-body,
.choose-bonus-product-dialog .modal-body {
  max-height: 28.125em;
  overflow-y: auto;
}

.quick-view-dialog button.close,
.choose-bonus-product-dialog button.close {
  font-size: 1.25em;
}

.quick-view-dialog .modal-footer,
.choose-bonus-product-dialog .modal-footer {
  background-color: #fff;
  border: none;
  border-bottom-right-radius: 0.1875rem;
  border-bottom-left-radius: 0.1875rem;
}

.quick-view-dialog .modal-footer .prices .price,
.choose-bonus-product-dialog .modal-footer .prices .price {
  font-size: 1.6em;
}

.quick-view-dialog .prices .sales,
.choose-bonus-product-dialog .prices .sales {
  font-size: 1.5rem;
}

.quick-view-dialog .promotions,
.choose-bonus-product-dialog .promotions {
  text-align: left;
  color: #c00;
}

@media (max-width: 1024px) {

  .quick-view-dialog .bonus-summary,
  .choose-bonus-product-dialog .bonus-summary {
    font-size: 0.625em;
  }

  .quick-view-dialog .bonus-summary .bonus-product-name,
  .choose-bonus-product-dialog .bonus-summary .bonus-product-name {
    padding: 0;
  }
}

.quick-view-dialog .pre-cart-products,
.choose-bonus-product-dialog .pre-cart-products {
  margin-right: 0.125em;
}

.quick-view-dialog .color-attribute,
.choose-bonus-product-dialog .color-attribute {
  border: none;
  padding: 0;
  background: none;
}

.quick-view-dialog .non-input-label,
.choose-bonus-product-dialog .non-input-label {
  display: block;
  margin-bottom: 0.5rem;
}

.product-tile {
  border: 0;
  margin-bottom: 0;
}

.product-tile .swatches a {
  text-decoration: none;
}

.product-tile .image-container {
  position: relative;
  overflow: auto;
}

.product-tile .image-container .quickview {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.product-tile .image-container .quickview i.fa-expand {
  color: rgba(0, 0, 0, 0.7);
}

.product-tile .image-container .quickview i.fa-circle {
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.product-tile .image-container a {
  display: block;
}

.product-tile .image-container a .tile-image {
  width: 100%;
}

.product-tile .tile-body {
  padding: 0.625em 0 1.875em;
}

.product-tile .tile-body .product-tile-color-label {
  cursor: pointer;
  font-size: 1em;
}

@media (max-width: 991.98px) {
  .product-tile .tile-body .product-tile-color-label {
    font-size: 0.9375em;
  }
}

@media (max-width: 1024px) {
  .product-tile .tile-body .product-tile-color-label {
    font-size: 0.8125em;
  }
}

.product-tile .tile-body .price {
  font-size: 1.125em;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .product-tile .tile-body .price {
    font-size: 1.0625em;
  }
}

@media (max-width: 768.98px) {
  .product-tile .tile-body .price {
    font-size: 1em;
  }
}

.product-tile .tile-body .price .tiered {
  font-size: 0.875em;
}

.product-tile .tile-body .price .tiered .value {
  font-weight: bold;
}

.product-tile .tile-body .coming-soon-tile {
  text-align: center;
}

.product-tile .tile-body .pdp-link {
  line-height: 1.2;
}

.product-tile .tile-body .pdp-link a {
  font-size: 1em;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .product-tile .tile-body .pdp-link a {
    font-size: 0.9375em;
  }
}

@media (max-width: 1024px) {
  .product-tile .tile-body .pdp-link a {
    font-size: 0.8125em;
  }
}

.product-tile .tile-body .ratings {
  font-size: 0.9em;
}

.product-tile .swatch-circle {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.8em;
  height: 1.8em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.9em;
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin-right: 0.313em;
  position: relative;
}

.product-tile .swatch-circle.color-value[data-selected=true]::after {
  color: #000;
  content: "\f058";
  display: table-caption;
  font-family: FontAwesome, sans-serif;
  font-size: 1.625em;
  left: 0.295em;
  position: absolute;
}

.product-tile .swatch-circle.color-value.selected::after {
  background: #fff;
  border-radius: 50%;
  color: #000;
  content: "\f058";
  display: table-caption;
  font-family: FontAwesome, sans-serif;
  font-size: 1.625em;
  height: 0.75em;
  left: 0.31em;
  line-height: 0.8em;
  position: absolute;
  top: 0.35em;
  width: 0.8em;
}

.product-tile .swatch-circle i.fa-times-circle {
  background: #fff;
  border-radius: 50%;
  height: 0.75em;
  line-height: 0.8em;
  width: 0.8em;
}

/* stylelint-disable-next-line selector-id-pattern */
#chooseBonusProductModal .modal-footer .container {
  margin-left: 0;
  width: 100%;
  margin-right: 0;
}

#chooseBonusProductModal .select-cbp-container {
  margin-top: auto;
  margin-bottom: auto;
}

#chooseBonusProductModal .product-name-wrapper {
  width: 100%;
}

#chooseBonusProductModal .bonus-quantity,
#chooseBonusProductModal .bonus-option {
  margin-top: 0.938em;
}

#chooseBonusProductModal .bonus-quantity-select {
  min-width: 5em;
}

#chooseBonusProductModal .select-bonus-product {
  margin-top: 1em;
}

#chooseBonusProductModal .selected-pid {
  border: 1px solid #ccc;
}

#chooseBonusProductModal .selected-pid .bonus-product-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#chooseBonusProductModal .bonus-product-price {
  text-align: center;
  margin-top: 1em;
}

[class*=onover_attribute_] {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  z-index: 2;
  pointer-events: none;
  line-height: 2;
  padding: 0 19px 0 19px;
  text-align: center;
}

.product-tile:hover [class*=onover_attribute_] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

.product-tile {
  position: relative;
}

.product-tile-sec>.tile-body {
  margin-top: 10px;
}

.form-nav .nav-tabs .nav-link {
  color: #333;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
}

@media (min-width: 992px) {
  .form-nav .nav-item>.nav-link {
    color: #333;
  }
}

.container .breadcrumb {
  border-radius: 0;
  border-bottom: 1px solid #ccc;
}

.veil {
  position: absolute;
  z-index: 100;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.veil .underlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: #000;
}

.spinner {
  width: 80px;
  height: 80px;
  text-align: center;
  -webkit-animation: sk-rotate 2s infinite linear;
  animation: sk-rotate 2s infinite linear;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
}

.dot1,
.dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-bounce 2s infinite ease-in-out;
  animation: sk-bounce 2s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes sk-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes sk-bounce {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-bounce {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.item-attributes {
  vertical-align: top;
  padding-left: 0;
}

.line-item-attributes,
.line-item-option {
  font-size: 0.813rem;
  margin: 0;
}

.line-item-pricing-info {
  margin-bottom: 0;
}

.line-item-pricing-info+.price {
  font-size: 1em;
}

.line-item-pricing-info+.unit-price .price {
  font-size: 1em;
}

.line-item-price-quantity-info {
  margin-top: 0.625em;
  border-top: 1px solid #ccc;
}

.line-item-total-text {
  font-size: 0.813em;
}

.pricing {
  font-size: 1em;
}

.non-adjusted-price {
  display: none;
}

.line-item-promo {
  color: #008827;
  font-size: 0.813em;
}

.line-item-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.bundled-line-item+.bundled-line-item {
  margin-top: 0.625em;
}

.bundle-includes {
  font-size: 0.813em;
  margin-bottom: 0.625em;
}

.line-item-divider {
  margin: 0.625em -1.225em 0.625em -1.325em;
}

.line-dotted {
  border-top: 0.063em dashed #ccc;
}

.line-item-availability {
  font-size: 0.813rem;
}

.product-line-item-details {
  overflow-y: auto;
}

.minicart {
  position: relative;
}

.minicart h1 {
  font-size: 1rem;
}

.minicart .cart {
  padding-top: 0.625em;
  padding-bottom: 0.625em;
  background-color: #f9f9f9;
}

.minicart .remove-btn {
  color: #999;
  float: right;
  background-color: white;
  border: none;
  font-size: 1.625em;
  margin-top: -0.313em;
  padding: 0;
}

.minicart .product-summary {
  margin-right: -0.938em;
  max-height: 21.875em;
  overflow: hidden auto;
  padding-right: 0.938em;
}

.minicart .quantity-label {
  font-size: 0.813em;
}

.minicart .quantity {
  width: 100%;
}

.minicart .popover {
  top: 100%;
  left: auto;
  right: 0;
  min-width: 23.44rem;
  max-width: 23.44rem;
  min-height: 22.7rem;
  display: none;
}

.minicart .popover::before {
  left: auto;
  right: 15px;
}

.minicart .popover::after {
  left: auto;
  right: 16px;
}

.minicart .popover.show {
  display: block;
}

.minicart .minicart-footer {
  border-top: 1px solid #ccc;
}

.minicart .estimated-total {
  margin-top: 0.625em;
}

.minicart .sub-total-label {
  font-size: 1em;
  font-weight: 600;
}

.minicart .sub-total {
  font-size: 1em;
  font-weight: 600;
}

.minicart .line-item-divider {
  margin: 0.625em -0.625em 0.625em -1.325em;
}

@media (min-width: 544px) and (max-width: 1024px) {
  .hide-link-med {
    display: none;
  }
}

@media (min-width: 769px) {
  .hide-no-link {
    display: none;
  }
}

@media (max-width: 543.98px) {
  .hide-no-link {
    display: none;
  }
}

.info-icon {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border: none;
  padding: 0;
  background: inherit;
}

.info-icon .icon {
  border-radius: 1.25rem;
  background-color: var(--skin-primary-color-1);
  width: 1.5625rem;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-weight: 600;
}

.info-icon .tooltip {
  position: absolute;
  bottom: 100%;
  padding: 0.312rem;
  border-radius: 0.1875rem;
  background-color: #444;
  color: #fff;
  font-size: 0.928rem;
  min-width: 20rem;
  max-width: 15rem;
  -webkit-transform: translate(-50%, calc(-1 * 1.25em / 2));
  transform: translate(-50%, calc(-1 * 1.25em / 2));
  left: 50%;
  margin-left: 4px;
  -webkit-animation: fade-in 0.5s linear forwards;
  animation: fade-in 0.5s linear forwards;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.info-icon .tooltip::before {
  content: " ";
  position: absolute;
  display: block;
  height: 1.25em;
  left: 0;
  bottom: -1.25em;
  width: 100%;
}

.info-icon .tooltip::after {
  border-left: solid transparent calc(1.25em / 2);
  border-right: solid transparent calc(1.25em / 2);
  border-top: solid #444 0.625em;
  bottom: -0.625em;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-beige {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #f5f5dc;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-beige.disabled {
  opacity: 0.2;
}

.swatch-filter-beige {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #f5f5dc;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #f5f5dc;
  display: block;
  position: relative;
}

.swatch-filter-beige.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-black {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #000;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-black.disabled {
  opacity: 0.2;
}

.swatch-filter-black {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #000;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #000;
  display: block;
  position: relative;
}

.swatch-filter-black.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-blue {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #0070d2;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-blue.disabled {
  opacity: 0.2;
}

.swatch-filter-blue {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #0070d2;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #0070d2;
  display: block;
  position: relative;
}

.swatch-filter-blue.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-brown {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #a52a2a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-brown.disabled {
  opacity: 0.2;
}

.swatch-filter-brown {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #a52a2a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #a52a2a;
  display: block;
  position: relative;
}

.swatch-filter-brown.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-green {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #008827;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-green.disabled {
  opacity: 0.2;
}

.swatch-filter-green {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #008827;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #008827;
  display: block;
  position: relative;
}

.swatch-filter-green.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-grey {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #8f979d;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-grey.disabled {
  opacity: 0.2;
}

.swatch-filter-grey {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #8f979d;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #8f979d;
  display: block;
  position: relative;
}

.swatch-filter-grey.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-navy {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #000080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-navy.disabled {
  opacity: 0.2;
}

.swatch-filter-navy {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #000080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #000080;
  display: block;
  position: relative;
}

.swatch-filter-navy.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-orange {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #ffa500;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-orange.disabled {
  opacity: 0.2;
}

.swatch-filter-orange {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #ffa500;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #ffa500;
  display: block;
  position: relative;
}

.swatch-filter-orange.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-pink {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fe249a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-pink.disabled {
  opacity: 0.2;
}

.swatch-filter-pink {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #fe249a;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #fe249a;
  display: block;
  position: relative;
}

.swatch-filter-pink.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-purple {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #800080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-purple.disabled {
  opacity: 0.2;
}

.swatch-filter-purple {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #800080;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #800080;
  display: block;
  position: relative;
}

.swatch-filter-purple.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-red {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #f00;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-red.disabled {
  opacity: 0.2;
}

.swatch-filter-red {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #f00;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #f00;
  display: block;
  position: relative;
}

.swatch-filter-red.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-white {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-white.disabled {
  opacity: 0.2;
}

.swatch-filter-white {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #fff;
  display: block;
  position: relative;
}

.swatch-filter-white.disabled {
  opacity: 0.2;
}

/* stylelint-disable-next-line scss/no-global-function-names */
.swatch-circle-yellow {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #ff0;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  display: block;
  position: relative;
}

.swatch-circle-yellow.disabled {
  opacity: 0.2;
}

.swatch-filter-yellow {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 1.38em;
  height: 1.38em;
  background: #ff0;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 0.69em;
  background-color: #ff0;
  display: block;
  position: relative;
}

.swatch-filter-yellow.disabled {
  opacity: 0.2;
}

.swatch-circle-miscellaneous {
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(130, 30, 145)), color-stop(25%, rgb(130, 30, 145)), color-stop(25%, rgb(237, 209, 52)), color-stop(50%, rgb(255, 255, 0)), color-stop(50%, rgb(237, 209, 52)), color-stop(50%, #59ba00), color-stop(76%, #59ba00), color-stop(76%, #111), to(#111)), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(14, 92, 209)), color-stop(50%, rgb(14, 92, 209)), color-stop(50%, rgb(226, 11, 11)), to(rgb(226, 11, 11)));
  background: linear-gradient(0deg, rgb(130, 30, 145) 0, rgb(130, 30, 145) 25%, rgb(237, 209, 52) 25%, rgb(255, 255, 0) 50%, rgb(237, 209, 52) 50%, #59ba00 50%, #59ba00 76%, #111 76%, #111 100%), linear-gradient(0deg, rgb(14, 92, 209) 0, rgb(14, 92, 209) 50%, rgb(226, 11, 11) 50%, rgb(226, 11, 11) 100%);
  background-repeat: repeat-y, repeat;
  background-size: 50% 100%, 100% 100%;
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  border-radius: 1.25em;
  display: block;
  height: 2.5em;
  position: relative;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  width: 2.5em;
}

.swatch-circle-miscellaneous.disabled {
  opacity: 0.2;
}

.swatch-circle-miscellaneous.selected::after {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

body.active {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
}

.site-search {
  position: relative;
  height: 2.1em;
}

@media (min-width: 1200px) {
  .site-search {
    width: 2.5em;
  }
}

@media (min-width: 769px) and (max-width: 991.98px) {
  .site-search {
    width: 2.5em;
  }
}

@media (min-width: 544px) and (max-width: 1024px) {
  .site-search {
    width: 2.5em;
  }
}

.site-search .fa-close,
.site-search .fa-search {
  position: absolute;
  border: none;
  top: 0.5625em;
  right: 0.5625em;
  padding: 0;
  background-color: transparent;
}

.site-search .reset-button {
  position: absolute;
  border: none;
  top: 0.5625em;
  right: 2em;
  padding: 0;
  background-color: transparent;
}

.site-search input {
  padding-right: 2rem;
  height: 100%;
}

@media (max-width: 543.98px) {
  .header-search .site-search {
    display: none;
  }
}

.suggestions-wrapper {
  position: relative;
}

.suggestions {
  display: block;
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fff;
  top: 0;
  right: 0;
  width: 21.875rem;
  z-index: 3;
}

@media (max-width: 543.98px) {
  .suggestions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    width: 100%;
  }
}

.suggestions .swatch-circle {
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  /* stylelint-disable-line property-no-vendor-prefix */
  border-radius: 1.25em;
  border: 0.063em solid rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin-right: 0.313em;
  position: relative;
  margin-right: 0.85em;
}

.suggestions .swatch-circle.color-value[data-selected=true]::after {
  color: #000;
  content: "\f058";
  display: table-caption;
  font-family: FontAwesome, sans-serif;
  font-size: 1.625em;
  left: 0.295em;
  position: absolute;
}

.suggestions .swatch-circle.color-value.selected::after {
  background: #fff;
  border-radius: 50%;
  color: #000;
  content: "\f058";
  display: table-caption;
  font-family: FontAwesome, sans-serif;
  font-size: 1.625em;
  height: 0.75em;
  left: 0.31em;
  line-height: 0.8em;
  position: absolute;
  top: 0.35em;
  width: 0.8em;
}

.suggestions .swatch-circle i.fa-times-circle {
  background: #fff;
  border-radius: 50%;
  height: 0.75em;
  line-height: 0.8em;
  width: 0.8em;
}

.suggestions .header {
  color: #999;
  font-size: 0.875em;
  padding-top: 0.625em;
}

.suggestions .header:not(:first-child) {
  border-top: 1px solid #ccc;
}

.suggestions .item {
  padding-bottom: 0.625em;
}

.suggestions .item .name {
  margin-top: 0.313em;
}

.suggestions .item .ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 543.98px) {
  .suggestions .item {
    padding-bottom: 0.938em;
  }
}

.suggestions .items {
  padding: 0.313em 0;
}

.suggestions .items .list {
  padding: 0;
  list-style-type: none;
}

.suggestions .items .link {
  text-decoration: none;
}

.suggestions .items .link:hover .name {
  text-decoration: underline;
}

.suggestions .category-parent {
  color: #999;
  font-size: 0.875em;
}

.suggestions .selected {
  background-color: #eee;
}

.suggestions .container {
  list-style-type: none;
}

.more-below {
  -moz-border-radius: 1.25em;
  /* stylelint-disable-line property-no-vendor-prefix */
  background: #ccc;
  border: 0.063em solid rgba(0, 0, 0, 0.1);
  border-radius: 1.25em;
  bottom: 1.875em;
  -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3);
  display: none;
  height: 2.5em;
  position: fixed;
  right: 1.875em;
  width: 2.5em;
}

.more-below i.fa-long-arrow-down {
  border-radius: 50%;
  color: #fff;
  display: table-caption;
  height: 0.75em;
  font-size: 1.5rem;
  left: 0.57em;
  line-height: 0.8em;
  position: absolute;
  top: 0.4em;
  width: 0.8em;
}

.serch-show {
  display: block !important;
}

.search_layer_popup_wrap {
  position: absolute;
  width: 460px;
  right: 25px;
  z-index: 3;
  background-color: #fff;
  border: none;
  border: 1px solid #000;
  display: none;
}

.search_layer_popup {
  padding: 25px;
}

.search_layer_popup .search_close_button_wrap {
  text-align: right;
  padding-bottom: 30px;
}

.search_layer_popup .search_close_button_wrap button {
  font-size: 0;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.707' height='14.707' viewBox='0 0 14.707 14.707'%3E%3Cg transform='translate(-1307.44 -241.772)'%3E%3Cpath d='M.5,19.8h-1V0h1Z' transform='translate(1321.794 242.126) rotate(45)'/%3E%3Cpath d='M.5,19.8h-1V0h1Z' transform='translate(1321.794 256.126) rotate(135)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}

.search_layer_popup .input_item input {
  padding-top: 0;
}

.search_layer_popup .search_loading_wrap {
  position: relative;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.search_layer_popup .search_empty {
  display: none;
}

.search_layer_popup .search_loading_wrap {
  position: relative;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  visibility: hidden;
}

.serch_btn {
  border: 0;
  background: none;
  border-radius: 0;
  cursor: pointer;
  color: #000;
}

.click_btn_s {
  border: 0;
  background: none;
  border-radius: 0;
  cursor: pointer;
  color: #000;
  padding-bottom: 7px;
}

.search_layer_popup .best_search {
  text-align: center;
  padding: 20px 0;
  width: 100%;
  overflow: auto;
}

.search_layer_popup .search_loading_wrap {
  position: relative;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.search_layer_popup .search_empty {
  display: none;
}

@media (max-width: 1024px) {
  /* offsetParent가 헤더(fixed)라 height:100%면 헤더 행만 칠해짐 — 100vh로 전체 흰 배경 */
  .search_layer_popup_wrap {
    z-index: 99999;
    top: 0 !important;
    right: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    border: 0;
  }

  /* X 닫기(top:50%)의 세로 중앙 기준을 검색 행 박스로 한정 */
  .search_layer_popup {
    position: relative;
    height: 7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2rem 1.6rem;
  }

  .search_layer_popup > form {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .search_layer_popup .search_close_button_wrap button {
    background: none;
    font-size: 12px;
    width: auto;
  }

  .search_layer_popup .input_item input {
    padding-top: 0.4rem;
    border-bottom: 0;
  }

  .search_layer_popup #searchBarForm .input_box .txt_btn {
    font-size: 0;
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.882' height='20.822' viewBox='0 0 18.882 20.822'%3E%3Cpath d='M7-.5A7.5,7.5,0,1,1-.5,7,7.508,7.508,0,0,1,7-.5Zm0,14A6.5,6.5,0,1,0,.5,7,6.507,6.507,0,0,0,7,13.5Z' transform='translate(0.5 0.5)'/%3E%3Cpath d='M6.1,7.98-.382.323.382-.323,6.861,7.334Z' transform='translate(12.021 12.842)'/%3E%3C/svg%3E");
    background-size: 1.8rem;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* [MOD-header 02] 데스크탑(≥1025px) 검색: 버튼 클릭 시 헤더 우측 [입력][돋보기][X] 인라인 바 슬라이드 */
@media (min-width: 1025px) {
  /* 검색 인터랙션: 클릭 시 우측 아이콘 페이드아웃 → 인라인 바 우→좌 슬라이드, 닫기 시 역복귀 */

  /* 클러스터: transform 기반 묶음 슬라이드(레이아웃 불변, 간격은 base gap 25px) */
  .menu-right .flex_wrap_right li {
    -webkit-transition: opacity 0.2s ease, -webkit-transform 0.23s ease;
    transition: opacity 0.2s ease, transform 0.23s ease;
  }

  /* user/cart: 클릭 시 좌측 슬라이드+페이드아웃, 닫기 시 우측 슬라이드+페이드인 */
  body.active .menu-right .flex_wrap_right li:nth-child(2),
  body.active .menu-right .flex_wrap_right li:nth-child(3) {
    opacity: 0;
    -webkit-transform: translateX(-40px);
    transform: translateX(-40px);
    pointer-events: none;
  }

  /* 검색버튼(돋보기): 우측 41px 슬라이드로 입력·X 사이 배치(transform이라 닫기 시 원위치) */
  body.active .menu-right .flex_wrap_right li:first-child {
    -webkit-transform: translateX(41px);
    transform: translateX(41px);
  }
  /* 검색 활성 시 우측 묶음(ul) 표시 유지 — 돋보기가 가운데 남도록 */
  body.active .menu-right .flex_wrap_right {
    visibility: visible;
  }
  /* 검색버튼 아이콘 색: 흰 배경이므로 원본(검정) */
  body.active .menu-right .flex_wrap_right img {
    -webkit-filter: none !important;
    filter: none !important;
  }

  /* 검색 중 배경 스크롤 잠금 해제(body 인라인 overflow:hidden을 !important로 무력화) */
  body.active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* 검색 활성 시 메가메뉴 패널 강제 숨김 (검색 중 로고/헤더 hover해도 안 보임) */
  body.active .header:hover .menu-left,
  body.active .menu-left {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  /* 검색 중 메인 헤더 배경 흰색 + 로고 검정 */
  body.active .page[data-action="Home-Show"] .header,
  body.active .page[data-action="Home-Show"] .main-menu,
  body.active .page[data-action="Default-Start"] .header,
  body.active .page[data-action="Default-Start"] .main-menu {
    background: #fff;
  }
  body.active .page[data-action="Home-Show"] .logo-home img,
  body.active .page[data-action="Default-Start"] .logo-home img {
    -webkit-filter: none;
    filter: none;
  }

  /* 검색 레이어: 헤더(fixed) 내부 absolute로 헤더 행 종속, 입력창(좌)·X(우). top/height !important로 JS 인라인 top 무력화 */
  .search_layer_popup_wrap {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    right: 0;
    left: auto;
    width: 50%;
    height: var(--header-height) !important;
    padding: 0;
    background: transparent;
    border: none;
    overflow: visible;
    z-index: 100000;
  }
  .search_layer_popup_wrap.serch-show {
    display: block !important;
  }
  .search_layer_popup_wrap .search_layer_popup {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  /* 우 → 좌 슬라이드 인 */
  @-webkit-keyframes searchSlideInRTL {
    from { -webkit-transform: translateX(24px); transform: translateX(24px); opacity: 0; }
    to   { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  }
  @keyframes searchSlideInRTL {
    from { -webkit-transform: translateX(24px); transform: translateX(24px); opacity: 0; }
    to   { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  }

  /* 닫기(X): 헤더 행 우측 끝(검색버튼 우측), 세로 중앙 — 우→좌 슬라이드 */
  .search_layer_popup_wrap .search_close_button_wrap {
    position: absolute;
    top: 0;
    right: 27px;
    height: var(--header-height);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    -webkit-animation: searchSlideInRTL 0.27s ease;
    animation: searchSlideInRTL 0.27s ease;
  }
  .search_layer_popup_wrap .search_close_button_wrap button {
    width: 18px;
    height: 18px;
  }

  /* 입력창: 검색버튼 좌측(헤더 행, 세로 중앙) — 우→좌 슬라이드 */
  .search_layer_popup_wrap form[name="simpleSearch"] {
    position: absolute;
    top: 0;
    right: 113px;
    height: var(--header-height);
    width: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-animation: searchSlideInRTL 0.27s ease;
    animation: searchSlideInRTL 0.27s ease;
  }

  /* 폼 내부 래퍼 너비 100% — fieldset 기본 min-width:min-content 방지 위해 min-width:0 */
  .search_layer_popup_wrap #searchBarForm,
  .search_layer_popup_wrap fieldset,
  .search_layer_popup_wrap .input_item {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .search_layer_popup_wrap .input_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .search_layer_popup_wrap .input_item input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: auto;
    border: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    padding: 6px 8px;
    color: #000;
  }

  /* 플레이스홀더(SEARCH...): 검정 40% (opacity:1로 FF 기본 흐림 방지) */
  .search_layer_popup_wrap .input_item input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; }
  .search_layer_popup_wrap .input_item input::-moz-placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; }
  .search_layer_popup_wrap .input_item input:-ms-input-placeholder { color: rgba(0, 0, 0, 0.4); }
  .search_layer_popup_wrap .input_item input::-ms-input-placeholder { color: rgba(0, 0, 0, 0.4); }
  .search_layer_popup_wrap .input_item input::placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; }

  /* 폼 제출 돋보기(.txt_btn)는 숨김 — 돋보기는 헤더 검색버튼이 담당(Enter로도 제출) */
  .search_layer_popup_wrap #searchBarForm .input_box .txt_btn {
    display: none;
  }
}

.exhi_submenu_name {
  padding-right: 135px;
}

.txt_date,
.txt_title {
  font-size: 18px;
  margin-bottom: 30px;
  letter-spacing: 0.1px;
}

.txt_summary {
  letter-spacing: 0.15px;
}

.main_img {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
}

.main_img img {
  width: 100%;
  height: auto;
  display: block;
}

.exhibition-archiving {
  font-size: 12px;
}

.exhi_img img {
  width: 100%;
}

/* [NEW-exhibition] 커버 영상 — width만 지정, 높이는 영상 비율대로 auto */
.exhi_img video {
  width: 100%;
  display: block;
}

/* [NEW-exhibition] 히어로 커버 영상 풀스크린 버튼 — 버튼 기준점으로 .exhi_img_wrap_first 한정 relative */
.exhi_img_wrap_first .exhi_img {
  position: relative;
}

.exhi-fullscreen-btn {
  position: absolute;
  top: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 999;
  font-size: 12px;
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  background: none;
}

.exhi_img_txt {
  margin-top: 100px;
  padding: 0 25px;
}

.exhi_img_txt .txt_idx {
  margin-bottom: 10px;
}

.exhi_img_txt2 {
  text-align: center;
}

.main_txt_center {
  text-align: center;
}

.exhibition-asset-container .sub_menu_wraps {
  padding-left: 25px;
  padding-right: 25px;
}

#top-exhibition {
  padding-top: 15px;
}

.exhi_img_wrap_fourth .exhi_img_txt {
  margin-top: 30px;
  padding: 0;
  text-align: left;
}

.exhi_img_wrap_fourth .exhi_img_txt .txt_summary {
  margin-bottom: 30px;
}

.exhi_detail .txt_thanks_to {
  margin-top: 10px;
}

.exhibition-archiving {
  padding-left: 25px;
}

.exhi_img_txt2 .exhi_img img {
  width: 100%;
  height: auto;
  display: block;
}

/* technology */
.content-asset-teathology {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 10px;
  padding: var(--header-height) 25px 0;
}

.tea_reservation_title img {
  width: 20px;
  height: 20px;
  margin-left: auto;
}

.tea_thology {
  grid-column: 1 / span 12;
}

.tea {
  grid-column: 1 / span 6;
}

.tea_thology>.thology_wrap {
  gap: 0;
}

/* TEA THOLOGY 서브내비: 데스크탑·모바일 모두 브레드크럼(.sub_menu_wraps) + 3depth 탭만 노출 */

.tea_text_sec {
  margin: 0 0 0 15px !important;
}

.sub_menu_wraps {
  display: flex;
  align-items: center;
  column-gap: 0;
  height: auto;
  padding: 10px 0;
}

.sub_menu_wraps>li {
  font-size: 12px;
}

.sub_menu_wraps>li.active {
  text-decoration: none;
}

.sub_menu_wraps>li a {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.sub_menu_wraps>li+li {
  margin-right: 0;
}

/* 1depth · 2depth 사이 사각 dot 구분자 (2x2px) */
.sub_menu_wraps>li+li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 10px;
  background: rgba(0, 0, 0, 0.4);
  vertical-align: middle;
}

.sub_menu_wraps>li:first-child {
  width: auto;
  margin-right: 0;
}

/* 3depth — 18px, 활성 #000, hover underline, 항목 간 gap 20px */
.sub_menu_3depth {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
}

.sub_menu_3depth>li {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-left: 16px;
  padding-right: 4px;
}
.sub_menu_3depth>li:first-child {
  padding-left: 0;
}

.sub_menu_3depth>li a {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.sub_menu_3depth>li.active a {
  color: #000;
}

.sub_menu_3depth>li a:hover {
  text-decoration: underline;
}

/* PLP 서브메뉴(Search-Show menuItem) — 1·2depth, 콘텐츠 .sub_menu_wraps와 동일 스펙 */
.sub_flex_wrap {
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0;
  height: unset;
  padding-top: 10px;
  padding-bottom: 10px;
  list-style: none;
}

.sub_flex_wrap>li {
  font-size: 12px;
}

.sub_flex_wrap>li+li {
  margin-right: 0;
}

.sub_flex_wrap>li a {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

/* 1depth · 2depth 사이 사각 dot 구분자 (2x2px) */
.sub_flex_wrap>li+li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 10px;
  background: rgba(0, 0, 0, 0.4);
  vertical-align: middle;
}

.tea_submenu_kor-sec {
  max-width: 110px !important;
}

.sub_tea_thology_text {
  padding: 20px 25px 55px;
}

.sub_tea_thology_text a {
  text-decoration: none;
}

.tea_reservation {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.tea_reservation+.tea_reservation {
  border-top: 0;
}

.tea-btn1 {
  line-height: 35px;
}

.tea-btn1 {
  padding: 10px 20px;
  font-size: 12px;
  border: 1px solid #000;
  background-color: white;
  cursor: pointer;
  height: 35px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  width: 100%;
}

.tea-btn2 {
  padding: 10px 20px;
  font-size: 12px;
  border: 1px solid #000;
  background-color: #000;
  cursor: pointer;
  height: 35px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  width: 100%;
  color: #fff;
  line-height: 35px;
}

.tea-btn2 {
  color: #fff;
}

.tea-btn3 {
  display: none;
}

.tea-btn3 {
  padding: 10px 20px;
  font-size: 12px;
  border: 1px solid #000;
  background-color: white;
  cursor: pointer;
  height: 35px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  width: 100%;
  line-height: 35px;
}

.tea_detail_btn>div {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 calc(33.333% - 20px);
  flex: 1 1 calc(33.333% - 20px);
  max-width: 410px;
  min-width: 120px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.tea_detail_a {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
}

.spaceJapan_title {
  padding-top: 30px;
}

.tea_reservation_title {
  background-color: #fff;
  border: none;
  padding-top: 30px;
  font-size: 18px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 24px;
}

.space_reservation_title {
  padding-top: 30px;
}

.details-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 30px;
}

.address,
.contact,
.hours,
.btn1,
.btn2,
.btn3 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 calc(33.333% - 20px);
  flex: 1 1 calc(33.333% - 20px);
  width: 410px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.details-content>div>p:first-child {
  margin-bottom: 10px;
}

.tea-btn2 {
  background-color: black;
  color: white;
}

.tea_detail_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0 0;
}

/*space*/
.content-asset-space {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: var(--header-height) 25px 0;
}

.content-asset-space .tea_reservation {
  margin-top: 20px;
}

.content-asset-space .tea_reservation+.tea_reservation {
  margin-top: 0;
}

.tea_View {
  border: 1px solid #000;
  background-color: white;
  cursor: pointer;
  height: 35px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  width: 33%;
  border-radius: 0;
  color: #000;
  line-height: 35px;
  text-decoration: none;
}

.space-btn-view {
  width: 33% !important;
}

.title_image img {
  width: 100%;
  height: 100%;
  display: block;
}

.tea_reservation_detail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.tea_reservation_detail+.tea_reservation_detail {
  margin-top: 50px;
}

.tea_reservation_detail.col {
  padding-left: 0;
  padding-right: 0;
}

.title_image {
  grid-column: 1 / span 12;
  margin-left: -25px;
  margin-right: -25px;
}

.tea_details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: left;
  margin: 0 auto;
}

.tea_thology_detail_ex {
  grid-column: 4 / span 6;
  margin-top: 100px;
}

.tea_thology_ex .title {
  font-size: 18px;
}

.tea_thology_ex p {
  margin-bottom: 50px;
}

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

.tea_thology_detail_ex .bottom_button .bottom_button_group {
  grid-column: 2 / span 4;
}

.tea_thology_detail_ex .bottom_button .bottom_description {
  grid-column: 4 / span 2;
}

.tea_reservation_detail p {
  margin-top: 10px;
  font-size: 12px;
}

.tea_reservation_detail div>p:first-child {
  margin-top: 0;
}

.tea_reservation_detail .time,
.tea_reservation_detail .address {
  grid-column: 1 / span 2;
  width: unset;
}

.tea_reservation_detail .price,
.tea_reservation_detail .contact {
  grid-column: 3 / span 2;
  width: unset;
}

.tea_reservation_detail .price.col2 {
  grid-column: 3 / span 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 10px;
}

.tea_reservation_detail .price.col2>p:first-child {
  grid-column: 1 / span 4;
}

.tea_reservation_detail .price.col2>p:nth-child(2) {
  grid-column: 1 / span 2;
}

.tea_reservation_detail .price.col2>p:nth-child(3) {
  grid-column: 3 / span 2;
}

.tea_reservation_detail .hours {
  grid-column: 5 / span 2;
  width: unset;
}

.bottom_button {
  padding-top: 200px;
}

.bottom_button_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}

.lang_kor {
  display: none;
}

.back-to-list {
  color: black;
  border: 1px solid black;
  background-color: white;
  width: 410px;
  height: 35px;
  text-align: center;
  font-size: 12px;
  border-radius: 0;
  cursor: pointer;
  line-height: 35px;
}

/*tec details informations */
.bottom_button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
}

.make-reservation {
  color: white;
  background-color: black;
  border: none;
  width: 410px;
  height: 35px;
  text-align: center;
  font-size: 12px;
  border-radius: 0;
  cursor: pointer;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.content-list {
  padding-left: 0;
  margin: 0;
}

.flex-container p {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 410px;
}

.content-item {
  padding-left: 10px;
  text-indent: -10px;
  margin-bottom: 10px;
  list-style: none;
}

.pc_only {
  display: block;
}

.mo_only {
  display: none;
}

.dropdown-item {
  font-size: 13px;
}

.content-asset-teathology {
  margin-bottom: 15px;
}

.exb_sub_menu_wrapse {
  padding-left: 25px;
  width: 100%;
  height: 35px !important;
  line-height: 50px;
}

.exhibition-asset-container .main_img_text_wrap:last-child {
  padding-bottom: 60px;
}

.txt_detail_title {
  font-size: 18px;
  margin-bottom: 37px;
}

.exhi_mobile {
  display: none;
}

.exb_sub_menu_wrapse {
  display: block;
}

.mo_only {
  display: none;
}

.pc_only {
  display: block;
}

.tea_thology_bukchon {
  grid-column: 4 / span 6;
  margin-top: 100px;
}

.tea_thology_bukchon .bottom_button {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tea_thology_bukchon .bottom_button .bottom_button_group {
  grid-column: 2 / span 1;
}

.tea_thology_bukchon .bottom_button .bottom_button_group .back-to-list {
  width: 100%;
}

.sub_menu_wrapspace {
  padding-left: 25px;
}

#mo_list_toggleMenuBtn {
  background: transparent;
  border: none;
}

@media only screen and (min-width: 1025px) {
  #maincontent {
    min-height: calc(100vh - 160px - 405px);
  }

  .tea_detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 30px;
  }

  .space_thology_text {
    padding: 0 25px !important;
  }

  .main_img_text_wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    padding: 8px 25px;
  }

  .main_img {
    grid-column: 1 / span 8;
  }

  .main_img_txt {
    grid-column: 9 / span 4;
    padding: 10px 0 25px 30px;
  }

  .main_img_txt a {
    font-size: 18px;
    line-height: 18px;
  }

  [class^="exhi_img_wrap_"] {
    margin-bottom: 100px;
  }

  .exhi_img_wrap_third .txt_summary {
    margin-bottom: 60px;
  }

  .exhi_img_txt2 {
    padding-top: 100px;
  }

  .exhi_img_wrap_third {
    display: flex;
    align-items: center;
  }

  .exhi_img_wrap_third>div {
    flex: 1 1 40%;
  }

  .exhi_img_wrap_fourth {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 142px;
    padding: 0 25px;
  }

  .fourth_txt_wrap {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 calc(33.33% - 20px);
    flex: 1 1 calc(33.33% - 20px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
  }

  .txt_summary {
    margin-bottom: 10px;
  }

  .exhi_detail .bottom_button {
    padding-top: 130px !important;
  }

  .exhi_img_wrap_five {
    margin-bottom: 0;
  }

  .exhi_img_wrap_five+.bottom_button {
    padding-bottom: 180px;
  }
}

.layout_mbCheckPassword .passsword_form {
  grid-column: 4 / span 4;
  display: unset;
}

.layout_mbCheckPassword .membar_form {
  gap: 10px;
}

.layout_odCheckout .item_wrap.checkout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 10px;
  max-width: unset;
}

.layout_odCheckout .item_wrap.checkout .item_body {
  grid-column: 3 / span 4;
  width: unset;
}

.layout_odCheckout .item_wrap.checkout .item_body .product_info {
  padding-top: 0;
}

.layout_odCheckout .item_wrap.checkout .item_body .product_item .quantity {
  margin-top: 30px;
}

.layout_odCheckout .item_wrap.checkout .item_body .product-summary-block+.sub_title {
  padding-top: calc(80px - 1rem);
}

.layout_odCheckout .item_wrap.checkout .item_body .form_list.column--min {
  max-width: unset;
  width: 50%;
}

@media only screen and (max-width: 1440px) {
  .layout_odCheckout .item_wrap.checkout .item_body .product-summary-block + .form_list.column--min {
    width: 100%;
  }
}

.layout_odCheckout .item_wrap.checkout .single-shipping .check_group .check_item {
  width: 100%;
}

.layout_odCheckout .item_wrap.checkout .item_summary {
  grid-column: 8 / span 3;
  width: unset;
}

.layout_odCheckout .check_item label {
  margin-bottom: 0;
}

.layout_odCheckout .checkout-outer.card.customer-section .card-body {
  padding: 0;
}

.layout_odCheckout .shipping-content .manual-address-fields .input_item .row .col-sm-6 {
  padding-right: 0;
  padding-left: 0;
}

.global_address_wrap>div.form-group+div.form-group,
.japan_address_wrap>div.form-group+div.form-group {
  margin-top: 6px;
}

.card.customer-summary .input_box {
  justify-content: space-between;
}

.card.customer-summary .input_box .edit-button {
  text-decoration: underline;
}

.card.customer-summary .input_box .summary-section-label {
  font-weight: 400;
}

.payment-form {
  width: 100%;
}

.payment-form .paypal-checkout-button {
  max-height: 36px;
  background-color: #000;
  overflow: hidden;
}

.input_item.saved-address-block,
.manual-address-fields>* {
  margin-top: 40px;
}

.removeMember .removeMember_inner {
  grid-column: 4 / span 4;
}

.removeMember .removeMember_inner .removeTitle {
  padding-bottom: 0;
}

.registerCompleted .btn_wrap {
  padding-top: 0;
}

#reservation-create-div .check_group {
  flex-flow: unset;
}

@media only screen and (max-width: 1024px) {
  /* 모바일 서브메뉴: 레이아웃은 데스크탑과 동일(grid/width 제거), 여백만 조정 */
  .sub_menu_wraps {
    padding-top: 2rem;
    padding-bottom: 0.8rem;
  }

  .tea_thology .sub_menu_wraps {
    padding: 2rem 1.6rem 0.8rem 1.6rem;
  }


  /* 브레드크럼 가로 스크롤 우측 끝 여백 — 마지막 항목 우측 16px */
  .sub_menu_3depth > li:last-child {
    padding-right: 1.6rem;
  }

  /* SPACE·TEA THOLOGY 브레드크럼 3depth 가로 스크롤: 컨테이너 우측 패딩 제거(여백은 li:last-child) */
  .content-asset-space .tea_thology,
  .content-asset-teathology .tea_thology {
    padding-right: 0;
  }

  /* 3depth 좌측 화면 끝까지 — 좌측 패딩 16px을 음수 마진으로 상쇄, 첫 항목만 16px 인셋 */
  .sub_menu_3depth {
    margin-left: -1.6rem;
  }

  .sub_menu_3depth > li:first-child {
    padding-left: 1.6rem;
  }

  /* 3depth 가로 스크롤바 숨김 — 스크롤 기능은 유지(overflow-x:auto) */
  /* Firefox / IE/Edge */
  .sub_menu_3depth {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Chrome/Safari */
  .sub_menu_3depth::-webkit-scrollbar {
    display: none;
  }

  [class^="exhi_img_wrap_"] {
    margin-bottom: 5rem;
  }

  .exhibition-asset-container .sub_menu_wraps {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .exhibition-asset-container .exhi_img_txt {
    margin-top: 5rem;
    padding: 0 1.6rem;
  }

  .exhibition-asset-container .exhi_img_txt .txt_idx {
    margin-bottom: 0;
  }

  .exhibition-asset-container .exhi_img_txt .txt_detail_title {
    margin-bottom: 0;
  }

  .exhibition-asset-container .exhi_img_wrap_first {
    padding-top: 5rem;
  }

  .exhi_detail.exhibition-asset-container .exhi_img_wrap_first {
    padding-top: 0;
  }

  .mo_only {
    display: block;
  }

  .pc_only {
    display: none;
  }

  .content-teathology-mob,
  .seongu-asset-teathology {
    padding: 6rem 0 0;
    gap: 0;
  }

  .content-teathology-mob .title_image,
  .seongu-asset-teathology .title_image {
    margin: 0;
  }

  .main_txt_common {
    padding: 0 1rem 5rem 1rem !important;
  }

  .exhi_mobile {
    display: block;
    position: fixed;
    background-color: #fff;
    padding-left: 1.6rem;
    width: 100%;
    height: 5rem !important;
    line-height: 5rem;
  }

  #top-exhibition {
    padding-top: 0;
  }

  .main_img_txt {
    padding: 1.6rem 1.6rem 4rem;
    text-align: center;
  }

  .main_txt_common .txt_summary {
    font-size: 1.2rem;
  }

  .txt_title {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    letter-spacing: 0.015rem;
  }

  .txt_date {
    margin-bottom: 1rem;
    font-size: 1.1rem;
  }

  .txt_summary {
    font-size: 1.2rem;
  }

  .exb_sub_menu_wrapse {
    display: none;
  }

  .exhi_img_wrap_sec {
    margin-bottom: 6rem;
  }

  .exhi_img_wrap_sec .exhi_img_txt2,
  .exhi_img_wrap_third .exhi_img_txt.exhi_img_txt_center {
    padding: 5rem 1.6rem 0;
  }

  .exhi_img_wrap_third {
    margin-bottom: 9.8rem;
  }

  .exhi_img_wrap_third .txt_summary+.txt_long {
    margin-top: 6rem;
  }

  .exhi_img_wrap_third .exhi_img_txt.exhi_img_txt_center {
    padding-top: 10.5rem;
  }

  .exhi_img_wrap_fourth {
    padding-bottom: 0;
  }

  .exhi_img_wrap_fourth .exhi_img_txt {
    margin: 1.5rem 0 3.4rem;
    padding: 0 1.6rem;
  }

  .exhi_img_wrap_five {
    margin-bottom: 0;
  }

  .txt_summary {
    padding-bottom: 1rem;
  }

  .exhibition-asset-container .txt_summary {
    padding-bottom: 0;
  }

  .txt_detail_title {
    padding: 1rem 0;
  }

  .txt_long {
    font-size: 1.1rem;
  }

  .txt_summary+.txt_long {
    margin-top: 5rem;
  }

  .exhi_img_wrap_fourth .exhi_img_txt .txt_summary+.txt_long {
    margin-top: 0;
  }

  .tea {
    grid-column: 1 / span 12;
  }

  .tea_thology_details {
    margin: 0 0 !important;
  }

  /* .sub_menu_wraps / .tea_submenu_* 는 모바일·데스크탑 동일 — 모바일 전용 grid 레이아웃 제거 */

  .tea_reservation_title {
    font-size: 1.2rem;
    padding: 2rem 0;
  }

  .sub_tea_thology_text {
    width: 100%;
    padding: 0 1.6rem 3.8rem;
  }

  .tea_reservation {
    width: 100% !important;
    padding-top: 0;
  }

  .details-content>div {
    padding-bottom: 1.5rem;
  }

  .details-content>div:last-child {
    padding-bottom: 0;
  }

  .details-content>div>p:first-child {
    margin-bottom: 0;
  }

  .details-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    gap: 0;
    padding-top: 0.5rem;
  }

  .tea_detail {
    padding-top: 0.5rem;
  }

  .tea_detail_btn {
    display: flex;
    flex-flow: column;
    margin: 2.5rem 0 2rem 0;
  }

  .tea_detail_btn>div {
    max-width: unset;
  }

  .tea_detail_btn>.placeholder {
    display: none;
  }

  .tea_View {
    width: 100%;
  }

  .tea_thology_ex {
    font-size: 1.2rem;
  }

  .tea_thology_ex p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
  }

  .tea_thology_ex .title {
    font-size: 1.2rem;
  }

  .tea_reservation_detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
  }

  .tea_reservation_detail+.tea_reservation_detail {
    margin-top: 3rem;
  }

  .tea_reservation_detail.col {
    flex-direction: unset;
    justify-content: space-between;
    gap: 0;
  }

  .tea_reservation_detail.mo_row {
    flex-direction: column;
    gap: 1.5rem;
  }

  .tea_reservation_detail.mo_row .col2 {
    display: flex;
    flex-direction: column;
  }

  .tea_reservation_detail>div>p {
    margin-top: 0;
  }

  .tea_thology {
    width: 100% !important;
  }

  .bottom_button_group {
    width: 100%;
  }

  .bottom_mob_button {
    padding-top: 0;
  }

  .back-to-list {
    width: 100%;
  }

  .bottom_button {
    padding-top: 5rem;
  }

  .exhi_img_wrap_five + .bottom_button {
    padding: 5rem 1.6rem 0 1.6rem;
  }

  .space_thology_text {
    padding: 0 1.6rem;
  }

  .title_image img {
    width: 100%;
    height: auto;
  }

  .bottom_button_group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .content-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
  }

  .back-to-list,
  .make-reservation {
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
    max-width: none;
  }

  .tea_thology_bukchon {
    grid-column: 1 / span 12;
    margin: 4rem 1.6rem 0;
  }

  .tea_thology_bukchon .bottom_button {
    display: block;
    padding: 4rem 0 !important;
    max-width: unset;
  }

  .tea_thology_text {
    margin: 0 1.6rem;
  }

  .sub_menu_wrapspace {
    position: relative;
    top: 5.7rem;
    width: 95%;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .spacethology {
    height: 5rem;
  }

  .sub_menu_wrapspace {
    height: 5rem !important;
    width: 99% !important;
    padding-left: 1rem !important;
  }

  .space_reservation_title {
    padding-right: 0;
  }

  .mo_prouct_list_toggle {
    display: block !important;
  }

  .mo_prouct_list_toggle .mo_toggle_menu {
    position: fixed;
    top: 6rem;
    left: 0;
    width: 100%;
    height: 5.2rem;
    background-color: #fff !important;
    display: none;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.6rem;
    z-index: 1000;
  }

  #list_moToggleMenu {
    background: none;
    border: none;
    cursor: pointer;
  }

  #list_menuTitle {
    font-size: 1.2rem;
    color: black;
  }

  #list_mobileSubMenu li {
    padding: 1rem 0;
    list-style: none;
  }

  #list_mobileSubMenu {
    position: fixed;
    top: 11.2rem;
    left: 0;
    width: 100%;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.3s ease-in-out;
    transition: max-height 0.3s ease-in-out;
    z-index: 999;
    padding-left: 1.5rem;
  }

  .lang_kor .active {
    text-decoration: underline;
  }

  .address,
  .contact,
  .hours,
  .btn1,
  .btn2,
  .btn3 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 calc(33.333% - 2rem);
    flex: 1 1 calc(33.333% - 2rem);
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .tea_thology_detail_ex {
    grid-column: 1 / span 12;
    margin: 4rem 1.6rem 0;
    display: flex;
    flex-direction: column;
  }

  .tea_thology_detail_ex>.tea_details {
    margin: unset;
  }

  .tea_thology_detail_ex .tea_thology_ex p {
    margin-bottom: 3rem;
  }

  .tea_thology_detail_ex>.bottom_description .flex-container {
    gap: 0;
  }

  .tea_thology_detail_ex>.bottom_button {
    order: 2;
    display: block;
    width: 100%;
    max-width: unset;
    padding-top: 4rem;
  }

  .tea_thology_detail_ex>.bottom_button .bottom_description {
    padding-top: 4rem;
  }

  .spaceJapan_tea {
    margin-top: 1rem;
    padding: 0 1.6rem;
  }

  .space_tea_thology_text {
    padding-bottom: 10rem !important;
  }

  .space-btn-view {
    width: 100% !important;
  }

  .content-asset-space {
    padding: 6rem 0 0;
    gap: 0;
  }

  .content-asset-space .tea_reservation {
    margin-top: 0;
  }

  #reservation-form {
    padding-top: 9rem;
  }

  .contents-form {
    padding: 1rem !important;
  }

  .to_top {
    padding-top: 6rem;
  }

  .orderDetailcontent .item_wrap>.item_summary>.btn_wrap.full {
    padding-top: 4rem;
  }

  .global_address_wrap>div.form-group+div.form-group,
  .japan_address_wrap>div.form-group+div.form-group {
    margin-top: 1.1rem;
  }

  .modal .modal-body+.btn_wrap {
    display: flex;
  }

  .modal .modal-body+.btn_wrap>* {
    flex: 1;
  }

  .removeMember .removeMember_inner {
    padding-top: 4rem;
  }

  .removeMember .removeMember_inner .btn_wrap>a {
    min-width: 100%;
  }

  .registerCompleted .removeTitle {
    padding-bottom: 8rem;
  }

  .modal#reservation-completed-div{
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .modal#reservation-completed-div .modal-dialog{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .modal#reservation-completed-div .receipt-content {
    width: unset;
    max-height: unset;
    padding: 2rem;
  }
}

@media only screen and (max-width: 492px) {
  .sub_tea_thology_text br {
    display: none;
  }
}

@media only screen and (min-width: 493px) {
  .sub_tea_thology_text br {
    display: none;
  }
}

.exhi_img_wrap_third .exhi_img_txt {
  margin-top: 0;
}

.exhi_img_wrap_third .exhi_img_txt.exhi_img_txt_center {
  text-align: center;
  margin-bottom: 5px;
}

.form-group.required .form-control-label::before {
  content: "*";
  color: #c00;
}

.account-image {
  background-image: "url(../../images/account.jpg)";
  background-position-y: 40%;
}

body {
  line-height: 18px;
}

.card-footer>a {
  color: var(--skin-primary-color-1);
  text-decoration: underline;
}

.card-header>a {
  color: var(--skin-primary-color-1);
  float: right;
  text-decoration: underline;
}

.card-info-group p {
  margin-bottom: 0;
}

.card-info-group div {
  margin-bottom: 1rem;
}

.card-info-group div:last-child {
  margin-bottom: 0;
}

.order-history-control h2,
.order-history h2 {
  font-weight: bold;
  margin-top: 0.5rem;
}

.dashboard-order-card-image {
  width: 7rem;
  padding-right: 1rem;
}

.dashboard-order-card-footer-columns:last-child {
  text-align: right;
}

.dashboard-order-card-footer-value {
  font-weight: bold;
  font-size: 1rem;
}

.card-header h2,
.card-header h3 {
  font-size: 12px;
  margin-bottom: 0;
  color: #000;
}

.myshopMain {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-top: 125px;
  padding-left: 25px;
  padding-right: 25px;
  gap: 10px;
}

.myshop-sidebar-left {
  grid-column: 1 / span 3;
}

.llf-title {
  padding-bottom: 45px;
}

.myshop-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 15px;
}

.myshop-menu li {
  display: block;
  font-size: 12px;
}

.myshop-menu li a.active {
  color: #000;
}

.myshop-menu li a {
  display: block;
  text-decoration: none;
  border-radius: 4px;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  white-space: nowrap;
  font-size: 12px;
  color: #000 !important;
  letter-spacing: 0.3px;
}

.overview_title {
  padding-bottom: 60px;
}

.password_title {
  padding-bottom: 60px;
}

.order_title {
  padding-bottom: 60px;
}

.overview_title p {
  font-size: 12px;
  margin: 0;
  white-space: nowrap;
}

.welcome-message-myshop {
  padding-bottom: 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  font-size: 12px;
}

.welcome-message-myshop p {
  font-size: 18px;
}

.grade {
  padding-top: 7px;
  font-size: 12px;
}

.welcome-message-myshop .grade {
  padding-top: 10px;
}

.info-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.info-summary .info-item {
  grid-column: 1 / span 1;
  text-align: left;
}

.info-summary .info-item+.info-item {
  grid-column: 2 / span 1;
}

.info-summary .info-item p {
  font-size: 12px;
  padding-bottom: 20px;
}

.data-summenry_shop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}

.data-summenry_shop+.data-summenry_shop {
  margin-top: 7px;
}

.info-item span {
  font-size: 18px;
  line-height: 23px;
}

.membership_inner>.myshop-sidebar-left {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 369px;
  flex: 0 0 369px;
}

.membership_title {
  padding-bottom: 58px;
}

.hr_wrap {
  padding: 19px 0;
  border: 1px solid #000;
  border-width: 1px 0;
}

.info_list>li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 27px;
  list-style: none;
}

.info_list>.listtitle {
  width: 16%;
}

.info_list {
  margin-top: 8px;
}

.info_list>li+li {
  margin-top: 8px;
}

.membership .listgrade+.info_list {
  margin-top: 10px;
}

.membarline {
  padding-bottom: 5px;
}

.membarSubtitle {
  padding-bottom: 60px;
}

.listtitle {
  width: 16%;
}

.welcome-message-member p {
  font-size: 13px;
}

.Membargrade {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.Membarcount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.myshop_content p,
.myshop_content span {
  font-size: 12px;
}

.Membargrade span,
.Membarcount span {
  width: 150px;
  padding-bottom: 5px;
}

.list-indent {
  list-style: none;
  line-height: 16px;
}

li.wishlist {
  padding-bottom: 60px;
}

.myshop-content {
  grid-column: 4 / span 6;
}

.overview_title {
  display: block;
}

.myshop-menu>.llf-title {
  display: block;
  letter-spacing: 0.3px;
}

.myshop-menu>.active {
  text-decoration: underline;
}

.myshop-menu>.is-current {
  display: block;
}

.mobile-coupons-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px;
  text-align: left;
}

.mobile-coupons-menu p {
  margin: 0;
}

.logout_btn_l {
  text-decoration: underline;
}

.myshop_mileage_right_right {
  grid-column: 4 / span 6;
}

.myshop_mileage_right_right .content {
  padding: 0;
}

.myshop_mileage_right_right .content .no_items {
  padding-bottom: 0;
}

.myshop_mileage_right_right .content .list_table .point_item {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 20px 0;
}

.myshop_mileage_right_right .content .list_table .point_item>* {
  width: unset;
}

.myshop_mileage_right_right .content .list_table .point_item>span:first-child {
  grid-column: 1 / span 1;
}

.myshop_mileage_right_right .content .list_table .point_item>span:nth-child(2) {
  grid-column: 2 / span 3;
}

.myshop_mileage_right_right .content .list_table .point_item>span:last-child {
  grid-column: 5 / span 2;
}

.myshop_mileage_right_right .content .list_table .point_item>span.col2 {
  display: none;
}

.myshop_mileage_right_right .content .btn_primary.completePoint {
  margin-top: 60px;
}

.myshop-historylist p {
  padding: 0 0;
  font-size: 12px;
  text-align: left;
}

.paginate_poinhistory {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.paginate_count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  list-style: none;
}

.paginate_count li {
  list-style: none;
}

.paginate_poinhistory a {
  text-decoration: none;
}

.myshop_info_detail,
.myshopPassword {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-height: calc(100vh - 600px);
  padding: 125px 25px 0 25px;
  gap: 10px;
}

.myshop_info_right {
  grid-column: 4 / span 4;
}

.myshop-sidebar-mob-left {
  display: none;
}

.myshop-sidebar-mob-left.show {
  display: block;
}

.dropdown-select-order {
  border: none;
  border-bottom: 1px solid #000;
  padding: 0 20px 0 0;
  color: #000;
  margin-right: 30px;
  height: 40px;
  margin-top: 3px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.myorder_term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 0 0;
}

.myorder_term a {
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;
}

@media only screen and (min-width: 1025px) {

  .logout_btn_l,
  .myshop-menu {
    display: flex !important;
  }

  .Membargrade {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .Membarcount {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .Membarcomment {
    padding-top: 140px;
  }

  .paginate_poinhistory {
    margin-top: 60px;
  }
}

@media only screen and (max-width: 1024px) {
  /* 계정 메뉴 바(.mobile-coupons-menu) 위치 기준 — 이 padding-top이 헤더 bottom 정렬을 정함 */
  .myshopMain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    padding: 6.8rem 1.6rem 0 1.6rem;
  }

  .myshop_info_right {
    margin-right: 0;
    padding: 18px 6px 0 6px;
    width: 100%;
  }

  .myshop_info_detail {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    padding-top: 92px;
  }

  .overview_title {
    display: none;
  }

  /* 콘텐츠는 fixed 계정 메뉴 바(.mobile-coupons-menu, 높이 5.6rem) 아래에서 시작 */
  .myshop-content {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding: 5.6rem 0 1rem;
    width: 100%;
    margin-top: 0;
  }

  .welcome-message-myshop p {
    font-size: 1.8rem;
    line-height: 18px;
  }

  .info-summary {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    width: 100%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    gap: 60px;
  }

  /* padding-top 6.8rem = 헤더 높이, 계정 메뉴 바의 정적 위치 기준 */
  .membership_outer {
    padding: 6.8rem 0 0 0;
  }

  .membership_outer>.myshopMain {
    padding-top: 0;
  }

  /* 콘텐츠는 fixed 계정 메뉴 바(높이 5.6rem) 아래에서 시작 */
  .membership_outer>.myshopMain .myshop-content {
    padding-top: 0;
    margin-top: 5.6rem;
  }

  /* 콘텐츠는 fixed 계정 메뉴 바(높이 5.6rem) 아래에서 시작 */
  .myshopPassword .passsword_form,
  .myshopMain .myshop-sidebar-right {
    margin-top: 5.6rem;
  }

  .myshop-sidebar-left {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-right: 0;
    margin-bottom: 20px;
    position: static;
    padding: 10px;
    width: 100%;
    text-align: left;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .grade {
    padding-top: 10px;
  }

  .myshop-menu>.llf-title {
    display: none;
  }

  .myshop-menu>.is-current {
    display: none;
  }

  .mobile-coupons-menu {
    top: unset;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5.6rem;
    width: 100%;
    margin-top: 0;
    padding: 0;
    background-color: #fff;
    border-top: 1px solid #000;
  }

  .mobile-coupons-menu #menuTitle {
    display: block;
  }

  .mobile-coupons-menu p {
    padding-left: 1.6rem;
  }

  .mobile-coupons-menu #toggleMenuBtn {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .mobile-coupons-menu #toggleMenuBtn::after {
    content: "";
    position: absolute;
    right: 1.6rem;
    top: calc(50% - 0.35rem);
    width: 1.3rem;
    height: 0.7rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.707' height='8.061' viewBox='0 0 14.707 8.061'%3E%3Cpath d='M4667.148,3013.231l7,7,7-7' transform='translate(-4666.795 -3012.877)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/contain;
    transition: 0.3s ease-out;
  }

  .mobile-coupons-menu #toggleMenuBtn.is-active::after {
    transform: rotate(180deg);
  }

  .mobile-coupons-menu #toggleMenuBtn>img#menuMobileToggleIcon {
    display: none;
  }

  #menuMobileToggleIcon {
    height: auto;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  }

  /* 드롭다운 패널: 헤더 아래(미배너 6.8rem, 배너 9.8rem)에서 시작 + padding-top 5.6rem(바 높이) */
  .myshop-sidebar-mob-left {
    overflow: hidden;
    position: fixed;
    top: 6.8rem;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-height: calc(100vh - 6.8rem);
    max-height: calc(100svh - 6.8rem);
    margin: 0;
    padding: 5.6rem 1.6rem 0 1.6rem;
    background-color: #fff;
    -webkit-transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    opacity: 1;
    z-index: 999;
  }

  /* 배너 표시 시 패널 top = 헤더 bottom(배너 3rem + 헤더 6.8rem = 9.8rem) */
  body.h-banner-show .myshop-sidebar-mob-left {
    top: 9.8rem;
    max-height: calc(100vh - 9.8rem);
    max-height: calc(100svh - 9.8rem);
  }

  .Membarcomment {
    padding-top: 100px;
    list-style: none;
    padding-left: 12px;
    text-indent: -14px;
    line-height: 1.5;
  }

  .myshop-historylist p {
    padding: 0 0;
    font-size: 12px;
    text-align: left;
  }

  /* 콘텐츠는 fixed 계정 메뉴 바(높이 5.6rem) 아래에서 시작 */
  .myshop_mileage_right_right {
    padding-top: 5.6rem;
  }

  .myshop_mileage_right_right .content .list_table .point_item {
    display: flex;
    flex-direction: column;
  }

  .myshop_mileage_right_right .content .list_table .point_item:first-child {
    padding-top: 0;
  }

  .myshop_mileage_right_right .content .btn_primary.completePoint {
    width: 100%;
  }

  .myshop-historylist {
    margin-bottom: 2rem;
  }

  .myshop-historylist p {
    padding: 17px 0 11px 0;
    font-size: 12px;
    text-align: left;
  }
}

.mobile-coupons-menu button {
  display: inline;
  background: none;
  border: none;
  float: right;
  cursor: pointer;
}

.profile-back-to-account-link {
  color: var(--skin-primary-color-1);
  text-decoration: underline;
  display: block;
  text-align: center;
}

.tracking-consent-btn {
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.form-control {
  border-radius: 0;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* change password */
.find_result {
  padding: 10px 8px;
}

.find_result>div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  list-style: none;
}

.input_item.hr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.find_result>div+div {
  margin-top: 15px;
}

.find_result>div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
}

.chnagepassword_btn_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding-top: 30px !important;
}

.find_result~.chnagepassword_btn_wrap {
  margin-left: 8px;
  margin-right: 8px;
}

.input_item input {
  padding: 4px 0;
  border: 1px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-width: 0 0 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 12px;
  color: #000;
}

input::-webkit-input-placeholder {
  color: #000;
  font-size: 12px;
}

input::-moz-placeholder {
  color: #000;
  font-size: 12px;
}

input:-ms-input-placeholder {
  color: #000;
  font-size: 12px;
}

input::-ms-input-placeholder {
  color: #000;
  font-size: 12px;
}

input::placeholder {
  color: #000;
  font-size: 12px;
}

.input_item select {
  height: unset;
  padding: 4px 0;
  padding-right: 30px;
  border: 1px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-width: 0 0 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 12px;
  color: #000;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.707' height='8.061' viewBox='0 0 14.707 8.061'%3E%3Cpath d='M4667.148,3013.231l7,7,7-7' transform='translate(-4666.795 -3012.877)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: 100% 50%;
  background-size: 13px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.find_result .input_item.hr .message,
.find_result .input_item.hr input {
  width: calc(100% - 110px);
  margin-top: 5px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.chnagepassword_btn_wrap {
  width: calc(100% - 110px);
}

.message.error {
  color: red;
}

.input_item>.form-control-label {
  margin-top: 20px;
}

.find_result .label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100px;
}

.form-group.required .form-control-label::before {
  display: none;
}

.form-group {
  margin-bottom: 0;
}

.profile_B_cancel,
.profile_S_cancel {
  border-radius: 0 !important;
  font-size: 12px;
  width: 50% !important;
  margin-bottom: 40px;
}

.gFull {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  margin: 10px 0;
}

.btn-block+.btn-block {
  margin-top: 0 !important;
}

.btn_masking {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.ressetsaveBtn {
  margin-top: 20px;
}

.mem_password {
  max-width: calc(50% - 10px);
}

.input_box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.inputedit_box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.messagePassword {
  margin-top: 5px;
}

.btn_passwordBack,
.btn_passwordSave {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 46px;
  height: 36px;
  padding: 2px 10px;
  border: 1px solid #000;
  word-break: keep-all;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.btn_passwordSave {
  background-color: #000;
  color: #fff;
}

.btn_passwordBack {
  background-color: #fff;
  color: #000;
}

.info {
  margin: 0;
  line-height: 16px;
}

.pass_reuired {
  width: 100%;
}

.password_required {
  line-height: 12px !important;
}

.pass_reuired>input {
  width: auto;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 150px;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#currentPassword {
  width: 100%;
  vertical-align: middle;
  outline: 0;
  padding-left: 0;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #000;
  outline-style: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

#currentPassword::-webkit-input-placeholder {
  color: #000 !important;
  font-size: 12px;
}

#currentPassword::-moz-placeholder {
  color: #000 !important;
  font-size: 12px;
}

#currentPassword:-ms-input-placeholder {
  color: #000 !important;
  font-size: 12px;
}

#currentPassword::-ms-input-placeholder {
  color: #000 !important;
  font-size: 12px;
}

#currentPassword::placeholder {
  color: #000 !important;
  font-size: 12px;
}

.btn_password {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  min-width: 80px;
  height: 43px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}

.membar_form {
  line-height: 1.6;
  color: #757575;
  background: #fff;
}

.profile_req {
  margin: -25px 0 10px;
  color: #353535;
  text-align: right;
}

.profile_req img {
  vertical-align: middle;
}

.menu-filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px 0 40px;
}

.ordertablist {
  gap: 60px;
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ordertablist .is-active {
  text-decoration: underline;
}

.Orderdatepicker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
}

.Orderdatepicker .input_item {
  position: relative;
  padding-bottom: 0 !important;
}

.Orderdatepicker .input_item input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orderSelectmonth {
  width: 160px;
}

.range_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  margin: 0 -10px;
}

.range_btn>* {
  padding: 4px 10px;
}

.range_btn>button {
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.range_btn .is-active {
  text-decoration: underline;
}

.Orderdatepicker .input_item input {
  padding-right: 22px;
  background: url(https://blvp-001.dx.commercecloud.salesforce.com/on/demandware.static/Sites-RefArch-Site/-/default/dwfa5b99a7/images/ico_angle.svg) no-repeat 100% 50%/13px;
}

.check_btn {
  background: transparent;
  border: none;
}

.order_list>.item {
  padding: 20px 0;
  border-bottom: 1px solid #000;
}

.order_list .order_date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 150px;
}

.txt_btn {
  display: inline-block;
  text-decoration: underline;
  white-space: nowrap;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.order_list .rows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
}

.productOrderinfo {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.productOrderinfo>span:first-child {
  margin-bottom: 10px;
}

.productOrderinfo>span {
  display: block;
}

.display-mo {
  display: none;
}

.order_list .Pending_status {
  width: 34%;
  max-width: 410px;
}

.order_list .action_btn {
  margin-top: 10px;
}

/* point */
.list_table>.point_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 10px;
  padding: 16px 0 18px 0;
  border-bottom: 1px solid #000;
  position: relative;
}

.list_table>.point_item .col2 {
  width: 32.8%;
}

.list_table>.point_item>* {
  width: 16%;
}

/* reservations */
.summary_box {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px !important;
  margin-bottom: 60px;
}

.res_value {
  display: block;
  padding-top: 10px;
  font-size: 18px;
}

.list_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid #000;
  position: relative;
}

.resDetailitem {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 18px 0;
  border-bottom: 1px solid #000;
}

/* [NEW-reservation-mo] 모바일 전용 2×2 카드는 데스크탑에서 숨김 (모바일 ≤1024에서 grid로 노출) */
.reservation_menu .list_table>.resDetailitem .res-mo-card {
  display: none;
}

.list_header>* {
  width: 16%;
}

.list_table>.resDetailitem>* {
  width: 16%;
}

.list_table .btntitle .resrvationdate {
  display: block;
  margin-top: 10px;
}

.list_header .col2,
.list_table>.resDetailitem .col2 {
  width: 25.8%;
}

.resaction_btn {
  display: flex;
  column-gap: 60px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* [NEW-reservation-mo] 예약변경은 모바일 예약카드 전용 — 데스크탑 숨김 */
.reservation_menu .list_table .resDetailitem .resaction_btn .reservation-change-mo {
  display: none;
}

.list_table .btntitle {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.password_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  gap: 10px;
  padding-top: 60px;
  width: 100%;
}

.pass_reuired {
  margin-top: 30px;
}

.password_gap {
  gap: 0 !important;
}

.passsword_form {
  grid-column: 4 / span 9;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.innerPaswword {
  grid-column: 1 / span 2;
}

#addressForm .check_item {
  width: 100%;
}

button.btn.btn-save.btn_passwordSave {
  flex: 1 1 40%;
  max-width: calc(50% - 10px);
  border-radius: 0;
  font-size: 12px;
}

a.btn.btn-block.btn_passwordBack {
  width: 50%;
  font-size: 12px;
  border-radius: 0;
}

button.btn.btn-save.btn_passwordBack {
  width: 50%;
  border-radius: 0;
  font-size: 12px;
}

.list_tableAddress .no_items {
  padding: 0;
}

/* address */
.shipping .list_tableAddress>.item {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.list_tableAddress>.item {
  position: relative;
}

.list_tableAddress>.item>* {
  width: 16%;
}

.addr_info {
  grid-column: 1 / span 4;
}

.addressname {
  position: relative;
  width: 50%;
  margin-bottom: 10px;
}

.addressname .card-make-default-link {
  margin-top: 0;
  text-decoration: none;
}

.main_addr {
  position: absolute;
  left: calc(100% + 5px);
  top: 0;
  text-decoration: underline;
  white-space: nowrap;
}

.addr_info>.zipcode {
  display: block;
}

.addresssItem {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid #000;
  position: relative;
}

.addressBtnwrap {
  width: 410px;
  margin-top: 60px;
}

.pagination>.disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #666666;
}

.addreess_btn.col2 {
  grid-column: 5 / span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.addreess_btn>*:first-child {
  grid-column: 1 / span 1;
}

.addreess_btn>*:nth-child(2) {
  grid-column: 2 / span 1;
}

.addreess_btn.col2 button.txt_btn {
  float: unset;
}

.addreess_btn .list_tableAddress>.addresssItem .col2 {
  width: 32.8%;
}

.addreess_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

/* paginations */
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 94px;
  padding-top: 50px;
  text-align: center;
}

.pagination>.number {
  display: inherit;
  gap: 48px;
}

.pagination>.number a {
  display: inline-block;
  width: 18px;
  height: 18px;
}

.number>.on {
  text-decoration: underline;
}

.btn_primary {
  font-size: 12px;
}

.myshop-sidebar-left {
  display: block;
}

.dropdown_range {
  display: none;
}

.range_btn {
  display: block;
}

.check_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  gap: 20px 50px;
}

.check_item {
  width: calc(50% - 25px);
  position: relative;
  line-height: 1.5;
  font-size: 14px;
}

.passWordName {
  width: 100%;
  vertical-align: middle;
  outline: 0;
  padding-left: 0;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #000;
  outline-style: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.reservation_menu .list_header,
.resDetailitem {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.reservation_menu .list_header>*,
.resDetailitem>div {
  width: unset !important;
}

.reservation_menu .seq {
  grid-column: 1 / span 1;
}

.reservation_menu .col2 {
  grid-column: 2 / span 2;
}

.reservation_menu .list_header>span:nth-child(3),
.reservation_menu .resDetailitem>div:nth-child(3) {
  grid-column: 4 / span 1;
}

.reservation_menu .list_header>span:nth-child(4),
.reservation_menu .resDetailitem>div:nth-child(4) {
  grid-column: 5 / span 1;
}

.reservation_menu .list_header>span:nth-child(5),
.reservation_menu .resDetailitem>div:nth-child(5) {
  grid-column: 6 / span 1;
}

@media only screen and (max-width: 1920px) {
  .list_table .seq {
    width: 7.8125vw;
  }

  .passsword_form {
    margin: 0;
  }

  .list_tableAddress {
    margin: 0;
  }

  .menu-filter {
    gap: 4%;
  }
}

@media only screen and (max-width: 1330px) {
  .menu-filter {
    gap: 1%;
  }
}

@media only screen and (min-width: 1025px) {
  .txt_btn {
    background-image: none;
  }

  .pagination .txt_btn {
    width: auto;
    height: auto;
    text-indent: 0;
    -webkit-transform: none;
    transform: none;
  }
}

.edit-profile-form .profile>.form_list .input_item:not(.input_item_other) {
  width: 50%;
}

.edit-profile-form .profile>.form_list>.messagePassword {
  margin-top: 10px;
}

.edit-profile-form .profile>.form_list .input_item>.form-control-label {
  margin-top: 0;
  margin-bottom: 0;
}

.edit-profile-form .profile>.check_group .d-flex {
  column-gap: 50px;
}

.edit-profile-form .profile>.check_group .d-flex .check_item {
  width: unset;
}

.edit-profile-form .profile>.gFull.btn_wrap {
  flex-wrap: unset;
  margin-top: 0;
  margin-bottom: 0;
}

.edit-profile-form .profile .profile_B_cancel,
.edit-profile-form .profile .profile_S_cancel {
  margin-bottom: 0;
  flex: 1 1 40%;
}

.layout_odCheckout .discount .input_item .input_box {
  margin-top: 6px;
}

@media only screen and (max-width: 1024px) {

  .find_result .input_item.hr .message,
  .find_result .input_item.hr input {
    width: 100%;
  }

  .txt_btn {
    white-space: normal !important;
  }

  /* 헤더 높이 6.8rem 기준 — 계정 메뉴 바 앵커 */
  .myshopPassword {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    padding: 6.8rem 1.6rem 0.6rem 1.6rem !important;
  }

  .card-make-default-link {
    margin-top: 0em !important;
  }

  .pagination {
    gap: 20px;
    padding-top: 5.7rem;
    height: 5.5rem;
  }

  .addressname {
    width: 30%;
  }

  .addreess_btn.col2 {
    width: 50%;
  }

  .pagination>.number {
    gap: 20px;
  }

  .chnagepassword_btn_wrap {
    width: 100%;
  }

  .myshop_info_right {
    min-width: 100%;
  }

  .dropdown_range {
    display: block;
  }

  .range_btn {
    display: none;
  }

  .menu-filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: left !important;
    -ms-flex-align: left !important;
    align-items: left !important;
    gap: 20px;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .orderSelectmonth {
    width: 100%;
  }

  .orderselect {
    width: 100%;
  }

  .orderselect select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(https://blvp-001.dx.commercecloud.salesforce.com/on/demandware.static/Sites-RefArch-Site/-/default/dwfa5b99a7/images/ico_angle.svg) no-repeat 97% 50%/13px;
  }

  .order_list .action_btn {
    margin-top: 0;
    float: right;
    position: absolute;
    right: 24px;
  }

  .order_list .rows {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
  }

  .order_list .Pending_status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    width: 100%;
    max-width: 100%;
  }

  .order_list .order_date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
  }

  .orderselect {
    width: 1;
  }

  .list_header>*,
  .list_table>.item>* {
    width: auto !important;
  }

  .reservation_menu .list_header {
    display: none;
  }

  /* [NEW-reservation-mo] 마이페이지 예약내역: 데스크탑 테이블 유지, 모바일(≤1024)은 전용 2×2 카드 */
  .reservation_menu .list_table>.resDetailitem {
    display: block;
    padding: 2rem 1.6rem 3rem 0;
  }
  /* 데스크탑 셀(No/상호명/인원/상태/관리)은 모바일에서 숨김 — 카드는 .res-mo-card 사용 */
  .reservation_menu .list_table>.resDetailitem>*:not(.res-mo-card) {
    display: none;
  }

  /* 모바일 전용 2×2 카드: (1행) No.+상호명 | 상태배지 / (2행) 날짜·시간·인원 | 변경·취소 */
  /* 좌 가변 / 우(배지·버튼) 콘텐츠폭 고정 */
  .reservation_menu .list_table>.resDetailitem .res-mo-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min-content;
    column-gap: 0.9rem;
    row-gap: 2.1rem;
    align-items: end;
  }
  /* 1행 좌: No. + 상호명 */
  .reservation_menu .list_table>.resDetailitem .rmc-tit { align-self: end; }
  .reservation_menu .list_table>.resDetailitem .rmc-no {
    display: block;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.2;
    color: #000;
  }
  .reservation_menu .list_table>.resDetailitem .rmc-store {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: left;
    color: #000;
    cursor: pointer;
  }
  /* 1행 우: 상태 배지 */
  .reservation_menu .list_table>.resDetailitem .rmc-badge {
    justify-self: end;
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    height: 2.2rem;
    padding: 0 1.2rem;
    margin-right: 0.9rem;
    background: #000;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
  }
  /* 2행 좌: 날짜·시간·인원 (좁아지면 아래로 wrap) */
  .reservation_menu .list_table>.resDetailitem .rmc-info {
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.2rem 2.4rem;
  }
  .reservation_menu .list_table>.resDetailitem .rmc-field {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .reservation_menu .list_table>.resDetailitem .rmc-label {
    font-size: 1rem;
    line-height: 1;
    color: #000;
    white-space: nowrap;
  }
  .reservation_menu .list_table>.resDetailitem .rmc-value {
    font-size: 1.2rem;
    line-height: 1;
    color: #000;
    white-space: nowrap;
  }
  /* 2행 우: 변경·취소 (짧으면 한 줄 2개, 길면 2줄 — 줄바꿈 시 가운데 정렬) */
  .reservation_menu .list_table>.resDetailitem .rmc-act {
    justify-self: end;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.6rem;
    row-gap: 0.6rem;
    margin-right: 0.9rem;
  }
  /* 모바일 전역 .txt_btn white-space:normal을 이 카드에서만 되돌림(라벨 줄바꿈 방지) */
  .reservation_menu .list_table>.resDetailitem .rmc-act .txt_btn {
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.2rem;
    color: #000;
    text-decoration: underline;
    white-space: nowrap !important;
    cursor: pointer;
  }

  .myshop_info_detail {
    display: unset;
  }

  .myshop_info_detail .myshop_info_right>.profile_title {
    display: none;
  }

  .edit-profile-form .profile {
    margin-top: 0;
  }

  .edit-profile-form .profile>.form_list .input_item:not(.input_item_other) {
    width: 100%;
  }

  .edit-profile-form .profile>.gFull.btn_wrap {
    margin-top: 6rem;
    padding-top: 0;
  }

  .layout_odCheckout .item_wrap.checkout {
    display: block;
    padding-top: 10rem;
  }

  .layout_odCheckout .product-summary-block {
    margin: 2rem 0;
  }

  .layout_odCheckout .item_wrap.checkout .item_body .product_item .quantity {
    margin-top: 0;
    padding-top: 0.8rem;
  }

  .layout_odCheckout .item_wrap.checkout .item_body .form_list.column--min {
    width: 100%;
  }

  .layout_odCheckout .discount .input_item .input_box {
    justify-content: space-between;
    margin-top: 1.1rem;
  }

  .layout_odCheckout .discount .input_item .input_box #pointValue {
    max-width: 17.4rem;
  }

  .layout_odCheckout .item_wrap.checkout .item_summary {
    margin-top: 8rem;
  }

  .layout_odCheckout .methodSvg {
    display: flex;
  }

  .layout_odCheckout .payment-form-fields .labelpay {
    margin-top: 1.1rem;
  }
}

.common_modal {
  margin-top: 100px;
}

.common_modalpoint {
  margin-top: 30px;
}

.modal_content {
  width: 470px;
  max-height: calc(100vh - 3em);
  padding: 30px;
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 0 !important;
}

.modal_header {
  padding: 0 0 0 0;
  border: 0;
  margin-bottom: 25px;
}

.modal_body {
  margin: 10px 0;
  padding: 1rem 0;
}

.fixedCommon_body {
  overflow-y: auto;
  max-height: 400px !important;
  min-height: 54px;
  padding: 0 30px;
  margin: 30px -30px 0 -30px;
}

.box_list .itemmodal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #000;
  background-color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.modal-backdrop.show {
  display: none;
}

.terms-link {
  text-decoration: underline;
}

.modal_body h2 {
  font-size: 12px;
}

.modal_body h3 {
  font-size: 12px;
}

.modal_body h4 {
  font-size: 12px;
}

.modal_body h1 {
  font-size: 12px;
}

.box_list .itemmodal+.itemmodal {
  margin-top: 10px;
}

.div#consent-tracking {
  margin-top: 20px;
}

.modal_body .num {
  position: absolute;
  left: 0;
  top: 0;
}

.modal_body ol>li {
  position: relative;
  padding-left: 18px;
}

.modal_form_list:first-child {
  margin-top: 0 !important;
}

.modal_form_list>* {
  margin-top: 40px;
}

.modalinput_item input {
  height: 30px;
  padding: 4px 0;
  border: 1px solid #000;
  border-width: 0 0 1px;
  border-width: 0 0 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 12px;
  color: #000;
  width: 100%;
}

.modal .modal_form_list .modalinput_box input {
  -ms-flex-negative: 1;
  flex-shrink: 1;
  max-width: 56.62%;
}

.modalinput_item .row>* {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.modaldropdown select {
  height: 30px;
  padding-right: 22px;
  border-width: 0 0 1px;
  background-size: 13px;
  border-width: 0 0 1px !important;
  outline: none;
  padding: 0;
}

.modaldropdown select {
  width: 100%;
  border: 1px solid #000;
  background: url(https://blvp-001.dx.commercecloud.salesforce.com/on/demandware.static/Sites-RefArch-Site/-/default/dwfa5b99a7/images/ico_angle.svg) no-repeat 100% 50%/13px;
  text-align: left;
}

.modalbtn_wrap {
  padding-top: 30px;
}

.modalinput_item .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  margin: 0;
}

button.txt_btn {
  float: inline-end;
}

.modal_body {
  overflow-y: auto;
  max-height: calc(100vh - 3em - 174px);
  min-height: 54px;
  margin: 0 -30px;
  padding: 0 30px;
  max-height: 410px;
}

.modalShippingtitle {
  margin-top: 30px;
}

.cookiesBtn {
  max-width: 195px;
  font-size: 12px !important;
}

.modal_body h2:nth-of-type(1),
.modal_body h3:nth-of-type(1) {
  margin-top: 0;
  font-size: 12px;
}

.modal_body h3,
.modal_body h4 {
  margin-top: 15px;
  font-size: 12px;
}

.res_form_list> :first-child {
  margin-top: 0 !important;
}

.res_form_list>.input_item>.row {
  margin: 0 !important;
}

.number_wrap_res>label {
  flex: 1;
  margin-bottom: 0;
}

.receipt-header {
  padding: 0 0 0 0;
  border: 0;
}

.completePoint {
  width: 35%;
}

.modal .receipt_check_group .receipt_check_item {
  width: calc(50% - 25px);
  position: relative;
  line-height: 1.5;
  font-size: 14px;
}

.receipt_form_list> :first-child {
  margin-top: 0 !important;
}

.receipt_check_item>.custom-control-label ::before {
  left: 0 !important;
}

.receipt_check_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px 50px;
}

.reservation-error-msg {
  position: absolute;
  top: 10%;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

.form_listPoint .col2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 10px;
}

.form_listPoint.min>* {
  margin-top: 30px;
}

.pointdropdown select {
  width: 100%;
  border: 1px solid #000;
  text-align: left;
  height: 24px;
  padding-right: 22px;
  border-width: 0 0 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.707' height='8.061' viewBox='0 0 14.707 8.061'%3E%3Cpath d='M4667.148,3013.231l7,7,7-7' transform='translate(-4666.795 -3012.877)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: right center;
  background-size: 13px;
}

.form_listPoint .col2>* {
  width: 50%;
}

.receipt_body>ul>li {
  list-style: none;
}

.modal .reserved {
  margin-top: 20px;
}

.common-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  margin-top: 20px;
}

.common-width-btn {
  max-width: 196px;
}

@media only screen and (max-width: 560px) {
  .modal-dialog {
    min-width: unset;
    margin: 0 -1px !important;
  }

  .alert-content,
  #reservation-create-div .receipt-content {
    width: 100vw;
    max-height: unset !important;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    border-left: 0;
    border-right: 0;
  }

  .modal_content {
    width: 100vw;
    max-height: calc(100dvh - 6em);
    padding: 3rem 1.6rem;
    border-left: 0;
    border-right: 0;
  }

  .modal_content .btn_wrap.modalbtn_wrap>.mt-3 {
    margin-top: 0 !important;
  }

  .fixed_body {
    max-height: calc(100dvh - 186px);
  }

  #reservation-create-div .receipt-content #reservationForm .btn_wrap {
    position: fixed;
    bottom: 13px;
    left: 0;
    width: 100%;
    padding: 0 16px;
  }

}

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

.add-to-wishlist-alert {
  -webkit-animation: fade 5s linear forwards;
  animation: fade 5s linear forwards;
  -webkit-box-shadow: 1px 1px 5px grey;
  box-shadow: 1px 1px 5px grey;
  padding: 1em;
}

.wishlistTile {
  position: absolute;
  top: 8px;
  right: 16px;
}

.wishlistTile i.fa-heart-o {
  color: rgba(0, 0, 0, 0.7);
}

.wishlistTile i.fa-circle {
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.wishlistTile .fa-heart {
  color: black;
}

.add-to-wishlist-messages,
.remove-from-wishlist-messages {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  top: 5%;
  left: 50%;
  z-index: 99999;
}

.add-to-wishlist-alert,
.remove-from-wishlist-alert {
  -webkit-animation: fade 9s linear forwards;
  animation: fade 9s linear forwards;
  background: #000;
  color: #fff;
  padding: 1em;
}

.remove-from-wishlist-alert {
  top: 30% !important;
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.add-to-wishlist-alert.show,
.remove-from-wishlist-alert.show {
  display: block;
  top: 35%;
}

.add-to-cart-wishlist .add-to-cart {
  float: right;
  margin: 0;
}

.select-attributes-wishlist .select-attributes-btn {
  float: right;
  margin-right: 1.5em;
}

.product-info {
  margin-bottom: 0.313em;
  padding: 0 !important;
}

.line-item-attributes {
  font-size: 0.813rem;
  margin: 0;
}

.item-attributes {
  display: inline-block;
  vertical-align: top;
}

.line-item-name {
  margin-bottom: 10px;
}

.product-card-price {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.wishlist-line-item-divider {
  margin: 0.625em -0.615em;
}

.wishlist-edit-item-divider {
  margin: 0.625em -0.615em;
}

.remove-btn-lg {
  border: none;
  border-radius: 0;
  font-size: 1.625em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
  z-index: 1;
}

.line-item-price-info {
  margin-bottom: 0.25rem;
}

.wishlist-item-update-button-block {
  text-align: center;
}

.update-wishlist-messages {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  top: 30%;
  left: 50%;
}

.update-wishlist-alert {
  -webkit-animation: fade 9s linear forwards;
  animation: fade 9s linear forwards;
  background: #000;
  color: #fff;
  padding: 1em;
}

.update-wishlist-alert.show {
  display: block;
}

.more-wl-items,
.my-account {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

#wishlist-search .wishlist-error-search {
  margin-top: 1rem;
}

#wishlist-search button {
  margin-bottom: 1rem;
}

.wl-hit,
.find-another-wl {
  margin-top: 1rem;
}

.wishlist-owner {
  font-size: 24px;
}

.wl-social-sharing {
  color: #444;
  font-size: 1.75em;
}

.wl-social-sharing .share-icons {
  text-decoration: none;
}

.wl-social-sharing .share-icons i {
  color: #444;
}

.wl-social-sharing .share-icons-copy-link-btn {
  background: none;
  border: none;
  padding-left: 0;
}

.wl-social-sharing .fa-link {
  cursor: pointer;
}

.wl-social-sharing-text {
  font-size: 0.85em;
  font-weight: 200;
}

.copy-link-message {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  top: 30%;
  left: 50%;
}

.wishlistItemCards {
  grid-column: 1 / span 4;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.btnWishlit_full {
  grid-column: 6 / span 2;
}

.add-to-cart-selected-item {
  margin-bottom: 10px;
  border-radius: 0;
}

.orderWish_btn {
  border-radius: 0;
}

.btnWishlit_full {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 3px;
}

.product_item_summary {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 37.126%;
  margin-right: 25px;
}

.order_result .product_sub_title {
  padding-top: 40px;
}

.product_item_summary li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 10px;
  list-style: none;
}

.card {
  border: none;
}

.wishlist_cart_cancel {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.orderCancel_btn {
  position: absolute;
  right: 8px;
  cursor: pointer;
  font-size: 18px;
}

.prdBox>.item-image img {
  width: 100%;
  height: auto;
}

.edit-add-to-wishlist {
  float: right;
}

.card-info {
  width: 100%;
}

.add-to-cart-wishlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  width: 100%;
}

.add-to-cart-wishlist .order-cart {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.btn-primary .btn-secondary {
  margin: 0;
}

.quantity-form-wishlist select {
  padding: 0 10px;
  border: 1px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-width: 0 0 1px;
  height: 43px;
  width: 100%;
  margin: 0 0 7px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.wishlist-item-checkbox::before {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

.wishlist-right {
  grid-column: 4 / span 9;
}

.wishlist-item-checkbox:checked::before {
  background-color: black;
}

.price .starting,
.price .range,
.price .sales {
  font-weight: 400;
}

.product-info {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 calc(50% - 20px);
  flex: 0 1 calc(50% - 20px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
}

.custom-checkbox {
  min-height: 0 !important;
  padding: 3px 0 0 0 !important;
}

.wishlist-item-checkbox,
.select_all_w_checkbox {
  display: none;
}

.custom-checkbox-label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.allselectchebox {
  padding: 0 0 60px 0;
}

.add-to-cart-selected-item {
  font-size: 12px;
}

.custom-checkbox-label_all {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.custom-checkbox-visual_all_w {
  display: block;
  border: 0;
  padding: 0 15px;
  border-radius: 0;
  background: url(https://pointtwofivesecond.com/web/img/checkbox.svg) no-repeat 0 0;
}

span.selectallTitle {
  padding-left: 20px;
}

.select_all_w_checkbox:checked+.custom-checkbox-visual_all_w {
  background: url(https://pointtwofivesecond.com/web/img/checkbox_checked.svg) no-repeat 0 0;
}

.custom-checkbox-visual {
  display: block;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: url(https://pointtwofivesecond.com/web/img/checkbox.svg) no-repeat 0 0;
}

.wishlist-item-checkbox:checked+.custom-checkbox-visual {
  background: url(https://pointtwofivesecond.com/web/img/checkbox_checked.svg) no-repeat 0 0;
}

.add-to-cart {
  border: none !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.productDetailInfo {
  position: relative;
  margin-top: 10px;
}

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

.membar_wishlist .overview_title {
  grid-column: 1 / span 9;
}

.membar_wishlist .item_body {
  grid-column: 1 / span 4;
  width: 100%;
}

.membar_wishlist .item_summary {
  grid-column: 6 / span 2;
  width: 100%;
}

.membar_wishlist .col-12.text-center {
  grid-column: 1 / span 9;
  text-align: left !important;
  padding: 0;
}

p>img {
  max-width: 100%;
}

.recommendations .homepage-product-listing.row {
  margin: 0;
  padding: 0 20px;
}

.modal_body .form_list .input_box.zipcode input,
.modal_body .input_box [class*=btn] {
  flex-shrink: 1;
}

.layout_pdSearchResult .content {
  padding: 0;
}

.layout_pdSearchResult .content .search_result {
  padding-left: 25px;
  padding-right: 25px;
}

.dhl_txt {
  margin-top: 7px;
  font-size: 12px;
}

.dhl_txt span {
  font-size: 11px;
}

.modal#selectCountryRegion .modal_content .modal_header{
  padding-bottom: 0;
}

@media screen and (max-width: 1024px) {
  .myshop_wishlist_center {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 100%;
  }

  .wishlistItemCards {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 0;
  }

  .allselectchebox {
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
  }

  .btnWishlit_full {
    margin-bottom: 8rem;
  }

  .add-to-cart-selected-item {
    margin-bottom: 0;
  }

  .membar_wishlist {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .membar_wishlist .item_body {
    margin-top: 8rem;
  }

  .membar_wishlist .item_body>.check_item {
    width: 100%;
    border-bottom: 1px solid #000;
  }

  .membar_wishlist .product_list.col2 {
    row-gap: 0;
  }

  .membar_wishlist .product_list .check_item label::before,
  .membar_wishlist .product_item .check_item label::before {
    top: 0;
  }

  .membar_wishlist .product_list.col2>.item {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
  }

  .membar_wishlist .product_list.col2>.item .thumbnail,
  .membar_wishlist .product_list.col2>.item .product_info {
    flex: 1 1 40%;
  }

  .membar_wishlist .product_list.col2>.item .product_info {
    padding-top: 40px;
  }

  .membar_wishlist .product_list .action_btn {
    top: 0;
  }

  .password_title {
    display: none;
  }

  .summary_box {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 3.6rem;
  }

  .prdBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
  }

  .product-info {
    flex: 0 1 100%;
    border-bottom: 1px solid #000;
  }

  .card.product-info {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #000;
    border-radius: 0;
    margin-bottom: 0;
  }

  .prdBox>.item-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .item-image {
    width: 60%;
  }

  .productDetailInfo {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding-left: 10px;
    flex-grow: 1;
    margin-top: 42px;
  }

  .addressBtnwrap {
    width: 100%;
    margin-top: 60px;
  }

  .wishlist_cart_cancel {
    padding: 0;
  }

  .add-to-cart-wishlist {
    display: unset;
  }

  .add-to-cart-wishlist .order-cart {
    top: auto;
    bottom: 0;
  }

  .add-to-cart-wishlist .add-to-cart {
    min-width: unset;
    padding: 0;
  }

  .custom-checkbox {
    padding-top: 0 !important;
  }

  .orderCancel_btn {
    right: 0;
  }

  .passsword_form {
    display: unset;
  }

  .passsword_form .overview_title {
    display: block;
  }

  .addresssItem {
    display: flex;
    flex-direction: column;
  }

  .list_tableAddress>.addresssItem:first-child {
    padding-top: 0;
  }

  .list_tableAddress .addresssItem .addressname {
    position: relative;
    width: 100%;
    padding-top: 30px;
    margin-bottom: 0;
  }

  .list_tableAddress .addresssItem .addressname .card-make-default-link {
    position: absolute;
    left: 0;
  }

  .list_tableAddress .addresssItem .addreess_btn.col2 {
    width: 100%;
  }

  .exhibition-asset-container .exhi_img_text_wrap:last-child {
    padding-bottom: 0;
  }

  .recommendations .homepage-product-listing.row {
    padding: 0 11px;
  }

  .mem_password {
    max-width: 100%;
  }

  .common_modalpoint {
    margin-top: 0;
  }

  .password_btn {
    padding-top: 4rem;
  }

  .layout_pdSearchResult .content .search_result {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .editAddAddress .myshop-sidebar-left {
    display: none;
  }

  .editAddAddress .mobile-coupons-menu {
    display: flex !important;
  }

  .listtitle,
  .membarline .info_list li>span:first-child {
    width: 30%;
  }

  .common_modalpoint .modal_content {
    max-height: unset;
  }

  .header-banner-show .common_modalpoint .modal_content {
    height: calc(100dvh - 3rem - 6rem + 1px);
  }

  .header-banner-hide .common_modalpoint .modal_content {
    height: calc(100dvh - 6rem + 1px);
  }

  .common_modalpoint .modal_content .modal_body {
    height: 100%;
    max-height: unset;
  }

  body.modal-open .modal-body.receipt_body.fixed_body .reservationinfo {
    padding-bottom: 5rem;
  }

  .modal#deleteAddressModal {
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .modal#deleteAddressModal .modal-dialog {
    margin: 0 !important;
  }

  .modal#deleteAddressModal .alert-content {
    width: unset;
    margin: 0 1.6rem;
    padding: 2rem;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }

  body.modal-open {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
  }

  body {
    overflow: auto;
  }

  /* global cookie, select region, 예약 취소 modal */
  .modal#selectCountryRegion,
  .modal#consent-tracking,
  .modal#cancelReservationModal{
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .modal#selectCountryRegion .modal-dialog,
  .modal#consent-tracking .modal-dialog,
  .modal#cancelReservationModal .modal-dialog{
    margin: 0 !important;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .modal#selectCountryRegion .modal_content,
  .modal#consent-tracking .modal_content,
  .modal#cancelReservationModal .modal-content{
    width: 100%;
    height: unset;
    padding: 2rem;
    border: 1px solid #000;
  }
  .modal#selectCountryRegion .modal_content .modal_header{
    margin-bottom: 3rem;
  }
  .modal#consent-tracking .modal-body+.btn_wrap{
    flex-direction: column;
  }
  .modal#consent-tracking .modal-body+.btn_wrap > *{
    flex: unset;
    display: block;
    max-width: unset;
  }

  .modal {
    width: 100%;
    top: unset;
    left: 0;
    right: 0;
    bottom: 0;
    transform: unset;
    padding: 0 !important;
  }

  .modal-dialog {
    margin: 0;
    min-width: unset;
  }

  .modal_content {
    width: 100%;
    height: calc(100dvh - 6rem + 1px);
    max-height: unset;
  }

  .modal .modal-body:not(.receipt_body) {
    max-height: calc(100vh - 260px - 60px - 100px) !important;
  }

  .modal-body.fixedCommon_body {
    max-height: calc(100dvh - 24rem + 1px) !important;
  }

  .delivery.payment .check_group .check_item {
    width: 100%;
  }

  /* modal */
  .header-banner-show #login-common-sec .modal,
  .header-banner-show .modal#thirdpartyModal,
  .header-banner-show .modal#informationSharingModal,
  .header-banner-show .modal#smsMarketingAgreeModal,
  .header-banner-show .modal#marketingAgreeModal,
  body.h-banner-show .modal#reservation-create-div,
  body.h-banner-show .modal#privacyPolicymodal,
  body.h-banner-show .modal#reservationDetailsModal{
    height: calc(100dvh - 9rem + 1px);
  }
  .header-banner-hide #login-common-sec .modal,
  .header-banner-hide .modal#thirdpartyModal,
  .header-banner-hide .modal#informationSharingModal,
  .header-banner-hide .modal#smsMarketingAgreeModal,
  .header-banner-hide .modal#marketingAgreeModal,
  body.h-banner-hide .modal#reservation-create-div,
  body.h-banner-hide .modal#privacyPolicymodal,
  body.h-banner-hide .modal#reservationDetailsModal{
    height: calc(100dvh - 6rem + 1px);
  }
  #login-common-sec .modal .modal-dialog,
  #login-common-sec .modal .modal-dialog .modal_content,
  .modal#thirdpartyModal .modal-dialog,
  .modal#thirdpartyModal .modal-dialog .modal_content,
  .modal#informationSharingModal .modal-dialog,
  .modal#informationSharingModal .modal-dialog .modal_content,
  .modal#smsMarketingAgreeModal .modal-dialog,
  .modal#smsMarketingAgreeModal .modal-dialog .modal_content,
  .modal#marketingAgreeModal .modal-dialog,
  .modal#marketingAgreeModal .modal-dialog .modal_content,
  .modal#reservation-create-div .modal-dialog,
  .modal#reservation-create-div .modal-dialog .modal-content,
  .modal#privacyPolicymodal .modal-dialog,
  .modal#privacyPolicymodal .modal-dialog .modal_content,
  .modal#reservationDetailsModal .modal-dialog,
  .modal#reservationDetailsModal .modal-dialog .modal-content {
    width: 100%;
    height: 100%;
    max-height: unset;
  }
  .header-banner-show #login-common-sec .modal .modal-dialog .modal_content .modal-body,
  .header-banner-show .modal#thirdpartyModal .modal-dialog .modal_content .modal-body,
  .header-banner-show .modal#informationSharingModal .modal-dialog .modal_content .modal-body,
  .header-banner-show .modal#smsMarketingAgreeModal .modal-dialog .modal_content .modal-body,
  .header-banner-show .modal#marketingAgreeModal .modal-dialog .modal_content .modal-body,
  body.h-banner-show .modal#reservation-create-div .modal-dialog .modal-content .modal-body,
  body.h-banner-show .modal#privacyPolicymodal .modal-dialog .modal_content .modal-body{
    height: calc(100dvh - 9rem + 1px - 1.6rem - 6rem - 9.6rem) !important;
    max-height: unset !important;
  }
  .header-banner-hide #login-common-sec .modal .modal-dialog .modal_content .modal-body,
  .header-banner-hide .modal#thirdpartyModal .modal-dialog .modal_content .modal-body,
  .header-banner-hide .modal#informationSharingModal .modal-dialog .modal_content .modal-body,
  .header-banner-hide .modal#smsMarketingAgreeModal .modal-dialog .modal_content .modal-body,
  .header-banner-hide .modal#marketingAgreeModal .modal-dialog .modal_content .modal-body,
  body.h-banner-hide .modal#reservation-create-div .modal-dialog .modal-content .modal-body,
  body.h-banner-hide .modal#privacyPolicymodal .modal-dialog .modal_content .modal-body{
    height: calc(100dvh - 6rem + 1px - 1.6rem - 6rem - 9.6rem) !important;
    max-height: unset !important;
  }

  .modal#reservationDetailsModal .modal-dialog .modal-content{
    border-left: 0;
    border-right: 0;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .modal#reservationDetailsModal .modal-dialog .modal-content .modal-body .btn_wrap.full{
    padding-bottom: 4rem;
  }
  body.h-banner-show .modal#reservationDetailsModal .modal-dialog .modal-content .modal-body{
    height: calc(100dvh - 9rem + 1px - 1.6rem - 6rem) !important;
    max-height: unset !important;
  }
  body.h-banner-hide .modal#reservationDetailsModal .modal-dialog .modal-content .modal-body{
    height: calc(100dvh - 6rem + 1px - 1.6rem - 6rem) !important;
    max-height: unset !important;
  }

  .modal-body.receipt_body .common-btn-group{
    flex-direction: column;
  }
}

.modal .btn_wrap {
  padding-top: 30px;
}

.layout_odOrderList .content {
  padding: 0 0 80px 0;
}

.layout_odOrderList .column_wrap {
  padding-top: 0;
}

.layout_odOrderList .column {
  margin: unset;
}

.slide_second_img>p {
  margin-bottom: 20px;
  word-break: keep-all;
}

[lang="ja"] .slide_second_img>p {
  word-break: break-word;
}

.slide_second_img>p:first-child {
  margin-bottom: 10px;
}

#videoOverlay video {
  height: 100%;
}

#checkPasswdForm {
  grid-column: 1 / span 3;
}

.product-action.wishlist-icon .add-to-wish-list:active {
  background-color: unset;
}

@media only screen and (min-width: 768px) and (max-height: 1080px) {
  .modal .modal-body {
    max-height: calc(100vh - 260px - 60px - 100px) !important;
  }
}

/* [MOD-gnb-submenu] STORY 페이지(product-parfums-story·product-tea-story) 서브메뉴 좌우 패딩 + 본문 상단 여백 */
.content-asset-parfums-story .sub_menu_wrap,
.content-asset-tea-story .sub_menu_wrap {
  padding: 0 25px;
}

.story-wrap {
  margin-top: 50px;
  grid-column: 1 / span 12;
}

@media (max-width: 1024px) {
  /* 좌측 16px (PLP #list_perfume과 동일) / 브레드크럼 우측 패딩 제거로 가로 스크롤이 화면 끝까지 — 마지막 항목 여백은 공통 규칙 담당 */
  .content-asset-parfums-story .sub_menu_wrap,
  .content-asset-tea-story .sub_menu_wrap {
    padding-left: 1.6rem;
    padding-right: 0;
  }

  .story-wrap {
    margin-top: 3.2rem;
  }
}

/* [MOD-space-kore-japan] SPACE(KOREA/JAPAN) 매장 갤러리 카드 — 풀블리드 이미지+매장명+서브텍스트+더 알아보기/방문 예약하기 */
.space-gallery {
  grid-column: 1 / span 12;
}

.space-store + .space-store {
  margin-top: 80px;
}

/* 이미지: content-asset-space 좌우 패딩(25px) 상쇄해 좌우 끝까지 (.title_image 패턴) */
.space-store-img {
  margin: 0 -25px;
}

/* [MOD-teahouse] TEA HOUSE 카드 좌우 25px — 이미지는 margin:0 -25px 풀블리드, 텍스트만 인셋 */
.content-asset-teathology-tea .tea.space-gallery {
  margin-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
}

.content-asset-space .tea.space-gallery {margin-top: 20px;}

.space-store-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
}

/* 매장당 이미지 2장: PC 좌우 50:50 풀블리드 (1장 매장은 .space-store-img-2col 미부여) */
.space-store-img-2col {
  display: flex;
}

.space-store-img-2col picture {
  flex: 1 1 50%;
  min-width: 0;
}

/* 2분할 각 이미지: aspect-ratio 4/3 (width 50% + object-fit:cover) */
.space-store-img-2col img {
  aspect-ratio: 4 / 3;
}

.space-store-info {
  padding-top: 20px;
}

.space-store-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.space-store-desc {
  margin: 0;
  padding: 10px 0 30px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.667;
  color: #000;
}

.space-store-links {
  display: flex;
  align-items: center;
  gap: 60px;
}

.space-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  cursor: pointer;
}

.space-link:hover {
  text-decoration: none;
  color: #000;
}

.space-link-arrow {
  display: inline-flex;
  align-items: center;
}

.space-link-arrow svg {
  display: block;
  width: auto;
  height: 11px;
}

@media only screen and (max-width: 768px) {
  /* 모바일은 content-asset-space 좌우 패딩 0 → 본문(.spaceJapan_tea) 16px 패딩만 상쇄 */
  /* 이미지 높이 400px 고정 + 넘치는 가로폭은 가로 스크롤 */
  .space-store-img {
    margin: 0 -16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .space-store-img img {
    width: auto;
    max-width: none;
    height: 400px;
  }

  /* 2분할 모바일: 원본폭 유지 + 가로 스크롤(부모 .space-store-img overflow-x:auto) */
  .space-store-img-2col picture {
    flex: 0 0 auto;
  }

  /* 모바일은 Image Frame(300x400px, 세로 3/4) → PC 4/3 해제 */
  .space-store-img-2col img {
    aspect-ratio: auto;
  }

  /* [MOD-teahouse] TEA HOUSE 매장 카드 좌우 여백 (모바일 1.6rem) */
  .content-asset-teathology-tea .tea.space-gallery {
    margin-top: 1rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .content-asset-space .tea.space-gallery {
    margin-top: 1rem;
  }

  .space-store-info {
    padding-top: 3rem;
  }

  .space-store-name {
    font-size: 18px;
    letter-spacing: 0.005em;
    line-height: 1.278;
  }

  .space-store-desc {
    padding-top: 2rem;
    font-size: 14px;
    letter-spacing: 0.005em;
    line-height: 1.643;
  }

  .space-store-links {
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }
}

/* [NEW-space-story] SPACE STORY 풀페이지(14섹션): 섹션 전환(-50vh fade), 디졸브(S11) 3단 크로스페이드, 2블록 섹션(S8·S12·S14) 내부 스크롤 */
/* SPACE STORY 활성 시 페이지 스크롤바 숨김(JS가 html.ss-fp 부여) */
/* Firefox / IE/Edge */
html.ss-fp {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Chrome/Safari */
html.ss-fp::-webkit-scrollbar {
  display: none;
}

.content-asset-space-story {
  padding-left: 0;
  padding-right: 0;
}

.content-asset-space-story .space_thology {
  padding-left: 25px;
  padding-right: 25px;
}

.content-asset-space-story .story-wrap {
  margin-top: 0;
  grid-column: 1 / span 12;
}

.space-story {
  position: relative;
}

.ss-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}

/* 섹션 공통(스택+전환 상태): 헤더(+배너) 아래에서 시작, 높이는 뷰포트−오프셋(--ss-grid-top = 헤더 bottom, JS가 배너 토글 시 갱신) */
.ss-sec {
  position: absolute;
  top: var(--ss-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)));
  left: 0;
  width: 100%;
  height: calc(100svh - var(--ss-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  opacity: 0;
  transform: translateY(100%);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 600ms ease;
  will-change: transform, opacity;
  overflow: hidden;
  pointer-events: none;
}

.ss-sec.is-next {
  transform: translateY(100%);
  opacity: 0;
}

.ss-sec.is-prev {
  transform: translateY(-100%);
  opacity: 0;
}

.ss-sec.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 인트로 서브메뉴 — SPACE nav(.space_thology)를 인트로 좌상단 오버레이. top은 JS(setSubnavTop)가 --ss-subnav-top으로 헤더 bottom 정렬(폴백=헤더+배너 높이) */
/* 섹션이 이미 헤더 아래(--ss-grid-top)에서 시작 → 서브메뉴는 섹션 상단(=헤더 bottom) 기준 */
.ss-sec .ss-intro-subnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
}

/* 모바일(≤1024): 데스크탑 서브메뉴(.space_thology) 숨김 — .ssm-hero-menu가 대신 */
@media (max-width: 1024px) {
  .content-asset-space-story .space_thology {
    display: none;
  }
}

/* --- 배경 미디어(영상/이미지) 풀블리드 --- */
.ss-media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

video.ss-media-bg,
.ss-media-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 동영상 섹션 배경 검정 — 영상 로드 전·전환 중 흰 배경 노출 방지 */
.ss-sec[data-ss-media="video"] {
  background: #000;
}

/* S4: 영상 위 #fff 60% */
.ss-media-scrim {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.6;
}

/* 챕터 인트로/어두운 이미지 위 흰 텍스트 가독 */
.ss-media-scrim--dark {
  background: #000;
  opacity: 0.35;
}

/* 영상 연속 배경 + 스크롤 시 #fff 60% 막 + 텍스트 reveal (영상은 재시작 없이 계속 재생) */
/* 60% 흰 막 — 투명도는 background 에 고정 */
.ss-media--reveal .ss-media-scrim {
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 600ms ease, -webkit-backdrop-filter 600ms ease, backdrop-filter 600ms ease;
}

.ss-media--reveal .ss-prose--center {
  opacity: 0;
  transition: opacity 600ms ease;
}

/* 성수 하우스 3단 reveal: reveal-step(커버=step0 / 프로즈=step2)을 영상 위 겹침, step1은 영상만 노출 */
.ss-media--reveal .ss-reveal-step {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

.ss-media--reveal[data-step="0"] .ss-reveal-step[data-ss-step="0"],
.ss-media--reveal[data-step="2"] .ss-reveal-step[data-ss-step="2"] {
  opacity: 1;
  pointer-events: auto;
}

/* step2에서만 흰 60% 막 + 프로즈 노출 (step0=커버 / step1=영상만) */
.ss-media--reveal[data-step="2"] .ss-media-scrim,
.ss-media--reveal[data-step="2"] .ss-prose--center {
  opacity: 1;
}

/* step2 프로즈 등장 시 배경 영상 블러(프로스트) — 흰 60% 막 위 blur 0→16px 페이드 */
.ss-media--reveal[data-step="2"] .ss-media-scrim {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* --- 커버/챕터 인트로 (중앙 정렬 텍스트) --- */
.ss-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ss-cover--light {
  background: #fff;
  color: #000;
}

.ss-cover--dark {
  background: #000;
  color: #fff;
}

.ss-cover--media {
  color: #fff;
}

/* 어두운 배경 섹션의 흰색 텍스트 — 태그 규칙(h2{color:#000})이 상속을 끊으므로 자식 텍스트 색 명시 */
.ss-cover--dark .ss-eyebrow,
.ss-cover--dark .ss-cover-title,
.ss-cover--dark .ss-cover-chips,
.ss-cover--dark .ss-chip,
.ss-cover--media .ss-eyebrow,
.ss-cover--media .ss-cover-title,
.ss-cover--media .ss-cover-chips,
.ss-cover--media .ss-chip,
.ss-overlay .ss-prose-title,
.ss-overlay .ss-prose-body,
.ss-overlay .ss-prose-body p {
  color: #fff;
}

.ss-cover-inner {
  position: relative;
  z-index: 2;
  padding: 0 25px;
}

.ss-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.6;
}

.ss-cover-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.ss-cover-chips {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.005em;
}

/* 챕터 칩 — 클릭 시 해당 챕터 섹션 점프 */
.ss-chip {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* hover 시 opacity 0.8 */
.ss-chip:hover {
  opacity: 0.8;
  color: inherit;
  text-decoration: none;
}

/* 더 알아보기 링크 */
.ss-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.015em;
  color: #000;
  opacity: 0.6;
  text-decoration: none;
}

.ss-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* 모바일(≤1024px)에서만 노출 */
.ss-more-arrow {
  display: none;
  width: 7px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 본문 프로즈 --- */
.ss-prose-title {
  margin: 0 0 40px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

/* 텍스트 영역 공통: 최대 가로폭 800px (좌우 여백은 컨테이너 패딩 ≥25px) */
.ss-prose-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: inherit;
  word-break: keep-all;
  text-align: left;
}

.ss-prose-body p {
  margin: 0;
}

/* 일본어(ja): keep-all은 띄어쓰기 없는 일본어를 오버플로시키므로 해제 */
:lang(ja) .ss-prose-body {
  word-break: normal;
}

/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.ss-prose--center {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 0 auto;
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: left;
}

/* --- S5: 어두운 이미지 위 좌 텍스트 + 우 대형 025 --- */
.ss-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
}

.ss-overlay--split {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 150px;
}

.ss-overlay-text {
  width: calc(50% - 70px);
  max-width: 800px;
}

/* --- S6·S7·S11: 좌 텍스트 / 우 이미지 분할 --- */
.ss-split {
  display: flex;
  align-items: center;
}

.ss-split-text {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 70px 0 150px;
}

.ss-split-img {
  flex: 0 0 50%;
  max-width: 50%;
  height: 100%;
}

.ss-split-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* S11 디졸브 — 우 이미지 3단계 크로스페이드 */
.ss-dissolve-stack {
  position: relative;
}

.ss-dissolve-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}

.ss-dissolve-img.is-active {
  opacity: 1;
}

/* S8·S12·S14: 2블록 스택 (내부 스크롤, 스크롤바 숨김) */
/* Firefox / IE/Edge */
.ss-sec.ss-stack {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  color: #000;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Chrome/Safari — 스크롤바 숨김(스크롤 기능 유지) */
.ss-sec.ss-stack::-webkit-scrollbar {
  display: none;
}

/* 섹션이 헤더 아래(--ss-grid-top)에서 시작 → 상단 여백 제거, min-height도 섹션 높이 기준 */
.ss-stack-inner {
  min-height: calc(100svh - var(--ss-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  padding: 0;
}

.ss-block + .ss-block {
  margin-top: 80px;
}

/* 블록2(imgright, S9): 상단 80px 여백 제거 */
.ss-block + .ss-block--imgright {
  margin-top: 0;
}

/* index5 스택 내 ss-block 사이 상단 여백(80px) 제거 — index5 한정, 전역 규칙 유지 */
[data-ss-index="5"] .ss-block + .ss-block {
  margin-top: 0;
}

.ss-block-img--full img,
.ss-block-img > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 블록 이미지 좌우 2분할(1-7-2 / 1-7-3) — 각 50% */
.ss-block-img--split {
  display: flex;
  align-items: flex-start;
}

.ss-block-img--split > img {
  width: 50%;
  height: auto;
}

.ss-block-text {
  max-width: 900px;
  padding: 100px 50px 220px;
  margin: 0 auto;
}

.ss-block-text--center {
  margin: 0 auto;
}

/* 블록2: S6·S7 분할과 동일 — 좌 50% 텍스트 / 우 50% 풀높이 이미지, 수직 중앙 */
.ss-block--imgright {
  display: flex;
  align-items: center;
  height: 100svh;
}

.ss-block--imgright .ss-block-text {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 80px;
}

.ss-block--imgright .ss-block-img {
  flex: 0 0 50%;
  max-width: 50%;
  height: 100%;
}

.ss-block--imgright .ss-block-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-ss-index="10"] .ss-block:not(.ss-block--imgright) .ss-block-text {
  padding-bottom: 190px;
}

[data-ss-index="10"] .ss-stack-inner {
  padding-bottom: 0;
}

/* 모바일: 풀페이지 비활성 임시 폴백(모바일 시안 별도 작업 예정) */
@media only screen and (max-width: 768px) {
  .ss-stage {
    height: auto;
    overflow: visible;
  }

  .ss-sec {
    position: relative;
    height: auto;
    min-height: 100svh;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .ss-split,
  .ss-block--imgright {
    flex-direction: column;
  }

  .ss-split-text,
  .ss-split-img,
  .ss-block--imgright .ss-block-img {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .ss-split-text {
    padding: 2rem 1rem;
  }

  .ss-overlay--split,
  .ss-block-text,
  .ss-block--imgright {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* [NEW-space-story] 모바일(세로 스크롤, ≤1024 / .space-story-mo.display-mo) ※ 모바일 root font-size 62.5% → 1rem=10px */
.space-story-mo {
  position: relative;
}

/* 컨텐츠 섹션 기본 — 프로즈/가로스크롤(sec3·4·6·9·10·13·14·16·18)은 자연 높이, 세로 중앙 flex만 유지 */
.ssm-sec {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* sec2(성수 챕터네비+대비) — 보이는 영역(100svh−헤더 오프셋) 높이, 콘텐츠가 크면 확장 */
.ssm-sec.ssm-chnav-sec {
  min-height: calc(100svh - var(--ssm-top, 6.8rem));
}

/* 단독 이미지 섹션(sec5·15) — 콘텐츠 자연 높이(위·아래 빈 여백 방지 위해 min-height 제거) */
.ssm-sec.ssm-img {
  min-height: 0;
}

/* sec8(1-8)·sec12(1-12)만 콘텐츠 자연 높이 — 이미지 파일명으로 구분, sec5·15는 유지 */
.ssm-sec.ssm-img:has(img[src*="/1-8.png"]),
.ssm-sec.ssm-img:has(img[src*="/1-12.png"]) {
  min-height: 0;
}

/* 가로스크롤(본문 동반 sec10·18) — 보이는 영역만큼 채우고 세로 중앙 유지. sec3(단독)·슬라이더(sec13)는 제외 */
.ssm-sec:has(.ssm-hscroll):has(.ssm-prose) {
  min-height: calc(100svh - var(--ssm-top, 6.8rem));
}

/* sec7(이미지+그라디언트+텍스트)은 예외 — 자연 높이(화면 채움 제외) */
.ssm-imgtext {
  display: block;
  min-height: auto;
}

/* 히어로(성수 영상 / 북촌 영상 / 하라주쿠 이미지) — 풀블리드 100svh(헤더 오버레이) */
.ssm-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

/* 동영상 히어로 배경 검정 — 영상 로드 전·전환 중 흰 배경 노출 방지 */
.ssm-hero[data-ssm-video] {
  background: #000;
}

.ssm-bg,
.ssm-bg img,
video.ssm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* iOS Safari 합성 버그 — transform 패널 내 absolute 영상이 빈 화면 렌더 → GPU 레이어 승격으로 강제 페인트 */
video.ssm-bg {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.ssm-hero-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.3;
  z-index: 1;
}

/* sec1: SPACE 서브메뉴 오버레이(영상 위) */
.ssm-hero-menu {
  position: relative;
  z-index: 2;
  padding: 2rem 1.6rem;
  color: #fff;
}

.ssm-submenu-label {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.ssm-submenu {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
}

.ssm-submenu a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.ssm-submenu .active a {
  color: #fff;
  font-size: 1.8rem;
}

/* 챕터 네비(성수하우스/북촌/하라주쿠) — 시안: 아이브로우(Space·Story)+탭, 히어로는 하단 좌측 */
/* 스크롤 화살표(::after) 앵커 */
.ssm-chnav {
  position: relative;
  padding: 2rem 3.2rem;
}

/* [스크롤 인디케이터] 챕터 탭바(.ssm-chnav-tabs)가 좌우 스크롤 가능할 때만 › 노출 — more-arrow와 동일 SVG(7×10px) mask + currentColor. JS가 .is-scrollable 토글 */
.ssm-chnav:has(.ssm-chnav-tabs.is-scrollable)::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 2rem;
  width: 7px;
  height: 2.4rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  color: inherit;
  pointer-events: none;
  z-index: 3;
}

.ssm-chnav .ss-eyebrow {
  margin: 0 0 1rem;
}

/* 부모(.ssm-chnav) 좌우 3.2rem 패딩을 음수 마진으로 상쇄해 스크롤 영역을 화면 양끝까지, 내부 padding 3.2rem으로 첫/마지막 탭만 인셋 */
.ssm-chnav-tabs {
  display: flex;
  gap: 2rem;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.01em;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 -3.2rem;
  padding: 0 3.2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ssm-chnav-tabs::-webkit-scrollbar {
  display: none;
}

/* [스크롤 인디케이터] 좌우 스크롤 가능(.is-scrollable) 시 우측 여백 10rem + 우측 6.4rem 흰→투명 mask 페이드 */
.ssm-chnav-tabs.is-scrollable {
  padding-right: 3.2rem;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%);
}

.ssm-chnav-tabs a {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
  flex: 0 0 auto;
  white-space: nowrap;
}

.ssm-chnav-tabs a.is-active {
  color: #000;
}

/* 히어로(sec11·18) 위 챕터 네비 — 하단 좌측, 흰색 */
.ssm-hero .ssm-chnav--onmedia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 3.2rem 4rem;
  color: #fff;
}

.ssm-chnav--onmedia .ssm-chnav-tabs a {
  color: rgba(255, 255, 255, 0.4);
}

.ssm-chnav--onmedia .ssm-chnav-tabs a.is-active {
  color: #fff;
}

/* 히어로 위(--onmedia)는 하단 패딩 4rem이라 스크롤 화살표 bottom도 4rem로 맞춰 탭 행 세로 중앙 유지 */
.ssm-hero .ssm-chnav--onmedia:has(.ssm-chnav-tabs.is-scrollable)::after {
  bottom: 4rem;
}

/* 프로즈(모바일) — 데스크탑 타이포(.ss-prose-*) 재사용 */
.ssm-prose {
  padding: 6rem 3.2rem 10rem;
}

/* 풀폭 이미지 */
.ssm-img {
  font-size: 0;
}

.ssm-img > img {
  display: block;
  width: 100%;
  height: auto;
}

/* sec13(1-13-1·2)만 상단 흰색→투명 그라디언트 300px 오버레이 */
.ssm-img:has(img[src*="/1-13-1.jpg"]) {
  position: relative;
}

.ssm-img:has(img[src*="/1-13-1.jpg"])::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* 가로스크롤(1-3 / 1-10-1·2 / 1-18-1·2) */
.ssm-hscroll {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ssm-hscroll::-webkit-scrollbar {
  display: none;
}

.ssm-hscroll img {
  display: block;
  height: 70svh;
  min-height: 0;
  width: auto;
  flex: 0 0 auto;
}

/* sec7: 1-7 이미지 + 하단 #fff 그라디언트 위 텍스트 */
.ssm-imgtext {
  position: relative;
}

.ssm-imgtext-bg {
  display: block;
}

.ssm-imgtext-bg img {
  display: block;
  width: 100%;
  height: auto;
}
/* ssm6 배경(.ssm-imgtext-bg) — 이미지 상단 진입 시(.is-bgin) opacity fade */
.space-story-mo.ssm-fade .ssm-imgtext-bg { opacity: 0; transition: opacity 0.8s ease; }
.space-story-mo.ssm-fade .ssm-imgtext-bg.is-bgin { opacity: 1; }

.ssm-imgtext-grad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 15%, #fff 50%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}

.ssm-imgtext-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 3.2rem 30rem;
}

/* 챕터 커버 타이틀 타이포: 18px / lh 1.333 / ls 0.01em */
.ssm-imgtext-text .ss-prose-title {
  font-size: 18px;
  line-height: 1.333;
  letter-spacing: 0.01em;
}

/* 슬라이더(감각을 깨워 — 1-13-1·2·3) */
/* 폭 미지정 시 Swiper loop 복제 슬라이드의 min-content 폭으로 컨테이너가 폭발 → 명시 폭으로 부모 폭에 고정 */
.ssm-slider {
  position: relative;
  width: 100%;
}

.ssm-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ssm-slides::-webkit-scrollbar {
  display: none;
}

/* Swiper 전환: 컨테이너 클립 + 래퍼의 네이티브 가로스크롤/스냅 무효화(활성 판별은 .swiper-container-initialized) */
.ssm-slider.swiper-container-initialized { overflow: hidden; }
/* 양축 visible이어야 Swiper transform이 적용됨 — overflow-x만 visible이면 브라우저가 auto로 강제 */
.ssm-slides.swiper-wrapper,
.ssm-slider.swiper-container-initialized .ssm-slides {
  overflow: visible;
  scroll-snap-type: none;
}

.ssm-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}

.ssm-slide img {
  height: auto;
  width: 100%;
  flex: 0 0 auto;
  display: block;
}

.ssm-slide .ss-prose-body {
  position: absolute;
  top: 9.5rem;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
  color: #fff;
  z-index: 2;
}
/* 슬라이드 상단 텍스트 가독용 검정 그라디언트(to bottom 1→0.5) */
.ssm-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* 점/카운터를 슬라이더 기준으로 개별 배치 — foot는 위치 컨텍스트 해제 */
.ssm-slider-foot {
  position: static;
}

.ssm-dots {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  gap: 2rem;
}

.ssm-dots i {
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  background: rgba(255, 255, 255, 0.4);
}

.ssm-dots i.is-active {
  background: #fff;
}

.ssm-count {
  position: absolute;
  top: 6rem;
  left: 3.2rem;
  z-index: 1;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

/* 블록 순차 등장(stagger) — 패널은 활성 시 --rvl-i 순 cascade, 스택·모바일은 스크롤 진입 시 블록별(.is-inview). 인트로·영상 reveal·디졸브 제외 */
/* fade in/out 양방향 — 기본값에도 동일 transition을 둬 보이는 범위를 벗어나면 다시 흐려짐(사라질 때는 지연 없음) */
.ss-rvl {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ss-sec.is-active:not(.ss-stack) .ss-rvl,
.ss-sec.ss-stack .ss-rvl.is-inview,
.space-story-mo.ssm-fade .ss-rvl.is-inview {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--rvl-i, 0) * 0.09s);
  will-change: opacity, transform;
}
/* 데스크탑 리빌: 섹션 도착/스크롤 진입 후 딜레이 뒤 fade+slide-up (is-active 패널 + .ss-stack 인뷰, 모바일 제외) */
.ss-sec.is-active:not(.ss-stack) .ss-rvl,
.ss-sec.ss-stack .ss-rvl.is-inview { transition-delay: calc(0.5s + var(--rvl-i, 0) * 0.12s); }
/* 모바일 하이브리드는 청크 순서대로 개별 노출 → 순번 딜레이 대신 평평한 0.06s */
.space-story-mo.ssm-fade .ss-rvl.is-inview { transition-delay: 0.06s; }

/* -more도 reveal 후 opacity 0.6 유지 — reveal(opacity:1)이 .ss-more{opacity:0.6}을 덮으므로 되돌림. */
.ss-sec.is-active:not(.ss-stack) .ss-more.ss-rvl,
.ss-sec.ss-stack .ss-more.ss-rvl.is-inview,
.space-story-mo.ssm-fade .ss-more.ss-rvl.is-inview {
  opacity: 0.6;
}
/* hover 0.8 — reveal-0.6 규칙보다 높게(:hover 추가) 두어 hover가 이기도록. */
.ss-sec.is-active:not(.ss-stack) .ss-more.ss-rvl:hover,
.ss-sec.ss-stack .ss-more.ss-rvl.is-inview:hover,
.space-story-mo.ssm-fade .ss-more.ss-rvl.is-inview:hover {
  opacity: 0.8;
}

/* 스택·모바일은 블록이 스크롤 진입 시점에 개별 노출되므로 --rvl-i 시간차 cascade 대신 짧은 고정 지연 */
.ss-sec.ss-stack .ss-rvl.is-inview,
.space-story-mo.ssm-fade .ss-rvl.is-inview {
  transition-delay: 0.06s;
}
/* 큰 이미지 블록은 위치 이동 없이 opacity만 페이드 — .ss-rvl 기본 translateY(2rem)를 무효화(단독 블록은 슬라이드업 유지) */
.ss-block-img--full.ss-rvl,
.ss-block-img--split > img.ss-rvl,
.ss-sec[data-ss-index="7"] .ss-media-bg.ss-rvl,
.ss-split-img.ss-dissolve-stack.ss-rvl {
  transform: none;
}
/* 좌/우 나란한 쌍은 좌→우 순 등장 — 스택 섹션은 딜레이가 flat 0.06s라 nth-child로 직접 시차 */
.ss-sec.ss-stack .ss-block-img--split > img.ss-rvl.is-inview { transition-delay: 0.06s; }
.ss-sec.ss-stack .ss-block-img--split > img.ss-rvl.is-inview:nth-child(2) { transition-delay: 0.36s; }
/* 모바일 top-of-chunk 리빌 조기 소진 방지 — 청크 비활성 시 is-inview여도 숨김 유지, 패널 도착 시 리빌 */
.space-story-mo.ssm-fade .ssm-chunk:not(.is-active) .ss-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
/* ssm1(첫 청크 top) 리빌을 패널 정착 뒤 시작 — base 0.65s + 순번 0.12s */
.space-story-mo.ssm-fade .ssm-chunk.is-active [data-ssm-index="1"] .ss-rvl.is-inview { transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.12s); }
/* 챕터 커버 chnav(.ssm-chnav--onmedia)는 청크 활성 시 is-inview 없이도 패널 정착(0.65s) 뒤 리빌. eyebrow는 0.6 유지 */
.space-story-mo.ssm-fade .ssm-chunk.is-active .ssm-chnav--onmedia .ss-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.12s); }
.space-story-mo.ssm-fade .ssm-chunk.is-active .ssm-chnav--onmedia .ss-eyebrow.ss-rvl { opacity: 0.6; }

/* 인트로(index0) 슬라이드업 — JS가 배경 준비 후 .intro-in 부여 시 아래→위 슬라이드업(순번 스태거), 준비 전엔 숨김 대기 */
.ss-sec[data-ss-index="0"].is-active:not(.intro-in) .ss-rvl { opacity: 0; transform: translateY(2rem); transition: none; }
.ss-sec[data-ss-index="0"].intro-in .ss-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }

/* 모바일 하이브리드 풀페이지(.ssm-fp) — 패널(인트로 .ssm-hero / 본문 청크 .ssm-chunk)만 슬라이드+fade 전환 */
.ssm-fp.space-story-mo {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.ssm-fp > .ssm-hero,
.ssm-fp > .ssm-chunk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 600ms ease;
  will-change: transform, opacity;
}

/* 진입 첫 프레임 전환 억제(JS가 no-fp-anim 부여 후 rAF에서 제거) — 초기 슬라이드 플래시 차단 */
.ssm-fp.no-fp-anim > .ssm-hero,
.ssm-fp.no-fp-anim > .ssm-chunk { transition: none; }

.ssm-fp > .ssm-hero.is-next,
.ssm-fp > .ssm-chunk.is-next {
  transform: translateY(100%);
  opacity: 0;
}

.ssm-fp > .ssm-hero.is-prev,
.ssm-fp > .ssm-chunk.is-prev {
  transform: translateY(-100%);
  opacity: 0;
}

.ssm-fp > .ssm-hero.is-active,
.ssm-fp > .ssm-chunk.is-active {
  transform: translateY(0);
  opacity: 1;
}

/* 본문 청크 — 내부 세로 자유 스크롤, 스크롤바 숨김, 첫 콘텐츠는 헤더 아래로 */
.ssm-fp > .ssm-chunk {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: var(--ssm-top, 6.8rem);
}

.ssm-fp > .ssm-chunk::-webkit-scrollbar {
  display: none;
}

/* 선두가 인트로 hero인 청크(북촌·하라주쿠)는 hero가 100svh 풀블리드라 상단 패딩 제거 */
.ssm-fp > .ssm-chunk--lead-hero {
  padding-top: 0;
}

/* 인트로(.ssm-hero)가 top:0 풀블리드라 서브메뉴를 헤더 아래로. top은 JS(setTop)가 --ssm-hero-menu-top으로 헤더 bottom 정렬(폴백 --ssm-top) */
.ssm-fp .ssm-hero-menu {
  padding-top: var(--ssm-hero-menu-top, var(--ssm-top, 6.8rem));
}

/* 본문 청크 내 가로스크롤·슬라이더: 세로는 부모(청크)로 흘려보내 청크 자유 스크롤 유지 */
.ssm-fp .ssm-hscroll,
.ssm-fp .ssm-slides {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

@media all and (max-width: 1024px) {
  .ss-prose-title {
    font-size: 22px;
    line-height: 1.63;
  }

  .ss-prose-body {
    font-size: 16px;
    line-height: 1.75;
  }

  .ss-more {
    font-size: 12px;
  }

  .ss-more-arrow {
    display: inline-flex;
  }
}

/* [NEW-product-exhibition] EXHIBITION 연도 탭(sub_menu_3depth) — 고정 헤더 아래로 내려 안 가리게(content-asset-teathology-tea와 동일 오프셋). */
.exhibition-year-nav-wrap {
  padding-top: var(--header-height);
  padding-left: 25px;
  padding-right: 25px;
}
/* 배너 노출 시 배너 높이(30px)만큼 오프셋 추가 */
body.h-banner-show .exhibition-year-nav-wrap { padding-top: calc(var(--header-height) + 30px); }
.exhibition-year-nav-wrap .sub_flex_wrap { padding: 10px 0; }
.exhibition-year-nav-wrap + #common-content { padding-top: 0 !important; }
/* 모바일(≤1024px): 좌우 패딩 0 */
@media (max-width: 1024px) {
  .exhibition-year-nav-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  .exhibition-year-nav-wrap .sub_flex_wrap {
    padding: 2rem 1.6rem 0.8rem 1.6rem;
  }
  .exhibition-year-nav-wrap .sub_menu_3depth {
    margin-left: unset;
  }
  /* 상세 페이지에서만 브레드크럼·년도 탭 숨김 — wrap은 유지해 고정 헤더 오프셋 스페이서로 사용 */
  .exhibition-year-nav-wrap:has(+ #common-content .exhi_detail) .sub_flex_wrap,
  .exhibition-year-nav-wrap:has(+ #common-content .exhi_detail) .sub_menu_3depth {
    display: none;
  }
}

/* [NEW-exhibition] EXHIBITION 콘텐츠 컨테이너 상단 여백(연도탭 아래 간격) */
.exhibition-asset-container {
  margin-top: 45px;
}
@media (max-width: 1024px) {
  .exhibition-asset-container {
    margin-top: 2rem;
  }
  .exhi_detail.exhibition-asset-container {
    margin-top: 0;
  }
}

/* [NEW-exhibition] 리스트 카드 텍스트 타이포 — 공용 .txt_* 전역 영향 차단 위해 .exhibition-asset-container .main_img_txt로 스코프(제목은 내부 a까지 포함) */
.exhibition-asset-container .main_img_txt .txt_title,
.exhibition-asset-container .main_img_txt .txt_title a,
.exhibition-asset-container .main_img_txt .txt_date,
.exhibition-asset-container .main_img_txt .txt_summary {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.18px;
}
.exhibition-asset-container .main_img_txt .txt_date {
  margin-bottom: 12px;
}
@media only screen and (min-width: 1025px) {
  .exhibition-asset-container .main_img_txt .txt_title,
  .exhibition-asset-container .main_img_txt .txt_title a,
  .exhibition-asset-container .main_img_txt .txt_date,
  .exhibition-asset-container .main_img_txt .txt_summary {
    font-size: 18px;
    line-height: 24px;
  }
}
@media only screen and (max-width: 1024px) {
  .exhibition-asset-container .main_img_txt .txt_title,
  .exhibition-asset-container .main_img_txt .txt_title a,
  .exhibition-asset-container .main_img_txt .txt_date,
  .exhibition-asset-container .main_img_txt .txt_summary {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.018em;
  }
  .exhibition-asset-container .main_img_txt .txt_date {
    margin-bottom: 0.8rem;
  }
  .exhibition-asset-container .main_img {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .exhibition-asset-container .main_img_txt {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    text-align: left;
  }
}

/* [NEW-exhibition] 개별 상세 히어로 제목/본문 타이포 — 공용 클래스라 .exhibition-asset-container로 스코프. 모바일 .txt_detail_title margin-bottom은 4.8rem으로 덮어씀 */
@media only screen and (min-width: 1025px) {
  .exhibition-asset-container .txt_detail_title {
    font-size: 24px;
    margin-bottom: 45px;
  }
}
@media only screen and (max-width: 1024px) {
  .exhibition-asset-container .exhi_img_txt .txt_detail_title {
    font-size: 1.8rem;
    margin-bottom: 4.8rem;
  }
  .exhibition-asset-container .txt_long {
    font-size: 1.1rem;
  }
}

/* [NEW-teathology-tea] TEA THOLOGY 3depth(SIGNATURE/VARIATION/PAIRING/SEASONAL) — 각 이미지 단(row)=화면−헤더−서브메뉴(서브메뉴 높이 JS --tea-subnav-h). 데스크탑은 행 LCM 그리드 span·gap 0·object-fit:cover, 모바일(≤1024)은 가로 peek */
/* 고정 헤더 아래로 내려 서브메뉴가 헤더에 가리지 않게 / 각 이미지 단(row) 높이 = 화면−헤더−서브메뉴. 서브메뉴 높이는 JS가 --tea-subnav-h로 주입 */
.content-asset-teathology-tea {
  padding-top: var(--header-height);
  padding-left: 0;
  padding-right: 0;
  --tea-row-h: calc(100svh - var(--header-height, 72px) - var(--tea-subnav-h, 0px));
}

/* 배너 노출 시 배너 높이(30px)만큼 오프셋 추가 */
body.h-banner-show .content-asset-teathology-tea {
  padding-top: calc(var(--header-height) + 30px);
  --tea-row-h: calc(100svh - var(--header-height, 72px) - 30px - var(--tea-subnav-h, 0px));
}

/* 스테이지: 서브메뉴 + 이미지 그리드. 데스크탑은 높이 고정 없이 그리드가 단 수만큼 늘어나 세로 스크롤(모바일은 아래 미디어쿼리에서 1화면 고정). */
.tea-tea-stage {
  display: flex;
  flex-direction: column;
}

/* 서브메뉴(1·2depth + 3depth 탭) + 상단 카피: 자연 높이 */
.tea-tea-subnav {
  flex: 0 0 auto;
  padding: 0 25px;
}

.tea-tea-desc {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 60px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* 이미지 그리드 : 남은 세로 공간 전부 채움 */
.tea-img-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 0;
  width: 100%;
}

.tea-img-cell {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.tea-img-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

a.tea-img-cell {
  text-decoration: none;
  color: inherit;
}

/* --- hover/탭 오버레이 (흰 80% + 배경 흐림 30) --- */
/* 데스크탑: 상하좌우 가운데 / 데스크탑: 오버레이 위 클릭도 링크로 통과 */
.tea-img-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color: #111;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tea-ov-tab {
  font-size: 12px;
  letter-spacing: 0.0015em;
  line-height: 1.666;
  color: #000;
  opacity: 0.4;
}

.tea-ov-txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tea-ov-date,
.tea-ov-name {
  display: block;
  font-size: 16px;
  letter-spacing: 0.005em;
  line-height: 1.25;
}

/* 오버레이 제품명 줄(.tea-ov-product) — 부제 아래 */
.tea-ov-product {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.6;
  padding-top: 10px;
}

/* 데스크탑 숨김 (모바일 노출) */
.tea-ov-more {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #000;
  opacity: 0.6;
}

/* 데스크탑 숨김 (hover) */
.tea-ov-close {
  display: none;
}

/* 데스크탑 hover 시 오버레이 노출 */
@media (min-width: 1025px) {
  .tea-img-cell:hover .tea-img-overlay {
    opacity: 1;
  }
}

/* N-* 캐러셀 칸: 같은 그리드 칸에 슬라이드 겹쳐 쌓고 활성만 노출 → 페이드 전환 + 하단 점 내비. 모바일(≤1024)은 대표 1장만 노출. */
/* 드래그 시 텍스트 선택 방지 */
.tea-img-cell--carousel {
  display: block;
  -webkit-user-select: none;
  user-select: none;
}

/* 캐러셀 오버레이가 열린(is-open) 상태에서는 닫기 버튼 숨김 */
.tea-img-cell--carousel.is-open .tea-ov-close {
  display: none;
}

/* 디졸브(페이드) */
.tea-carousel-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
  text-decoration: none;
  color: inherit;
}

/* 드래그 시 이미지 고스트 방지 */
.tea-carousel-slide img {
  -webkit-user-drag: none;
  user-drag: none;
}

.tea-carousel-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.tea-carousel-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* 캐러셀 인디케이터 gap 20 */
.tea-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.tea-carousel-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.tea-carousel-dot.is-active {
  background: #fff;
}

/* 데스크탑: 캐러셀 활성 슬라이드 오버레이 항상 노출(흰 워시 없이 하단 정렬·흰 글씨·더 알아보기 버튼). */
@media (min-width: 1025px) {
  /* 드래그 가능 힌트 */
  .tea-img-cell--carousel {
    cursor: grab;
  }

  .tea-img-cell--carousel:active {
    cursor: grabbing;
  }

  .tea-img-cell--carousel .tea-carousel-slide.is-active .tea-img-overlay {
    opacity: 1;
  }

  /* 하단 그라디언트 영역 w100·h240 (흰 텍스트 가독용 0.5) */
  .tea-img-cell--carousel .tea-img-overlay {
    justify-content: flex-end;
    padding-bottom: 96px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 240px);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
  }

  .tea-img-cell--carousel .tea-ov-tab {
    display: none;
  }

  .tea-img-cell--carousel .tea-ov-txt {
    gap: 10px;
  }

  .tea-img-cell--carousel .tea-ov-date {
    font-size: 16px;
    font-weight: 700;
    line-height: 36px;
    color: #fff;
  }

  .tea-img-cell--carousel .tea-ov-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.05em;
    color: #fff;
  }

  /* 설명문→버튼 간격 30 / 버튼 폭 300 고정 */
  .tea-img-cell--carousel .tea-ov-more {
    display: inline-flex;
    justify-content: center;
    margin-top: 30px;
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #fff;
    color: #fff;
    opacity: 1;
  }

  .tea-img-cell--carousel .tea-ov-arrow {
    display: none;
  }
}

/* --- 개수별 데스크탑 레이아웃 (행 최대 5) --- */
.imgGrid-1 { grid-template-columns: repeat(1, 1fr); grid-template-rows: 1fr; }
.imgGrid-2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.imgGrid-3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.imgGrid-4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
.imgGrid-5 { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; }

/* 5-3 = 3+2 (LCM 6) — 5칸 가로 사이즈가 서로 다를 때(teathologyTea.js 자동 판별) */
.imgGrid-5-3 { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); }
.imgGrid-5-3 > .tea-img-cell { grid-column: span 2; }
.imgGrid-5-3 > .tea-img-cell:nth-child(n + 4) { grid-column: span 3; }

/* 6 = 4+2 */
.imgGrid-6 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.imgGrid-6 > .tea-img-cell:nth-child(n + 5) { grid-column: span 2; }

/* 6-3 = 3+3 */
.imgGrid-6-3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }

/* 6칸 3+3 자동 판별 대기 게이트 — 4+2로 그려졌다 3+3으로 바뀌는 레이아웃 튐을 가림(JS가 클래스 부여/해제) */
.tea-img-grid.is-grid-pending { visibility: hidden; }

/* 7 = 4+3 (LCM 12) */
.imgGrid-7 { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 1fr); }
.imgGrid-7 > .tea-img-cell { grid-column: span 3; }
.imgGrid-7 > .tea-img-cell:nth-child(n + 5) { grid-column: span 4; }

/* 8 = 4+4 */
.imgGrid-8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }

/* 9 = 5+4 (LCM 20) */
.imgGrid-9 { grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(2, 1fr); }
.imgGrid-9 > .tea-img-cell { grid-column: span 4; }
.imgGrid-9 > .tea-img-cell:nth-child(n + 6) { grid-column: span 5; }

/* 10 = 5+5 */
.imgGrid-10 { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); }

/* 11 = 5+4+2 (LCM 20) */
.imgGrid-11 { grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(3, 1fr); }
.imgGrid-11 > .tea-img-cell { grid-column: span 4; }
.imgGrid-11 > .tea-img-cell:nth-child(n + 6) { grid-column: span 5; }
.imgGrid-11 > .tea-img-cell:nth-child(n + 10) { grid-column: span 10; }

/* 12 = 5+4+3 (LCM 60) */
.imgGrid-12 { grid-template-columns: repeat(60, 1fr); grid-template-rows: repeat(3, 1fr); }
.imgGrid-12 > .tea-img-cell { grid-column: span 12; }
.imgGrid-12 > .tea-img-cell:nth-child(n + 6) { grid-column: span 15; }
.imgGrid-12 > .tea-img-cell:nth-child(n + 10) { grid-column: span 20; }

/* 13 = 5+4+4 (LCM 20) */
.imgGrid-13 { grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(3, 1fr); }
.imgGrid-13 > .tea-img-cell { grid-column: span 4; }
.imgGrid-13 > .tea-img-cell:nth-child(n + 6) { grid-column: span 5; }

/* 14 = 5+5+4 (LCM 20) */
.imgGrid-14 { grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(3, 1fr); }
.imgGrid-14 > .tea-img-cell { grid-column: span 4; }
.imgGrid-14 > .tea-img-cell:nth-child(n + 11) { grid-column: span 5; }

/* 15 = 5+5+5 */
.imgGrid-15 { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); }

/* [단 높이 고정] 각 단=var(--tea-row-h)(화면−헤더−서브메뉴). imgGrid-*의 1fr을 덮어 1단만 꽉·스크롤 시 다음 단(모바일 flex 가로 peek라 무관). */
.tea-img-grid {
  grid-template-rows: none;
  grid-auto-rows: var(--tea-row-h);
}

/* 하단 카피 + 예약 버튼 (스테이지 아래, 스크롤 영역) */
.tea-tea-bottom {
  text-align: center;
  padding: 150px 25px;
}

/* 예약 안내문 폭 800 (Story 티솔로지 공통) */
.tea-tea-bottom-desc {
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.tea-tea-reserve {
  max-width: 300px;
  display: inline-block;
  font-size: 12px;
  border: 1px solid #000;
  background-color: white;
  cursor: pointer;
  height: 35px;
  padding: 0;
  text-align: center;
  width: 100%;
  line-height: 35px;
  color: #000;
  text-decoration: none;
}

/* 모바일(≤1024) 가로 peek 스크롤: flex-basis calc(100% - 30px)(한 장 + 다음 30px peek), 1장(imgGrid-1)은 100% 꽉 채움. */
@media (max-width: 1024px) {
  /* 스테이지 높이 고정(1화면 꽉) 해제 — 이미지 높이는 비율을 따르고 상한만 아래 max-height로 */
  .tea-tea-stage {
    display: flex;
    flex-direction: column;
  }

  /* 모바일은 좌우 여백을 각 요소가 직접 가짐 → 데스크탑 .tea-tea-subnav 좌우 패딩을 0으로 복귀 */
  .tea-tea-subnav {
    padding: 0;
  }

  /* [모바일 단일 이미지 핀-릴리스] imgGrid-1 한정: 헤더 아래에 이미지를 한 화면 핀 고정 후 해제. body{overflow:auto}라 sticky가 안 먹어 JS(initSingleImagePin)가 .is-pinned 토글, 그리드에 이미지높이×2를 확보하고 cell을 absolute↔fixed로 전환 */
  /* 핀 구간 확보 위해 stage 고정높이 해제(단일 이미지 한정) */
  .tea-tea-stage:has(.imgGrid-1),
  body.h-banner-show .tea-tea-stage:has(.imgGrid-1) {
    height: auto;
  }
  /* 단일 이미지는 peek(가로 flex) 불필요 */
  .tea-img-grid.imgGrid-1 {
    display: block;
    overflow: visible;
    position: relative;
    height: calc(2 * (100dvh - var(--header-height)));
  }
  body.h-banner-show .tea-img-grid.imgGrid-1 {
    height: calc(2 * (100dvh - var(--top--height)));
  }
  /* 헤더 아래 한 화면 */
  .imgGrid-1 .tea-img-cell {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100dvh - var(--header-height));
  }
  body.h-banner-show .imgGrid-1 .tea-img-cell {
    height: calc(100dvh - var(--top--height));
  }
  /* top은 JS가 헤더 하단값으로 지정 / 헤더(99999) 아래 */
  .imgGrid-1 .tea-img-cell.is-pinned {
    position: fixed;
    z-index: 1;
  }
  /* 핀되는 순간부터 오버레이(제품정보) 노출(캐러셀 활성 슬라이드 포함) — 기존 opacity 규칙을 이기도록 !important */
  .imgGrid-1 .tea-img-cell.is-pinned .tea-img-overlay,
  .imgGrid-1 .tea-img-cell.is-pinned .tea-carousel-slide.is-active .tea-img-overlay {
    opacity: 1 !important;
    pointer-events: auto;
  }
  /* 핀이 아닐 땐(진입 전·해제 후) 오버레이 확실히 숨김 — is-open이 남아도 무시(핀 상태에서만 노출). */
  .imgGrid-1 .tea-img-cell:not(.is-pinned) .tea-img-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .tea_thology .sub_menu_3depth {
    margin-left: unset;
  }

  .tea-tea-desc {
    font-size: 14px;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .tea-tea-bottom {
    padding: 10rem 30px;
  }

  .tea-tea-reserve {
    max-width: none;
  }

  .tea-img-grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    grid-template-rows: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0;
  }

  /* peek 폭 고정: 다음 장이 항상 30px만 보이도록. 100vw는 세로 스크롤바 폭을 포함하므로 컨테이너 기준 100% 사용 */
  /* 썸네일 480px 기준 상한(peek 30px 차감) */
  .tea-img-grid > .tea-img-cell {
    flex: 0 0 calc(100% - 30px);
    max-height: calc(480px - 30px);
    grid-column: auto;
    scroll-snap-align: start;
  }

  /* 이미지 1장이면 영역을 꽉 채움 (peek 없음) */
  .imgGrid-1 > .tea-img-cell {
    flex-basis: 100%;
  }

  /* 캐러셀 칸: 모바일은 대표(첫) 1장만 노출, 캐러셀·점 비활성 → 단일 칸처럼 동작(탭 오버레이 유지). 슬라이드 절대배치 유지, 칸 높이는 flex-stretch로 확보. */
  .tea-img-cell--carousel .tea-carousel-slide {
    display: none;
  }

  .tea-img-cell--carousel .tea-carousel-slide:first-child {
    display: block;
    opacity: 1;
  }

  .tea-carousel-dots {
    display: none;
  }

  /* 모바일 오버레이: 스크롤로 노출(is-open), 텍스트 좌상단 + 하단 닫기. 흰 blur op50(가이드 p53) */
  .tea-img-overlay {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 40px 30px;
    gap: 20px;
    background: rgba(255, 255, 255, 0.5);
  }

  .tea-img-cell.is-open .tea-img-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* 카테고리 라벨 line-height 1 — 아래 gap이 20px로 보이게 */
  .tea-ov-tab {
    letter-spacing: 0;
    line-height: 1;
  }

  .tea-ov-txt {
    gap: 10px;
  }

  /* 제품명 줄(.tea-ov-product)이 비면 빈 flex 항목이 남아 간격이 벌어짐 → 비었을 때 숨겨 20px 유지 */
  .tea-ov-product:empty {
    display: none;
  }

  .tea-ov-date,
  .tea-ov-name {
    font-size: 18px;
    line-height: 1.28;
  }

  /* 모바일 캐러셀 오버레이 타이포(가이드): date 18px/medium/23px, name 14px/medium/23px, 둘 다 #000·letter-spacing 0.05em */
  .tea-img-cell--carousel .tea-ov-txt {
    gap: 20px;
  }

  .tea-img-cell--carousel .tea-ov-date {
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.05em;
    color: #000;
  }

  .tea-img-cell--carousel .tea-ov-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.05em;
    color: #000;
  }

  /* 품목 1개(imgGrid-1) 전용 — 제품설명(.tea-ov-name) 14px·op60, 제품명(.tea-ov-date)은 18px 유지 */
  .imgGrid-1 .tea-ov-name {
    font-size: 14px;
    opacity: 0.6;
  }

  /* 모바일 노출 */
  .tea-ov-more {
    display: inline-flex;
  }

  .tea-ov-close {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 30px;
    bottom: 40px;
    font-size: 13px;
    color: #111;
    letter-spacing: 0.0015em;
  }

  .tea-ov-close-x {
    font-size: 14px;
  }
}

/* [NEW-teathology-story] TEA THOLOGY STORY 풀페이지. PC: .ts-story > .ts-stage > .ts-sec×7 전환(커버 챕터칩·영상 reveal·sec2 그리드 축소·sec3 갤러리 내부스크롤). 모바일(.ts-story-mo): 세로 스크롤+마퀴 */
/* 활성 시 페이지 스크롤바 숨김 (JS 가 html.ts-fp 부여) */
html.ts-fp {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.ts-fp::-webkit-scrollbar {
  display: none;
}

.content-asset-teathology-story {
  padding-left: 0;
  padding-right: 0;
}

.content-asset-teathology-story .story_thology {
  padding-left: 25px;
  padding-right: 25px;
}

.content-asset-teathology-story .story-wrap {
  margin-top: 0;
}

.ts-story {
  position: relative;
}

.ts-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}

/* 섹션 공통(스택 + 전환 상태): 헤더(+배너) 아래에서 시작, 높이는 헤더 제외(뷰포트 − 오프셋 --ts-grid-top). */
.ts-sec {
  position: absolute;
  top: var(--ts-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)));
  left: 0;
  width: 100%;
  height: calc(100svh - var(--ts-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  opacity: 0;
  transform: translateY(100%);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 600ms ease;
  will-change: transform, opacity;
  overflow: hidden;
  pointer-events: none;
}

.ts-sec.is-next {
  transform: translateY(100%);
  opacity: 0;
}

.ts-sec.is-prev {
  transform: translateY(-100%);
  opacity: 0;
}

.ts-sec.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 인트로 서브메뉴: TEA THOLOGY/STORY nav를 인트로 좌상단(헤더 아래) 오버레이. JS(setSubnavTop)가 --ts-subnav-top으로 헤더 bottom 정렬 */
/* 섹션이 이미 헤더 아래(--ts-grid-top)에서 시작 → 서브메뉴는 섹션 상단(=헤더 bottom) 기준 */
.ts-sec .ts-intro-subnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
}

/* 인트로 서브메뉴는 다크 영상 커버 위라 흰색 — base가 rgba(0,0,0,0.4)/#000이라 그대로면 안 보임 */
.ts-intro-subnav .sub_menu_wraps > li a,
.ts-intro-subnav .sub_menu_3depth > li a {
  color: rgba(255, 255, 255, 0.5);
}

.ts-intro-subnav .sub_menu_wraps > li + li::before {
  background: rgba(255, 255, 255, 0.5);
}

.ts-intro-subnav .sub_menu_wraps > li.active a,
.ts-intro-subnav .sub_menu_3depth > li.active a {
  color: #fff;
}

/* 모바일(≤1024): 데스크탑 서브메뉴(.story_thology) 숨김 — 모바일은 .tsm-hero-menu가 대신 */
@media (max-width: 1024px) {
  .content-asset-teathology-story .story_thology {
    display: none;
  }
}

/* --- 배경 미디어(영상/이미지) 풀블리드 --- */
.ts-media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

video.ts-media-bg,
.ts-media-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ts-sec[data-ts-media="video"] {
  background: #000;
}

.ts-media-scrim {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.6;
}

.ts-media-scrim--dark {
  background: #000;
  opacity: 0.3;
}

/* index 5 커버(비-reveal): 다크 스크림만 opacity → 0.2 (이 섹션 한정) */
[data-ts-index="5"] .ts-media-scrim--dark {
  opacity: 0.2;
}

/* 영상 reveal: 같은 영상 위 텍스트 2단(step0 커버 / step1 프로즈) 크로스페이드 */
.ts-media--reveal .ts-reveal-step {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 600ms ease;
}

/* step0에서 겹친 step1 프로즈(opacity:0)가 클릭을 가로채 챕터칩이 안 눌리던 것을 pointer-events로 차단. step1 도달 시 auto 복원은 아래 규칙 */
.ts-media--reveal .ts-reveal-step[data-ts-step="1"] {
  opacity: 0;
  pointer-events: none;
}

/* reveal(steps=2) 커버: 색 veil 없이 영상 그대로 — 스크림 배경 투명·opacity 1, --dark/base veil 무효화 */
.ts-media--reveal .ts-media-scrim {
  background: transparent;
  opacity: 1;
  transition: -webkit-backdrop-filter 600ms ease, backdrop-filter 600ms ease;
}

/* step1: 색 막 없이 blur 프로스트만. 프레임 인셋을 inset:0으로 해제해 섹션 풀블리드(텍스트는 인셋 유지) */
.ts-cover--media.ts-media--reveal[data-step="1"] .ts-media-scrim {
  inset: 0;
  -webkit-backdrop-filter: blur(10px) brightness(1.2);
  backdrop-filter: blur(10px) brightness(1.2);
}

/* index 1(영상 reveal) step1: 흰 스크림 #fff·opacity 0.5 (blur 위에 얹힘). index 3(이미지형)은 아래 규칙대로 veil 없이 blur만. */
[data-ts-index="1"].ts-media--reveal[data-step="1"] .ts-media-scrim {
  background: #fff;
  opacity: 0.5;
}

/* index 3(이미지 reveal) step0(커버): XD대로 다크 스크림 #000·opacity 0.1. (step1은 아래 규칙대로 veil 없이 blur만) */
[data-ts-index="3"].ts-media--reveal[data-step="0"] .ts-media-scrim {
  background: #000;
  opacity: 0.1;
}

/* step1: 영상 자체에도 blur를 줘 프레임 사각 테두리를 부드럽게 */
.ts-media--reveal .ts-media-bg {
  transition: filter 600ms ease;
}
.ts-media--reveal[data-step="1"] .ts-media-bg {
  filter: blur(10px);
}

/* 이미지형 reveal(.ts-media--image)은 정지 이미지라 더 흐려 보여 블러 완화(영상형 index 1은 위 규칙 유지) */
.ts-cover--media.ts-media--image.ts-media--reveal[data-step="1"] .ts-media-scrim {
  -webkit-backdrop-filter: blur(16px) brightness(1.2);
  backdrop-filter: blur(16px) brightness(1.2);
}
.ts-media--image.ts-media--reveal[data-step="1"] .ts-media-bg {
  filter: blur(4px);
}

.ts-media--reveal[data-step="1"] .ts-reveal-step[data-ts-step="1"] .ts-prose-title,
.ts-media--reveal[data-step="1"] .ts-reveal-step[data-ts-step="1"] .ts-prose-body,
.ts-media--reveal[data-step="1"] .ts-reveal-step[data-ts-step="1"] .ts-prose-body p {
  color: #000;
}

/* reveal step이 제목만 있을 때(sec2) 제목 margin-bottom 제거 — 빈 공백으로 세로 중앙이 밀림 */
.ts-reveal-step .ts-prose-title:only-child {
  margin-bottom: 0;
}

.ts-media--reveal[data-step="1"] .ts-reveal-step[data-ts-step="0"] {
  opacity: 0;
  pointer-events: none;
}

.ts-media--reveal[data-step="1"] .ts-reveal-step[data-ts-step="1"] {
  opacity: 1;
  pointer-events: auto;
}

/* 커버 미디어 프레임(sec1·2·3) 뷰포트 인셋 — 좌우 150/상하 70px(1920) ~ 최소 25px(1025). 인트로(1-1)·모바일 제외 */
/* 섹션이 이미 헤더 아래에서 시작 → 프레임 상단여백은 frame-y 만 / 프레임 여백은 흰 배경(영상 커버의 data-ts-media 검정 배경 덮음) */
.ts-cover--media.ts-media {
  --ts-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --ts-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  --ts-frame-top: var(--ts-frame-y);
  padding: var(--ts-frame-top) var(--ts-frame-x) var(--ts-frame-y);
  background: #fff;
}

/* 스크림/리빌텍스트(일반 요소)를 프레임(콘텐츠박스) 안으로 인셋 — 절대배치라 padding 아닌 inset로 맞춤 */
.ts-cover--media.ts-media .ts-media-scrim,
.ts-cover--media.ts-media .ts-reveal-step {
  inset: var(--ts-frame-top) var(--ts-frame-x) var(--ts-frame-y) var(--ts-frame-x);
}

/* 배경 미디어: <video>는 치환요소라 left+right+width:auto로 안 늘어나므로 명시 크기로 프레임에 맞춤 */
.ts-cover--media.ts-media .ts-media-bg {
  top: var(--ts-frame-top);
  left: var(--ts-frame-x);
  right: auto;
  bottom: auto;
  width: calc(100% - var(--ts-frame-x) * 2);
  height: calc(100% - var(--ts-frame-top) - var(--ts-frame-y));
}

/* --- 커버/챕터 인트로 (중앙 정렬) --- */
.ts-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ts-cover--media {
  color: #fff;
}

/* 어두운 배경 위 흰색 텍스트 — 사이트 태그 규칙(h2·h3{color:#000}) 상속 차단. 영상 reveal 프로즈도 흰색 명시 */
.ts-cover--media .ts-eyebrow,
.ts-cover--media .ts-cover-title,
.ts-cover--media .ts-cover-chips,
.ts-cover--media .ts-chip,
.ts-cover--media .ts-prose-title,
.ts-cover--media .ts-prose-body,
.ts-cover--media .ts-prose-body p,
.ts-media--reveal .ts-prose-title,
.ts-media--reveal .ts-prose-body,
.ts-media--reveal .ts-prose-body p {
  color: #fff;
}

.ts-cover-inner {
  position: relative;
  z-index: 2;
  padding: 0 25px;
}

.ts-cover-inner--onmedia {
  color: #fff;
}

.ts-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.6;
}

.ts-cover-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.ts-cover-chips {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.005em;
}

.ts-chip {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* hover 시 opacity 0.8 */
.ts-chip:hover {
  opacity: 0.8;
  color: inherit;
  text-decoration: none;
}

/* 더 알아보기 링크 */
.ts-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.015em;
  color: #000;
  opacity: 0.6;
  text-decoration: none;
}

.ts-more:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* 모바일(≤1024px)에서만 노출 */
.ts-more-arrow {
  display: none;
  width: 7px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* 마무리 초대 문구 + CTA — parfums .pf-closing-cta/.pf-closing-desc/.pf-cta-buttons와 동일 값(버튼은 .tea-tea-reserve 유지) */
.ts-closing-cta { width: 100%; max-width: 850px; margin: 0 auto; text-align: center; padding: 200px 25px 0; }
.ts-closing-desc { margin: 0 0 100px; font-size: 16px; line-height: 1.6; color: #000; text-align: left; }
.ts-cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 150px 0; }

/* --- 본문 프로즈 --- */
.ts-prose-title {
  margin: 0 0 40px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* 텍스트 영역 공통: 최대 가로폭 800px (좌우 여백은 컨테이너 패딩 ≥25px가 보장) */
.ts-prose-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: inherit;
  word-break: keep-all;
  text-align: left;
}

.ts-prose-body p {
  margin: 0;
}

:lang(ja) .ts-prose-body {
  word-break: normal;
}

/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.ts-prose--center {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 25px;
  text-align: left;
}

/* 지정 2개 제목만 좌측 정렬 — sec1 reveal 제목·sec3 갤러리 제목(PC·모바일). 그 외 .ts-prose-title는 중앙 유지 */
.ts-media--video.ts-media--reveal .ts-reveal-step[data-ts-step="1"] .ts-prose-title, /* PC sec1 reveal */
.ts-grid--gallery .ts-prose-title, /* PC sec3 갤러리 */
.tsm-closing .tsm-prose .ts-prose-title, /* 모바일 sec3 본문 */
/* 모바일 sec1 본문 */
.ts-prose-title.ts-prose-title--mo-left {
  text-align: left;
}

/* 갤러리 캡션 제목을 본문과 동일한 800px 가운데 블록으로 제약해 좌측선 일치 */
.ts-grid--gallery .ts-prose-title {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* sec2 그리드(1-8) 제목도 본문과 같은 800px 블록 좌측선에 정렬 — .ts-grid-text가 display:flex라 width:100% 필요 */
.ts-grid--shrink .ts-prose-title {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* --- 좌 이미지 / 우 텍스트 분할(1-4) --- */
.ts-split {
  display: flex;
  align-items: center;
  background: #fff;
  color: #000;
}

.ts-split-img {
  flex: 0 0 50%;
  max-width: 50%;
  height: 100%;
}

.ts-split-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ts-split-text {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 150px 0 70px;
}

/* --- 그리드 공통(1-7 / 1-9) --- */
.ts-grid {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #000;
}

.ts-grid-row {
  display: grid;
  gap: 0;
}

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

.ts-grid-row > img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 이미지 사이 흰 선 방지: 1fr 5등분에서 트랙 폭이 소수가 되면 비트맵이 정수 픽셀로 스냅돼 경계에 1px 틈이 생김 → 마지막 칸을 제외한 이미지를 1px 넓혀 다음 칸 위로 겹침(sec2·sec3 공통) */
.ts-grid-row > img:not(:last-child) {
  width: calc(100% + 1px);
}

/* 행 사이 가로 흰 선 방지: 같은 라운딩으로 행 높이가 소수가 되므로 다음 행을 1px 끌어올려 이전 행 하단을 덮음(sec2는 단일 행이라 무영향) */
.ts-grid-row:not(:last-child) {
  margin-bottom: -1px;
}

/* 좌우 최소 여백 25px — 본문 800px 블록은 margin:auto로 중앙 배치 */
.ts-grid-text {
  flex: 0 0 auto;
  padding: 40px 25px;
}

/* 그리드 캡션 본문(최대 800px)을 컨테이너 안에서 가운데 정렬 — 제목(text-align:center)과 축 일치 */
/* width:100% — .ts-grid-text가 display:flex라 auto 마진 시 콘텐츠 실폭으로 축소돼 800px 좌측선과 어긋나는 것 방지 */
.ts-grid-text .ts-prose-body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* "더 알아보기"를 중앙 800px 본문 블록의 좌측선에 정렬 — calc 400px = 본문 max-width 800의 절반 */
.ts-grid-text .ts-more {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: calc(50% - 400px);
}

/* 그리드 섹션(1-7·1-9)은 커버와 달리 헤더 아래부터 — 상단 오프셋(JS --ts-grid-top, 폴백 헤더+배너30). border-box라 콘텐츠 높이=100svh−오프셋. */
/* 섹션이 이미 헤더 아래(--ts-grid-top)에서 시작 → 추가 상단 오프셋 불필요 */
.ts-grid--shrink,
.ts-grid--gallery {
  padding-top: 0;
}

/* 1-7: 전체높이(헤더 제외) → 스크롤(step1) 시 50% 축소+하단 텍스트 노출. media flex:0 0 auto로 고정해 텍스트(flex:1)가 공간 뺏는 것 방지. height%=콘텐츠박스(화면−오프셋). */
.ts-grid--shrink .ts-grid-media {
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  transition: height 700ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ts-grid--shrink[data-step="1"] .ts-grid-media {
  height: 50%;
}

.ts-grid--shrink .ts-grid-row,
.ts-grid--shrink .ts-grid-row > img {
  height: 100%;
}

/* 텍스트는 media 아래 남은 공간(step1=하단 절반)에 세로 중앙. step0엔 media가 전체를 채워 공간 0(클립·opacity 0). */
.ts-grid--shrink .ts-grid-text {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 600ms ease;
}

/* 텍스트는 그리드 축소(media height 700ms) 후 등장 — step1에만 딜레이 700ms. 역방향(step0)은 딜레이 0이라 즉시 사라짐. */
.ts-grid--shrink[data-step="1"] .ts-grid-text {
  opacity: 1;
  transition-delay: 700ms;
}

/* 1-9: 5×2 갤러리 + 텍스트 — 내부 스크롤(뷰포트 초과 시) */
.ts-grid--gallery {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ts-grid--gallery::-webkit-scrollbar {
  display: none;
}

/* 바닥 도달 시 스크롤이 위로 되감기던 현상 차단 — 하단에 2rem을 상시 확보해 리빌 전후 scrollHeight를 동일하게 유지(클램프 방지) */
.ts-grid--gallery[data-ts-scroll] {
  padding-bottom: 2rem;
}

.ts-grid--gallery .ts-grid-media {
  flex: 0 0 auto;
}

/* 이미지는 자연 높이(비율 유지)로 전부 노출 → 내부 스크롤(data-ts-scroll)로 1-9-1~10 지나면 뒤에 텍스트가 이어짐. object-fit:cover는 base 규칙. */
.ts-grid--gallery .ts-grid-row > img {
  height: auto;
}

.ts-grid--gallery .ts-grid-text {
  padding: 100px 25px 120px;
}

/* --- 블록 순차 등장(stagger) --- */
/* fade in/out 양방향 — 기본값에도 동일 transition을 둬 보이는 범위를 벗어나면 다시 흐려짐(사라질 때는 지연 없음) */
.ts-rvl {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ts-sec.is-active:not([data-ts-scroll]) .ts-rvl,
.ts-sec[data-ts-scroll] .ts-rvl.is-inview,
.ts-story-mo.tsm-fade .ts-rvl.is-inview {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--rvl-i, 0) * 0.09s);
  will-change: opacity, transform;
}
/* 데스크탑 리빌: 섹션 도착/스크롤 진입 후 딜레이 뒤 fade+slide-up (is-active 패널 + [data-ts-scroll] 인뷰, 모바일 제외) */
.ts-sec.is-active:not([data-ts-scroll]) .ts-rvl,
.ts-sec[data-ts-scroll] .ts-rvl.is-inview { transition-delay: calc(0.5s + var(--rvl-i, 0) * 0.12s); }
/* 모바일 하이브리드는 청크 순서대로 개별 노출 → 순번 딜레이 대신 평평한 0.06s */
.ts-story-mo.tsm-fade .ts-rvl.is-inview { transition-delay: 0.06s; }
/* 모바일 top-of-chunk 리빌 조기 소진 방지(gate) + 챕터 커버(.tsm-imgtext-text) 텍스트·칩 리빌 — 청크 비활성 시 숨김 유지, 활성 시 패널 정착(0.65s) 뒤 슬라이드업 */
.ts-story-mo.tsm-fade .tsm-chunk:not(.is-active) .ts-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
.ts-story-mo.tsm-fade .tsm-chunk.is-active .tsm-imgtext-text .ts-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.12s); }
.ts-story-mo.tsm-fade .tsm-chunk.is-active .tsm-imgtext-text .ts-eyebrow.ts-rvl { opacity: 0.6; }

/* 모바일 세로 스크롤은 항목이 스크롤 순서대로 개별 진입하므로 순번 딜레이 대신 평평한 0.06s. (데스크탑 갤러리 data-ts-scroll은 순차 캐스케이드 위해 순번 스태거 유지) */
.ts-story-mo.tsm-fade .ts-rvl.is-inview {
  transition-delay: 0.06s;
}

/* eyebrow는 reveal 후에도 60% 유지 — reveal(opacity:1)이 .ts-eyebrow{opacity:0.6}을 덮어, 같은 활성 컨텍스트에서 eyebrow만 0.6으로 되돌림. */
.ts-sec.is-active:not([data-ts-scroll]) .ts-eyebrow.ts-rvl,
.ts-sec[data-ts-scroll] .ts-eyebrow.ts-rvl.is-inview,
.ts-story-mo.tsm-fade .ts-eyebrow.ts-rvl.is-inview {
  opacity: 0.6;
}

/* -more도 reveal 후 opacity 0.6 유지 — reveal(opacity:1)이 .ts-more{opacity:0.6}을 덮으므로 되돌림(eyebrow와 동일 패턴). */
.ts-sec.is-active:not([data-ts-scroll]) .ts-more.ts-rvl,
.ts-sec[data-ts-scroll] .ts-more.ts-rvl.is-inview,
.ts-story-mo.tsm-fade .ts-more.ts-rvl.is-inview {
  opacity: 0.6;
}
/* hover 0.8 — reveal-0.6 규칙(특정도 0,5,0)보다 높게(:hover 추가 0,6,0) 두어 hover가 이기도록. */
.ts-sec.is-active:not([data-ts-scroll]) .ts-more.ts-rvl:hover,
.ts-sec[data-ts-scroll] .ts-more.ts-rvl.is-inview:hover,
.ts-story-mo.tsm-fade .ts-more.ts-rvl.is-inview:hover {
  opacity: 0.8;
}

/* 인트로(index0) 슬라이드업 — JS(fireIntroReveal)가 배경 준비 후 .intro-in 부여 시 아래→위 슬라이드업(순번 스태거), 준비 전엔 숨김 대기 */
.ts-sec[data-ts-index="0"].is-active:not(.intro-in) .ts-rvl { opacity: 0; transform: translateY(2rem); transition: none; }
.ts-sec[data-ts-index="0"].intro-in .ts-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
/* 모바일 인트로(.tsm-hero) eyebrow/title/chips 슬라이드업 — 데스크탑 인트로와 동일. 순번 스태거, eyebrow는 0.6 유지 */
.tsm-hero.intro-in .ts-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
.tsm-hero.intro-in .ts-eyebrow.ts-rvl { opacity: 0.6; }

/* [NEW-teathology-story] 모바일(세로 스크롤, ≤1024 / .ts-story-mo.display-mo) ※ 모바일 root font-size 62.5% → 1rem=10px */
.ts-story-mo {
  position: relative;
}

.tsm-sec {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 인트로 히어로(영상 + 서브메뉴) */
.tsm-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.tsm-bg,
.tsm-bg img,
video.tsm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

video.tsm-bg,
video.tsm-imgtext-bg {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 모바일은 일반 스크롤이라 헤더를 재가산하면 이중 오프셋 → 헤더 bottom 아래 2.8rem·좌우 1.6rem만 */
.tsm-hero-menu {
  position: relative;
  z-index: 2;
  padding: 2.8rem 1.6rem 2rem;
  color: #fff;
}

.tsm-submenu-label {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.tsm-submenu {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
}

.tsm-submenu a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.tsm-submenu .active a {
  color: #fff;
  font-size: 1.8rem;
}

/* 모바일 하이브리드 풀페이지(.tsm-fp) — 패널(인트로 .tsm-hero / 챕터 청크 .tsm-chunk) 슬라이드+fade(1제스처=1패널). 챕터 커버가 청크 선두라 상단 패딩 0 */
.tsm-fp.ts-story-mo {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.tsm-fp > .tsm-hero,
.tsm-fp > .tsm-chunk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 600ms ease;
  will-change: transform, opacity;
}

/* 진입 첫 프레임 전환 억제(JS가 no-fp-anim 부여 후 rAF에서 제거) — 초기 슬라이드 플래시 차단 */
.tsm-fp.no-fp-anim > .tsm-hero,
.tsm-fp.no-fp-anim > .tsm-chunk { transition: none; }

.tsm-fp > .tsm-hero.is-next,
.tsm-fp > .tsm-chunk.is-next {
  transform: translateY(100%);
  opacity: 0;
}

.tsm-fp > .tsm-hero.is-prev,
.tsm-fp > .tsm-chunk.is-prev {
  transform: translateY(-100%);
  opacity: 0;
}

.tsm-fp > .tsm-hero.is-active,
.tsm-fp > .tsm-chunk.is-active {
  transform: translateY(0);
  opacity: 1;
}

/* 챕터 청크: 내부 세로 자유 스크롤, 스크롤바 숨김. 선두가 100svh 풀블리드 커버라 상단 패딩 0. */
.tsm-fp > .tsm-chunk {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tsm-fp > .tsm-chunk::-webkit-scrollbar {
  display: none;
}

/* 인트로 서브메뉴: 풀페이지 핀으로 moRoot top이 흔들려도 헤더 bottom 아래 20px 정렬(JS setTop이 --tsm-hero-menu-top 부여, 폴백 --tsm-top). */
.tsm-fp .tsm-hero-menu {
  padding-top: var(--tsm-hero-menu-top, var(--tsm-top, 6.8rem));
}

/* 프로즈(모바일) */
.tsm-prose {
  padding: 6rem 3.2rem 10rem;
}

/* story 공통: 마무리 블록 바로 위 텍스트 하단 여백 제거 — 간격이 마무리 블록 자체 padding-top만 반영되도록 */
.tsm-prose:has(+ .tea-tea-bottom),
.ts-grid--gallery .ts-grid-text:has(+ .ts-closing-cta) {
  padding-bottom: 0;
}

/* 풀폭 이미지(1-4) */
.tsm-img {
  font-size: 0;
}

.tsm-img > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 영상/이미지 위 텍스트(1-2·1-5 영상 커버 / 1-8 이미지 커버): 풀스크린 + 하단 좌측 텍스트(시안) */
.tsm-imgtext {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tsm-imgtext-bg {
  position: absolute;
  inset: 0;
}

video.tsm-imgtext-bg,
.tsm-imgtext-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tsm-imgtext-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.3;
  z-index: 1;
}

.tsm-imgtext-text {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 3.2rem 4rem;
  text-align: left;
  color: #fff;
}

/* 전역 .ts-prose-title 중앙정렬 → 커버는 시안대로 좌측 */
.tsm-imgtext-text .ts-prose-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.333;
  letter-spacing: 0.01em;
  text-align: left;
}

/* 챕터 커버 칩(챕터 점프): 타이틀 아래 반투명 흰색, 한 줄 가로 스크롤(1-8 시안). 부모(.tsm-imgtext-text) 3.2rem 패딩을 좌우 상쇄해 화면 양끝까지, 내부 padding 3.2rem으로 첫/마지막 칩만 인셋. */
.tsm-cover-chips {
  display: flex;
  gap: 2.4rem;
  margin: 1rem -3.2rem 0;
  padding: 0 3.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tsm-cover-chips::-webkit-scrollbar {
  display: none;
}

/* [스크롤 인디케이터] 좌우 스크롤 가능(.is-scrollable) 시 우측 여백 10rem + 우측 6.4rem 흰→투명 mask 페이드 */
.tsm-cover-chips.is-scrollable {
  padding-right: 3.2rem;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%);
}

.tsm-cover-chips .ts-chip {
  flex: 0 0 auto;
}

/* 칩 우측 마진 꺾쇠(›) — 부모 ::after라 그라데이션 위에 노출, 우측 마진 3.2rem 맞춤. 칩이 넘쳐 스크롤 가능할 때만 노출 */
.tsm-imgtext-text:has(.tsm-cover-chips.is-scrollable)::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 4.1rem;
  width: 7px;
  height: 1.68rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  color: #fff;
  pointer-events: none;
  z-index: 3;
}

/* 마퀴(1-6/1-9): 1.2장 노출·40s·무한루프. track 2배(원본+복제) translateX -50% 루프 */
.tsm-marquee {
  overflow: hidden;
}

.tsm-marquee-track {
  display: flex;
  width: max-content;
  animation: tsm-marquee var(--tsm-marquee-duration, 40s) linear infinite;
}

.tsm-marquee--reverse .tsm-marquee-track {
  animation-direction: reverse;
}

/* 1.2장 노출 (100/1.2) */
.tsm-marquee-track > img {
  flex: 0 0 auto;
  width: 83.333vw;
  height: var(--tsm-marquee-h, 70svh);
  object-fit: cover;
  object-position: center;
  display: block;
}

@keyframes tsm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 마지막 섹션(1-10): 닫는 텍스트 (초대 문구·CTA는 아래 .tsm-prose--invite / .tsm-cta로 분리) */
.tsm-closing {
  padding-bottom: 6rem;
}

/* 초대 문구를 별도 섹션으로 분리 — 위 섹션에 붙여 상단 여백 0, 본문 섹션 자체 하단 여백만 간격으로 남김 */
.tsm-closing:has(+ .tsm-prose--invite) {
  padding-bottom: 0;
}

.tsm-prose--invite {
  padding-top: 0;
}

/* 모바일 타이포/화살표 */
@media all and (max-width: 1024px) {
  .ts-prose-title {
    font-size: 22px;
    line-height: 1.63;
  }

  .ts-prose-body {
    font-size: 16px;
    line-height: 1.75;
  }

  .ts-more {
    font-size: 12px;
  }

  .ts-more-arrow {
    display: inline-flex;
  }
}

/* [NEW-product-parfums-story] PRODUCT·PARFUMS STORY 풀페이지(PC .pf-*) — space/teathology 패턴(커버/프로즈/분할/블러리빌/영상박스·슬라이더/이미지슬라이더/CTA). */
html.pf-fp { scrollbar-width: none; -ms-overflow-style: none; }
html.pf-fp::-webkit-scrollbar { display: none; }

.content-asset-parfums-story { padding-left: 0; padding-right: 0; }
.content-asset-parfums-story .parfums_story { padding-left: 25px; padding-right: 25px; }
.content-asset-parfums-story .story-wrap { margin-top: 0; }

.pf-story { position: relative; }
.pf-stage { position: relative; height: 100svh; overflow: hidden; background: #fff; }
/* 검정 배경이 이어지는 구간(idx6→idx7) 전환 동안만 스테이지를 검정으로 — 크로스페이드 사이로 흰 스테이지가 드러나 검정이 바래는 것 차단(JS paintStageBk) */
.pf-stage.pf-stage--bk { background: #000; }

/* 섹션 공통(스택+전환) — 헤더(+배너) 아래에서 시작, 높이는 뷰포트-오프셋(--pf-grid-top). */
.pf-sec {
  position: absolute; left: 0; width: 100%;
  top: var(--pf-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)));
  height: calc(100svh - var(--pf-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  opacity: 0; transform: translateY(100%);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity; overflow: hidden; pointer-events: none;
}
.pf-sec.is-next { transform: translateY(100%); opacity: 0; }
.pf-sec.is-prev { transform: translateY(-100%); opacity: 0; }
.pf-sec.is-active { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* 인트로 서브메뉴(다크 커버 위 흰색) */
.pf-sec .pf-intro-subnav { position: absolute; top: 0; left: 0; right: 0; z-index: 6; } /* 섹션이 이미 헤더 아래(--pf-grid-top)에서 시작 */
.pf-intro-subnav .sub_menu_wraps > li a, .pf-intro-subnav .sub_menu_3depth > li a { color: rgba(255, 255, 255, 0.5); }
.pf-intro-subnav .sub_menu_wraps > li + li::before { background: rgba(255, 255, 255, 0.5); }
.pf-intro-subnav .sub_menu_wraps > li.active a, .pf-intro-subnav .sub_menu_3depth > li.active a { color: #fff; }

/* 미디어 배경(이미지/영상) */
.pf-sec[data-pf-media] { background: #000; }
.pf-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-media-bg img, video.pf-media-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* sec1 그리드 커버 — 보틀 스틸 8장(2행 4열). minmax(0,1fr)로 셀 강제 균등(1fr=minmax(auto,1fr)이라 이미지 내용 높이로 행이 커져 상·하 불일치하던 것 방지). */
.pf-media-bg--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.pf-media-scrim { position: absolute; inset: 0; background: #000; opacity: 0.35; }

/* 커버 미디어 프레임(sec4·sec2 index3) 뷰포트 인셋 — 좌우 150/상하 70px(1920) ~ 최소 25px(1025). 모바일 제외, 여백은 흰 배경 */
/* 섹션이 이미 헤더 아래에서 시작 → 프레임 상단여백은 frame-y 만 */
.pf-cover--media.pf-media,
.pf-cover--light.pf-media {
  --pf-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --pf-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  --pf-frame-top: var(--pf-frame-y);
  padding: var(--pf-frame-top) var(--pf-frame-x) var(--pf-frame-y);
  background: #fff;
}
/* 배경 미디어/스크림(절대배치)을 프레임 안으로 인셋 — padding은 절대요소를 밀지 못하므로 inset로 맞춤 */
.pf-cover--media.pf-media .pf-media-bg,
.pf-cover--media.pf-media .pf-media-scrim,
.pf-cover--light.pf-media .pf-media-bg,
.pf-cover--light.pf-media .pf-media-scrim {
  inset: var(--pf-frame-top) var(--pf-frame-x) var(--pf-frame-y) var(--pf-frame-x);
  width: auto; height: auto;
}
/* index3(light) — 이미지 원비율(width 100%·height auto)로 프레임 안 세로 중앙 배치 */
.pf-cover--light.pf-media .pf-media-bg { display: flex; align-items: center; justify-content: center; }
.pf-cover--light.pf-media .pf-media-bg img { width: 100%; height: auto; object-fit: initial; }
/* sec1 그리드 reveal 커버(index 1)는 풀블리드 — 프레임 상하좌우 여백 제거(8 챕터 커버는 프레임 유지). */
.pf-cover--media.pf-media.pf-media--reveal { padding: 0; }
.pf-cover--media.pf-media.pf-media--reveal .pf-media-bg,
.pf-cover--media.pf-media.pf-media--reveal .pf-media-scrim { inset: 0; width: 100%; height: 100%; }
/* sec3 챕터 커버(index 6) — scrim만 블러 프레임 이미지(story-blur-bk.png)로 대체해 섹션 전체 풀블리드. video는 기존 프레임 박스 크기(calc) 그대로 유지. */
.pf-cover--imgframe.pf-media { padding: 0; background: #000; }
.pf-cover--imgframe.pf-media .pf-media-bg {
  inset: var(--pf-frame-top) var(--pf-frame-x) var(--pf-frame-y) var(--pf-frame-x);
  right: auto; bottom: auto;
  width: calc(100% - (var(--pf-frame-x) * 2));
  height: calc(100% - var(--pf-frame-top) - var(--pf-frame-y));
}
.pf-cover--imgframe.pf-media .pf-media-scrim {
  inset: 0; width: 100%; height: 100%;
  background: url("../images/story-blur-bk.png") center / 120% 120% no-repeat;
  opacity: 1;
}

/* 커버(중앙) */
.pf-cover { display: flex; align-items: center; justify-content: center; text-align: center; }
.pf-cover--media { color: #fff; }
.pf-cover--media .pf-eyebrow, .pf-cover--media .pf-cover-title, .pf-cover--media .pf-cover-chips, .pf-cover--media .pf-chip { color: #fff; }
/* 밝은 배경 커버(스크림 없음) — 텍스트 검정. */
.pf-cover--light { color: #000; }
.pf-cover--light .pf-eyebrow, .pf-cover--light .pf-cover-title, .pf-cover--light .pf-cover-chips, .pf-cover--light .pf-chip { color: #000; }
.pf-cover-inner { position: relative; z-index: 2; padding: 0 25px; }
.pf-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0.6; }
.pf-cover-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.5; }
.pf-cover-chips { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 20px 0 0; font-size: 12px; font-weight: 500; line-height: 1.333; letter-spacing: 0.005em; }
.pf-chip { display: inline-block; color: inherit; text-decoration: none; white-space: nowrap; opacity: 0.6; cursor: pointer; transition: opacity 0.3s ease; }
.pf-chip:hover { opacity: 1; color: inherit; text-decoration: none; }

/* sec1 그리드 커버 리빌 — step0 흰 오버레이 20%+텍스트 / step1 오버레이 해제·텍스트 소멸. */
.pf-media--reveal .pf-reveal-step { transition: opacity 600ms ease; }
.pf-media--reveal[data-step="1"] .pf-reveal-step[data-pf-step="0"] { opacity: 0; pointer-events: none; }
.pf-media--reveal .pf-media-scrim { background: #fff; opacity: 0.2; transition: opacity 600ms ease; }
.pf-media--reveal[data-step="1"] .pf-media-scrim { opacity: 0; }
/* step0 그리드 이미지도 opacity 20% → step1 원래대로(100%). */
.pf-media--reveal .pf-media-bg--grid { opacity: 0.2; transition: opacity 600ms ease; }
.pf-media--reveal[data-step="1"] .pf-media-bg--grid { opacity: 1; }
/* step0 배경이 밝으므로 리빌 텍스트(eyebrow·타이틀·칩)는 검정색. */
.pf-media--reveal .pf-reveal-step,
.pf-media--reveal .pf-reveal-step .pf-eyebrow,
.pf-media--reveal .pf-reveal-step .pf-cover-title,
.pf-media--reveal .pf-reveal-step .pf-cover-chips,
.pf-media--reveal .pf-reveal-step .pf-chip { color: #000; }

/* 텍스트 섹션(프로즈) — max-width 800(space/teathology 공통). */
.pf-text { display: flex; align-items: center; justify-content: center; background: #fff; color: #000; }
/* index=2 순수 텍스트 섹션 — 헤더 포함 전체 뷰포트 세로 중앙 정렬. padding-bottom=--pf-grid-top으로 시각 중심을 위로 옮겨 50svh 안착 */
.pf-sec.pf-text[data-pf-index="2"] { padding-bottom: var(--pf-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))); }
/* 부모 .pf-text가 display:flex라 width 없으면 콘텐츠 실폭으로 축소돼 850(=텍스트 800) 폭이 보장되지 않음 / 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.pf-prose { width: 100%; max-width: 850px; margin: 0 auto; padding: 0 25px; text-align: left; }
.pf-prose-title { margin: 0 0 40px; font-size: 24px; font-weight: 500; line-height: 1.5; }
.pf-prose-body { display: flex; flex-direction: column; gap: 20px; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0.005em; color: inherit; word-break: keep-all; text-align: left; }
.pf-prose-body p { margin: 0; }
:lang(ja) .pf-prose-body { word-break: normal; }

/* 분할(좌 이미지 / 우 텍스트) */
.pf-split { display: flex; align-items: center; background: #fff; color: #000; }
.pf-split-img { flex: 0 0 50%; max-width: 50%; height: 100%; }
.pf-split-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-split-text { flex: 0 0 50%; max-width: 50%; padding: 0 150px 0 70px; }

/* sec2 영상 박스 — 풀블리드 아님, max-width 800 중앙 */
/* .pf-sec[data-pf-media]{background:#000}(커버용)를 이기도록 특이도 상향 — 영상박스는 흰 배경. */
.pf-sec.pf-videobox { display: flex; align-items: center; justify-content: center; background: #fff; }
/* 콘텐츠(영상·텍스트) 폭 800px + 좌우 25px 패딩(border-box) → max-width 850. */
.pf-videobox-inner { width: 100%; max-width: 850px; padding: 0 25px; }
/* sec2 타임코드 영상: 파일에 구워진 상·하 검정 레터박스(각 1/6) 크롭 — 흰 밴드(8:3)만 노출, 타임코드 크기·좌우 유지. 영상 무띠 버전 확보 시 원복. */
.pf-video-bg { width: 100%; aspect-ratio: 9 / 3; height: auto; object-fit: cover; object-position: center; display: block; background: #fff; }
/* sec2 영상 하단 텍스트 — 영상 폭에 맞춰 좌측 정렬·검정. */
.pf-videobox-text { margin-top: 100px; margin-bottom: 150px; color: #000; }
.pf-videobox-text.pf-prose { max-width: none; padding: 0}

/* sec3 영상 슬라이더(Swiper) — 검정 배경, centeredSlides+loop(활성 중앙+좌우 peek). 활성 영상만 재생(parfumsStory.js). 하단 텍스트는 내부 세로 스크롤. */
.pf-filmslider { display: flex; flex-direction: column; justify-content: flex-start; background: #000; color: #fff; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-top: 100px; }
.pf-filmslider::-webkit-scrollbar { display: none; }
.pf-film-swiper { width: 100%; padding: 0 25px; flex-shrink: 0; margin-bottom: 105px; }
/* swiper.css의 .swiper-slide/.swiper-wrapper{height:100%}가 슬라이드를 컨테이너 높이에 묶어 600px 영상이 .swiper overflow:hidden에 잘리던 것 → 콘텐츠 높이(auto)로 해제, 래퍼는 stretch 방지(flex-start). */
.pf-film-swiper .swiper-wrapper { height: auto; align-items: flex-start; }
.pf-film-swiper .swiper-slide { width: 900px; box-sizing: border-box; height: auto; opacity: 0.4; transition: opacity 0.4s ease; }
.pf-film-swiper .swiper-slide-active { opacity: 1; }
.pf-film { display: flex; flex-direction: column; align-items: center; }
.pf-film-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
/* 타임코드=영상 위(중앙), 제품명=영상 아래(중앙) — 활성 슬라이드만 노출. */
.pf-film-time { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; text-align: center; margin: 0 0 40px; }
.pf-film-caption { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; text-align: center; margin: 40px 0 0; }
.pf-film-swiper .swiper-slide .pf-film-time,
.pf-film-swiper .swiper-slide .pf-film-caption { opacity: 0; transition: opacity 0.4s ease; }
.pf-film-swiper .swiper-slide-active .pf-film-time,
.pf-film-swiper .swiper-slide-active .pf-film-caption { opacity: 1; }
.pf-filmslider-text { margin: 100px auto 200px; color: #fff; flex-shrink: 0; }

/* sec4 클로징 — 텍스트+이미지 슬라이더(비활성 opacity .5)+오프라인 초대+CTA 2버튼. */
.pf-closing { display: flex; flex-direction: column; justify-content: flex-start; background: #fff; color: #000; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-top: 0; }
.pf-closing::-webkit-scrollbar { display: none; }
/* 바닥 도달 시 스크롤이 위로 되감기던 현상 차단 — 하단에 2rem을 상시 확보해 리빌 전후 scrollHeight를 동일하게 유지(클로징 한정) */
.pf-closing[data-pf-scroll] { padding-bottom: 2rem; }
.pf-closing-text { padding-top: 100px; padding-bottom: 100px; }
/* sec4 이미지 슬라이더 — Swiper(centeredSlides+loop, slidesPerView:'auto', spaceBetween:0). 슬라이드 800×600, 비활성 0.5/활성 1. swiper.css의 height:100% 해제(콘텐츠 높이). */
.pf-imgslider { margin: 180px 0 0; flex-shrink: 0; }
.pf-imgslider .swiper-wrapper { height: auto; align-items: flex-start; }
.pf-imgslider .swiper-slide { width: 800px; box-sizing: border-box; height: auto; opacity: 0.5; transition: opacity 0.4s ease; }
.pf-imgslider .swiper-slide-active { opacity: 1; }
.pf-imgslider .swiper-slide img { width: 100%; height: 600px; object-fit: cover; display: block; }
/* sec4 스토어 슬라이더 — 좌우 화살표 + 1/N 넘버 + 활성 매장정보(모바일 pfm-store 패턴 이식, 흰 배경·검정). */
/* 매장정보(좌) + 화살표·넘버(우)를 한 줄에, 상단 정렬, 850px 중앙 축. */
.pf-imgslider-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; max-width: 850px; margin: 0 auto; padding: 40px 25px 0; }
.pf-imgslider-nav { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.pf-imgslider-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.pf-imgslider-arrow[data-pf-store-next] svg { transform: scaleX(-1); } /* 제공 SVG는 좌(‹) 방향 → 다음 버튼은 반전(›) */
.pf-imgslider-count { display: flex; gap: 10px; font-size: 11px; font-weight: 400; line-height: 13px; letter-spacing: 0.015em; color: #000; }
.pf-imgslider-info { color: #000; }
.pf-imgslider-name { margin: 0 0 30px; font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: 0.005em; }
.pf-imgslider-dl { display: inline-block; margin: 0; font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 0.005em; text-align: left; }
.pf-imgslider-dl > div { display: flex; gap: 24px; }
.pf-imgslider-dl dt { flex: 0 0 60px; margin: 0; color: rgba(0, 0, 0, 0.5); }
.pf-imgslider-dl dd { margin: 0; }
.pf-closing-cta { width: 100%;  max-width: 850px; margin: 0 auto; text-align: center; padding: 200px 25px 0; }
.pf-closing-desc { margin: 0 0 100px; font-size: 16px; line-height: 1.6; color: #000; text-align: left;}
.pf-cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 150px 0}

/* 블록 순차 등장 */
/* fade in/out 양방향 — 기본값에도 동일 transition을 둬 보이는 범위를 벗어나면 다시 흐려짐(사라질 때는 지연 없음) */
.pf-rvl { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pf-sec.is-active:not([data-pf-scroll]) .pf-rvl,
.pf-sec[data-pf-scroll] .pf-rvl.is-inview,
.pf-story-mo.pfm-fade .pf-rvl.is-inview {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--rvl-i, 0) * 0.09s);
  will-change: opacity, transform;
}
/* 데스크탑 리빌: 섹션 도착/스크롤 진입 후 딜레이 뒤 fade+slide-up (is-active 패널 + [data-pf-scroll] 인뷰, 모바일 제외) */
.pf-sec.is-active:not([data-pf-scroll]) .pf-rvl,
.pf-sec[data-pf-scroll] .pf-rvl.is-inview { transition-delay: calc(0.5s + var(--rvl-i, 0) * 0.12s); }
/* 모바일 하이브리드는 청크 순서대로 개별 노출 → 순번 딜레이 대신 평평한 0.06s (tea story 동일). */
.pf-story-mo.pfm-fade .pf-rvl.is-inview { transition-delay: 0.06s; }
/* 본문 챕터 텍스트(.pfm-mediatext-sec .pfm-hero-text = sec3) 순차 리빌 — 인트로와 같은 0.12s 순번 간격, 스크롤 진입 base 0.06s는 유지 */
.pf-story-mo.pfm-fade .pfm-mediatext-sec .pfm-hero-text .pf-rvl.is-inview { transition-delay: calc(0.06s + var(--rvl-i, 0) * 0.12s); }
/* eyebrow는 reveal 후에도 60% 유지(reveal의 opacity:1이 .pf-eyebrow{0.6}을 덮으므로 되돌림). */
.pf-story-mo.pfm-fade .pf-eyebrow.pf-rvl.is-inview { opacity: 0.6; }
/* 이미지 블록은 위치 이동 없이 opacity만 페이드 — mo/4·mo/6·mo/9 대상, .pf-rvl 기본 translateY(2rem) 무효화. 데스크탑 스토어 슬라이더(.pf-imgslider)는 제외(슬라이드업 유지) */
.pfm-mediatext .pfm-mediatext-media.pf-rvl,
.pfm-cover--light .pfm-bg.pf-rvl,
.pfm-cover--dark .pfm-bg.pf-rvl {
  transform: none;
}
/* 모바일 top-of-chunk 리빌 조기 소진 방지(gate) + 챕터 커버 텍스트·칩 리빌 — 청크 비활성 시 숨김 유지, 활성 시 패널 정착(0.65s) 뒤 슬라이드업 */
.pf-story-mo.pfm-fade .pfm-chunk:not(.is-active) .pf-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
.pf-story-mo.pfm-fade .pfm-chunk.is-active .pfm-cover-text .pf-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.12s); }
.pf-story-mo.pfm-fade .pfm-chunk.is-active .pfm-cover-text .pf-eyebrow.pf-rvl { opacity: 0.6; }
/* chnav 화살표(›, ::after)는 슬라이드업 불가 → opacity 0→1 fade로 커버 텍스트 리빌 뒤(0.9s) 등장 */
.pf-story-mo.pfm-fade .pfm-chunk:not(.is-active) .pfm-cover-text:has(.pfm-cover-chips.is-scrollable)::after { opacity: 0; }
.pf-story-mo.pfm-fade .pfm-chunk.is-active .pfm-cover-text:has(.pfm-cover-chips.is-scrollable)::after { opacity: 1; transition: opacity 0.7s ease; transition-delay: 0.9s; }

/* 인트로(index0) 슬라이드업 — JS(fireIntroReveal)가 배경 준비 후 .intro-in 부여 시 아래→위 슬라이드업(순번 스태거), 준비 전엔 숨김 대기 */
.pf-sec[data-pf-index="0"].is-active:not(.intro-in) .pf-rvl { opacity: 0; transform: translateY(2rem); transition: none; }
.pf-sec[data-pf-index="0"].intro-in .pf-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
/* 모바일 인트로(.pfm-hero) eyebrow/title/chips 슬라이드업 — 데스크탑 인트로와 동일. 순번 스태거, eyebrow는 0.6 유지 */
.pfm-hero.intro-in .pf-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
.pfm-hero.intro-in .pf-eyebrow.pf-rvl { opacity: 0.6; }
/* 첫 진입 깜박임(FOUC) 방지 — 리빌 마킹 여부와 무관하게 .intro-in 전에는 숨김 상태로 대기 */
.pfm-hero:not(.intro-in) .pfm-hero-text > * { opacity: 0; transform: translateY(2rem); }

/* [NEW-product-tea-story] PRODUCT·TEA STORY 풀페이지(PC .te-*) — space/teathology/parfums 패턴(커버/영상흐림/분할/풀블리드 텍스트오버/텍스트전용/50:50/CTA). */
html.te-fp { scrollbar-width: none; -ms-overflow-style: none; }
html.te-fp::-webkit-scrollbar { display: none; }

.content-asset-tea-story { padding-left: 0; padding-right: 0; }
.content-asset-tea-story .tea_story { padding-left: 25px; padding-right: 25px; }
.content-asset-tea-story .story-wrap { margin-top: 0; }

.te-story { position: relative; }
.te-stage { position: relative; height: 100svh; overflow: hidden; background: #fff; }

/* 섹션 공통(스택+전환) — 헤더(+배너) 아래에서 시작, 높이는 뷰포트-오프셋. 오프셋 --te-grid-top=헤더 bottom(배너 포함, JS가 배너 토글 시 갱신). */
.te-sec {
  position: absolute; left: 0; width: 100%;
  top: var(--te-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)));
  height: calc(100svh - var(--te-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  opacity: 0; transform: translateY(100%);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity; overflow: hidden; pointer-events: none;
}
.te-sec.is-next { transform: translateY(100%); opacity: 0; }
.te-sec.is-prev { transform: translateY(-100%); opacity: 0; }
.te-sec.is-active { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* 인트로 서브메뉴 — 섹션이 이미 --te-grid-top에서 시작하므로 서브메뉴는 섹션 상단(=헤더 bottom) 기준. */
.te-sec .te-intro-subnav { position: absolute; top: 0; left: 0; right: 0; z-index: 6; }
/* 인트로 커버(차 이미지) 위 흰 텍스트 — space/teathology 인트로 서브메뉴와 동일(비활성 흰 50%·활성 흰색). */
.te-intro-subnav .sub_menu_wraps > li a,
.te-intro-subnav .sub_menu_3depth > li a { color: rgba(255, 255, 255, 0.5); }
.te-intro-subnav .sub_menu_wraps > li + li::before { background: rgba(255, 255, 255, 0.5); }
.te-intro-subnav .sub_menu_wraps > li.active a,
.te-intro-subnav .sub_menu_3depth > li.active a { color: #fff; }

/* 미디어 배경(이미지/영상) */
.te-sec[data-te-media] { background: #000; }
.te-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.te-media-bg img, video.te-media-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.te-media-bg img.te-obj-top { object-position: center top; }
.te-media-bg img.te-obj-bottom { object-position: center bottom; }
.te-media-scrim { position: absolute; inset: 0; background: #000; opacity: 0.32; }
.te-media-scrim.te-media-scrim--soft { opacity: 0.22; }

/* 커버(중앙) */
.te-cover { display: flex; align-items: center; justify-content: center; text-align: center; }
.te-cover-inner { position: relative; z-index: 2; padding: 0 25px; color: #000; }
.te-cover--dark .te-cover-inner { color: #fff; }
/* 인트로(index 0) 텍스트 흰색 — BM 본문 재등록 없이 CSS로 지정(HTML class는 te-cover--light 유지). */
.te-cover[data-te-index="0"] .te-cover-inner { color: #fff; }
.te-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0.6; color: inherit; }
.te-cover-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.5; color: inherit; }
.te-cover-chips { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 20px 0 0; font-size: 12px; font-weight: 500; line-height: 1.333; letter-spacing: 0.005em; color: inherit; }
.te-chip { display: inline-block; color: inherit; text-decoration: none; white-space: nowrap; opacity: 0.6; cursor: pointer; transition: opacity 0.3s ease; }
.te-chip:hover { opacity: 1; color: inherit; text-decoration: none; }

/* ch2 커버+본문 병합(내부 스크롤 data-te-scroll) — 2-1 컵 이미지 2화면 높이 연속 스크롤(상단=차 커버/하단=한국 유기농 텍스트). 섹션 3→4를 네이티브 스크롤로 잇기 위해 한 섹션으로 통합. */
.te-cover2 { background: #fff; color: #000; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.te-cover2::-webkit-scrollbar { display: none; }
.te-cover2-track { position: relative; height: calc((100svh - var(--te-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)))) * 2); }
.te-cover2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 커버 텍스트 — 초기 화면(섹션 1화면 높이) 안에서 상하·좌우 가운데 */
.te-cover2-cover { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: calc(100svh - var(--te-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)))); display: flex; align-items: center; justify-content: center; text-align: center; }
/* 한국 유기농 텍스트 — 이미지 하단부(좌측 인덴트), 스크롤 진입 시 등장. */
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.te-cover2-text { position: absolute; z-index: 3; left: 0; right: 0; max-width: 850px; margin: 0 auto; padding: 0 25px; bottom: 100px; color: #000; }
/* ch2 cover2(index 3) — ch4 커버처럼 상하좌우 흰 인셋 프레임. 이미지(.te-cover2-img)를 상하 frame-y·좌우 frame-x로 인셋, 섹션 배경(#fff)이 여백으로 노출 */
/* .te-sec[data-te-media]{#000}를 이겨 프레임 여백이 흰색이 되도록 후순위·동일 특이도로 override */
.te-cover2[data-te-index="3"] {
  --te-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --te-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  background: #fff;
}
.te-cover2[data-te-index="3"] .te-cover2-img {
  top: var(--te-frame-y); left: var(--te-frame-x); right: auto; bottom: auto;
  width: calc(100% - var(--te-frame-x) * 2);
  height: calc(100% - var(--te-frame-y) * 2);
}
/* 프레임 흰 여백(frame-y)만큼 bottom 가산 → 텍스트가 이미지 하단에서 100px 위(프레임 여백 포함). */
.te-cover2[data-te-index="3"] .te-cover2-text { bottom: calc(100px + var(--te-frame-y)); }

/* ch1 영상 커버 프레임(sec1=1-1 동영상) — 뷰포트 안쪽 흰 인셋. 좌우 150/상하 70px(1920) ~ 최소 25px(1025) */
/* 섹션이 이미 헤더 아래에서 시작 → 프레임 상단여백은 frame-y 만 */
.te-cover.te-cover--media[data-te-media="video"] {
  --te-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --te-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  --te-frame-top: var(--te-frame-y);
  padding: var(--te-frame-top) var(--te-frame-x) var(--te-frame-y);
  background: #fff;
}
.te-cover.te-cover--media[data-te-media="video"] .te-media-scrim,
.te-cover.te-cover--media[data-te-media="video"] .te-reveal-step {
  inset: var(--te-frame-top) var(--te-frame-x) var(--te-frame-y) var(--te-frame-x);
}
.te-cover.te-cover--media[data-te-media="video"] .te-media-bg {
  top: var(--te-frame-top);
  left: var(--te-frame-x);
  right: auto;
  bottom: auto;
  width: calc(100% - var(--te-frame-x) * 2);
  height: calc(100% - var(--te-frame-top) - var(--te-frame-y));
}
/* step1: 텍스트(reveal-step)·스크림 모두 풀블리드 — 블러 프로스트가 흰 프레임 여백까지 덮어 가장자리까지 이어지게 */
.te-cover.te-cover--media[data-te-media="video"][data-step="1"] .te-reveal-step,
.te-cover.te-cover--media[data-te-media="video"][data-step="1"] .te-media-scrim {
  inset: 0;
}
.te-cover.te-cover--media[data-te-media="video"][data-step="1"] .te-media-bg {
  filter: blur(10px); 
}

/* index 4·5(ch2 2-1/2-2)·6(ch3 커버) — ch1 영상 커버(data-te-steps="2")와 동일 흰 인셋 프레임. 이미지/스크림 안쪽 인셋·바깥 흰 여백·텍스트는 이미지 위. */
.te-sec[data-te-index="4"],
.te-sec[data-te-index="5"],
.te-sec[data-te-index="6"] {
  --te-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --te-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  --te-frame-top: var(--te-frame-y);
  padding: var(--te-frame-top) var(--te-frame-x) var(--te-frame-y);
  background: #fff;
}
.te-sec[data-te-index="4"] .te-media-bg,
.te-sec[data-te-index="5"] .te-media-bg,
.te-sec[data-te-index="6"] .te-media-bg {
  top: var(--te-frame-top);
  left: var(--te-frame-x);
  right: auto;
  bottom: auto;
  width: calc(100% - var(--te-frame-x) * 2);
  height: calc(100% - var(--te-frame-top) - var(--te-frame-y));
}
.te-sec[data-te-index="4"] .te-media-scrim,
.te-sec[data-te-index="5"] .te-media-scrim,
.te-sec[data-te-index="6"] .te-media-scrim {
  inset: var(--te-frame-top) var(--te-frame-x) var(--te-frame-y) var(--te-frame-x);
}

/* ch1 영상 커버 reveal — step0 커버 / step1(영상 유지+흰 프로스트 상승+검정 텍스트). 흐림: blur 30px·brightness 1.2·흰 스크림 opacity .6. */
.te-media--reveal .te-reveal-step { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; transition: opacity 600ms ease; }
.te-media--reveal .te-reveal-step[data-te-step="1"] { opacity: 0; pointer-events: none; } /* 초기(step0): 겹친 step1 투명 오버레이가 step0 챕터칩 클릭을 가로채는 것 방지 */
.te-media--reveal .te-media-scrim { transition: background-color 600ms ease, opacity 600ms ease, -webkit-backdrop-filter 600ms ease, backdrop-filter 600ms ease; }
.te-media--reveal[data-step="1"] .te-media-scrim { background: #fff; opacity: 0.6; -webkit-backdrop-filter: blur(30px) brightness(1.2); backdrop-filter: blur(30px) brightness(1.2); }
/* 영상 스크림은 배경색을 전환에서 제외 → step1 진입 시 흰색으로 즉시 스냅(흰 프레임 여백의 검정 잔상 방지), opacity·blur만 전환 */
.te-cover--media[data-te-media="video"].te-media--reveal .te-media-scrim { transition: opacity 600ms ease, -webkit-backdrop-filter 600ms ease, backdrop-filter 600ms ease; }
/* ch1 영상 커버 step1 — 영상 자체를 filter:blur(10px)로 직접 흐림(백드롭 미지원 대비). 영상 커버로 스코프해 ch3 이미지 리빌은 제외 */
.te-cover--media[data-te-media="video"].te-media--reveal .te-media-bg { transition: filter 600ms ease, -webkit-filter 600ms ease; }
.te-cover--media[data-te-media="video"].te-media--reveal[data-step="1"] .te-media-bg { -webkit-filter: blur(10px); filter: blur(10px); }
.te-media--reveal[data-step="1"] .te-reveal-step[data-te-step="0"] { opacity: 0; pointer-events: none; }
.te-media--reveal[data-step="1"] .te-reveal-step[data-te-step="1"] { opacity: 1; pointer-events: auto; }
.te-media--reveal[data-step="1"] .te-reveal-step[data-te-step="1"] .te-prose-title,
.te-media--reveal[data-step="1"] .te-reveal-step[data-te-step="1"] .te-prose-body,
.te-media--reveal[data-step="1"] .te-reveal-step[data-te-step="1"] .te-prose-body p { color: #000; }
/* step1 텍스트 — max-width 800 블록을 영상 상하·좌우 가운데(제목·본문 모두 left). */
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.te-reveal-prose { max-width: 850px; margin: 0 auto; padding: 0 25px; text-align: left; }
.te-reveal-prose .te-prose-title { text-align: left; }

/* index 8(ch3 3-3) 리빌 변형 — index 1과 동일 2단 리빌, 단 이미지·풀블리드(프레임 없음). 가림막 blur20px·오버레이 없음. step1 텍스트 흰색 가운데. */
/* [스펙] step0=검정 20%(뒤 블러 화면과 명도 매칭), step1=투명+backdrop blur 20. */
.te-reveal-blur .te-media-scrim { background: rgba(0, 0, 0, 0.2); opacity: 1; }
.te-media--reveal.te-reveal-blur[data-step="1"] .te-media-scrim {
  background: transparent; opacity: 1;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.te-media--reveal.te-reveal-blur[data-step="1"] .te-reveal-step[data-te-step="1"] .te-prose-title,
.te-media--reveal.te-reveal-blur[data-step="1"] .te-reveal-step[data-te-step="1"] .te-prose-body,
.te-media--reveal.te-reveal-blur[data-step="1"] .te-reveal-step[data-te-step="1"] .te-prose-body p { color: #fff; }

/* 공통 프로즈 타이포 */
.te-prose-title { margin: 0 0 40px; font-size: 24px; font-weight: 500; line-height: 1.5; color: inherit; }
.te-prose-body { display: flex; flex-direction: column; gap: 20px; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0.005em; color: inherit; word-break: keep-all; }
.te-prose-body p { margin: 0; }
:lang(ja) .te-prose-body { word-break: normal; }

/* 풀블리드 이미지/영상 + 텍스트 오버레이 — 좌측 인덴트 컬럼 */
.te-imgtext { display: block; background: #000; color: #000; }
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.te-imgtext-text { position: absolute; z-index: 3; left: 0; right: 0; max-width: 850px; margin: 0 auto; padding: 0 25px; top: 50%; transform: translateY(-50%); }
.te-imgtext--bottom .te-imgtext-text { top: auto; bottom: 16%; transform: none; }
.te-imgtext--top .te-imgtext-text { top: 30%; transform: none; }
.te-imgtext--white .te-imgtext-text { color: #fff; }
/* 영상 위 흰색 흐림(다크 텍스트) */
.te-imgtext--blurlight .te-media-bg img, .te-imgtext--blurlight video.te-media-bg { filter: blur(6px); -webkit-filter: blur(6px); transform: scale(1.06); }
.te-imgtext--blurlight .te-imgtext-veil { position: absolute; inset: 0; z-index: 2; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(30px) brightness(1.2); -webkit-backdrop-filter: blur(30px) brightness(1.2); }
/* 이미지 흐림(화이트 텍스트) — "흰색 뿌옇게" 다원 배경 */
.te-imgtext--blurdark .te-media-bg img { filter: blur(14px); -webkit-filter: blur(14px); transform: scale(1.08); }
.te-imgtext--blurdark .te-imgtext-veil { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.34); }

/* CTA(방문 예약) 버튼 — 하단 중앙 */
.te-imgtext--cta .te-cta { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8%; text-align: center; }
.te-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 16px 24px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 14px; background: transparent; }
.te-cta-btn:hover { background: #fff; color: #000; text-decoration: none; }

/* 분할(좌 이미지 / 우 텍스트) */
.te-split { display: flex; align-items: center; background: #fff; color: #000; }
.te-split-img { flex: 0 0 50%; max-width: 50%; height: 100%; }
.te-split-img > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.te-split-text { flex: 0 0 50%; max-width: 50%; padding: 0 150px 0 70px; }
.te-split-text .te-prose-body { margin: 0 0 40px; }

/* 더 알아보기 링크(화살표) — space/teathology 동일: 13px·rgba(0,0,0,.6)·화살표는 데스크탑 숨김(모바일만 노출). */
.te-more { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.015em; color: #000; opacity: 0.6; text-decoration: none; }
.te-more:hover { opacity: 0.8; text-decoration: none; }
/* 화살표를 mask+background-color:currentColor로 처리해 텍스트 색을 따르게(밝은 배경=검정·어두운 배경=흰색) */
.te-more-arrow {
  display: none;
  width: 7px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* 텍스트 전용(화이트 배경) — 좌측 인덴트 */
.te-text { display: flex; align-items: center; background: #fff; color: #000; }
/* index=7 순수 텍스트 섹션 — 헤더 포함 전체 뷰포트 세로 중앙 정렬. padding-bottom=--te-grid-top으로 시각 중심을 위로 옮겨 50svh 안착 */
.te-sec.te-text[data-te-index="7"] { padding-bottom: var(--te-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))); }
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.te-text-inner { width: 100%; max-width: 850px; margin: 0 auto; padding: 0 25px; box-sizing: border-box; }
.te-text-inner .te-prose-title, .te-text-inner .te-prose-body { max-width: 800px; }

/* 풀블리드 이미지(텍스트 없음) */
.te-plain { background: #000; }

/* 마무리 CTA — 풀페이지 스테이지(.te-stage) 밖 문서 흐름 블록, 높이는 콘텐츠(.tea-tea-bottom)만큼. 절대배치·내부 스크롤 없이 블러 리빌 이후 CTA→푸터가 일반 스크롤로 이어짐 */
.te-final { background: #fff; color: #000; }

/* 블록 순차 등장 */
/* fade in/out 양방향 — 기본값에도 동일 transition을 둬 보이는 범위를 벗어나면 다시 흐려짐(사라질 때는 지연 없음) */
.te-rvl { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.te-sec.is-active:not([data-te-scroll]) .te-rvl,
.te-sec[data-te-scroll] .te-rvl.is-inview,
.te-story-mo.tem-fade .te-rvl.is-inview {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--rvl-i, 0) * 0.09s);
  will-change: opacity, transform;
}
/* 데스크탑 리빌: 섹션 도착/스크롤 진입 후 딜레이 뒤 fade+slide-up (is-active 패널 + [data-te-scroll] 인뷰, 모바일 제외) */
.te-sec.is-active:not([data-te-scroll]) .te-rvl,
.te-sec[data-te-scroll] .te-rvl.is-inview { transition-delay: calc(0.5s + var(--rvl-i, 0) * 0.12s); }
/* 모바일 세로 진입은 스크롤 순서대로 개별 노출 → 순번 딜레이 대신 평평한 0.06s (teathology 동일). */
.te-story-mo.tem-fade .te-rvl.is-inview { transition-delay: 0.06s; }
/* 마무리 CTA(.te-final) 리빌 — 스테이지 밖 문서 흐름이라 별도 규칙. is-inview는 JS(IntersectionObserver)가 부여, 스크롤 진입 기준 baseline(0.1s)로 문구→버튼 순차 */
.te-final .te-rvl.is-inview {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--rvl-i, 0) * 0.12s);
  will-change: opacity, transform;
}
/* sec1(data-tem-index=1) 리빌을 패널 도착 시 재생 — is-inview만으론 숨김 유지하고, 청크 활성(.tem-chunk.is-active) 시점부터 base 0.9s+순번 0.3s로 제목→본문 순차 슬라이드업 */
.te-story-mo.tem-fade .tem-chunk [data-tem-index="1"] .te-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
.te-story-mo.tem-fade .tem-chunk.is-active [data-tem-index="1"] .te-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.3s); }
/* 콘텐츠 이미지/배경도 스크롤 진입 시 리빌 — 텍스트 .te-rvl의 is-inview를 :has로 감지해 함께 등장. 섹션-필 배경(sec2·4)은 상하 갭 방지 위해 opacity-only fade */
.te-story-mo.tem-fade [data-tem-index="2"] .tem-bg,
.te-story-mo.tem-fade [data-tem-index="4"] .tem-bg { opacity: 0; transition: opacity 0.8s ease; }
/* sec2·4 imgfull: 텍스트(이미지 하단 :has)가 아니라 이미지 상단 진입 시(JS 전용 IO가 .is-bgin 부여) 조기 fade. */
.te-story-mo.tem-fade [data-tem-index="2"] .tem-bg.is-bgin,
.te-story-mo.tem-fade [data-tem-index="4"] .tem-bg.is-bgin { opacity: 1; }
/* eyebrow는 reveal 후에도 60% 유지(reveal의 opacity:1이 .te-eyebrow{0.6}을 덮으므로 되돌림). */
.te-story-mo.tem-fade .te-eyebrow.te-rvl.is-inview { opacity: 0.6; }
/* 모바일 top-of-chunk 리빌 조기 소진 방지(gate) + 챕터 커버(.tem-cover-text) 텍스트·칩 리빌. tem1은 위 별도 규칙(0.65s+0.3s) */
.te-story-mo.tem-fade .tem-chunk:not(.is-active) .te-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
.te-story-mo.tem-fade .tem-chunk.is-active .tem-cover-text .te-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.12s); }
.te-story-mo.tem-fade .tem-chunk.is-active .tem-cover-text .te-eyebrow.te-rvl { opacity: 0.6; }
/* -more도 reveal 후 opacity 0.6 유지(reveal의 opacity:1이 .te-more{0.6}을 덮으므로 되돌림). */
.te-sec.is-active:not([data-te-scroll]) .te-more.te-rvl,
.te-sec[data-te-scroll] .te-more.te-rvl.is-inview,
.te-story-mo.tem-fade .te-more.te-rvl.is-inview { opacity: 0.6; }
/* hover 0.8 — reveal-0.6 규칙보다 높게(:hover 추가) 두어 hover가 이기도록. */
.te-sec.is-active:not([data-te-scroll]) .te-more.te-rvl:hover,
.te-sec[data-te-scroll] .te-more.te-rvl.is-inview:hover,
.te-story-mo.tem-fade .te-more.te-rvl.is-inview:hover { opacity: 0.8; }
/* 인트로(index0) 슬라이드업 — JS(fireIntroReveal)가 배경 에셋 준비 후 .intro-in 부여 시 아래→위 슬라이드업(순번 스태거), 준비 전엔 숨김 대기 */
.te-sec[data-te-index="0"].is-active:not(.intro-in) .te-rvl { opacity: 0; transform: translateY(2rem); transition: none; }
.te-sec[data-te-index="0"].intro-in .te-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
/* 모바일 인트로(.tem-hero) eyebrow/title/chips 슬라이드업 — 데스크탑 인트로와 동일. 순번 스태거, eyebrow는 0.6 유지 */
.tem-hero.intro-in .te-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
.tem-hero.intro-in .te-eyebrow.te-rvl { opacity: 0.6; }
/* 첫 진입 깜박임(FOUC) 방지 — 리빌 마킹 여부와 무관하게 .intro-in 전에는 숨김 상태로 대기 */
.tem-hero:not(.intro-in) .tem-hero-text > * { opacity: 0; transform: translateY(2rem); }

/* [NEW-product-tea-story] 모바일(하이브리드 풀페이지, .te-story-mo.display-mo) — root 62.5%→1rem=10px. JS(.tem-fp)가 인트로(.tem-hero)+챕터 청크(.tem-chunk)를 1제스처=1패널 전환(space/teathology 동일). */
/* 데스크탑 서브메뉴는 모바일 숨김 — .tem-hero-menu 가 대신 */
@media (max-width: 1024px) {
  .content-asset-tea-story .tea_story { display: none; }
  .te-prose-title { font-size: 22px; line-height: 1.63; }
  .te-prose-body { font-size: 16px; line-height: 1.75; }
  .te-more { font-size: 12px; }
  .te-more-arrow { display: inline-flex; }
}

.te-story-mo { position: relative; }
.tem-sec { position: relative; }
.tem-sec.tem-closing .tea-tea-bottom { padding: 10rem 3.2rem; }

/* 배경(이미지/영상) 풀블리드 */
.tem-bg, .tem-bg img, video.tem-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
video.tem-bg { -webkit-transform: translateZ(0); transform: translateZ(0); }
.tem-scrim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0.32; }
.tem-scrim.tem-scrim--soft { opacity: 0.22; }

/* 인트로 히어로(차 이미지 + 서브메뉴 + 타이틀/칩) */
.tem-hero { position: relative; height: 100svh; overflow: hidden; background: #e9e3d8; display: flex; flex-direction: column; justify-content: space-between; }
.tem-hero-menu { position: relative; z-index: 2; padding: 2.8rem 1.6rem 2rem; color: #fff; } /* 인트로 배경 영상(어두움) 위 흰색 계통 */
.tem-submenu-top, .tem-submenu { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.tem-submenu-top { font-size: 1.2rem; margin-bottom: 0.6rem; letter-spacing: 0.05em; }
.tem-submenu { font-size: 1.6rem; }
.tem-submenu-top a, .tem-submenu a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.tem-submenu-top .active a, .tem-submenu .active a { color: #fff; }
.tem-submenu .active a { font-size: 1.8rem; }
.tem-hero-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #fff; }
.tem-hero-title { font-size: 18px; font-weight: 500; line-height: 1.333; letter-spacing: 0.01em; }

/* 모바일 하이브리드 풀페이지(JS가 .tem-fp 부여) — 패널: 인트로(.tem-hero)/챕터 청크(.tem-chunk), 1제스처=1패널 슬라이드+fade. 첫 본문(영상)부터 청크 시작, 챕터 커버(.tem-cover 100svh)마다 새 청크→상단 패딩 0. space/teathology .xxm-fp 동일 구조. */
.tem-fp.te-story-mo { position: relative; height: 100svh; overflow: hidden; }
.tem-fp > .tem-hero,
.tem-fp > .tem-chunk {
  position: absolute; top: 0; left: 0; width: 100%; height: 100svh;
  opacity: 0; transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity;
}
/* 진입 첫 프레임 전환 억제(JS가 no-fp-anim 부여 → rAF 후 제거). 흐름→화면밖 값변화로 transition이 발동해 "겹친 후 아래로 슬라이드"되던 초기 플래시 차단. */
.tem-fp.no-fp-anim > .tem-hero,
.tem-fp.no-fp-anim > .tem-chunk { transition: none; }
.tem-fp > .tem-hero.is-next,
.tem-fp > .tem-chunk.is-next { transform: translateY(100%); opacity: 0; }
.tem-fp > .tem-hero.is-prev,
.tem-fp > .tem-chunk.is-prev { transform: translateY(-100%); opacity: 0; }
.tem-fp > .tem-hero.is-active,
.tem-fp > .tem-chunk.is-active { transform: translateY(0); opacity: 1; }
.tem-fp > .tem-chunk { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-top: var(--tem-top, 6.8rem); } /* 헤더 클리어런스: 청크 콘텐츠가 고정 헤더 아래에서 시작(섹션 높이가 헤더 제외되도록 — parfums .pfm-chunk 동일) */
.tem-fp > .tem-chunk::-webkit-scrollbar { display: none; }
/* 청크 상단 헤더 클리어런스 여백에 흰 띠가 드러나던 것 제거 — 청크 padding-top을 0으로 두고 같은 값을 커버 안쪽 padding-top으로 이동(배경 이미지가 그 영역까지 채워 패널과 함께 페이드). .tem-cover--top·--dark 동일 처리 */
.tem-fp > .tem-chunk:has(.tem-cover--top),
.tem-fp > .tem-chunk:has(.tem-cover--dark) { padding-top: 0; }
.tem-fp > .tem-chunk > .tem-cover--top,
.tem-fp > .tem-chunk > .tem-cover--dark { height: 100svh; padding-top: var(--tem-top, 6.8rem); }
/* index5 청크의 sticky(.tem-mediatext--sticky)는 청크 padding-top에 의존했으므로, 0으로 바꾼 값을 sticky top으로 옮겨 보정 */
.tem-fp > .tem-chunk:has(.tem-cover--dark) .tem-mediatext--sticky .tem-sticky-inner { top: var(--tem-top, 6.8rem); }
/* 인트로 서브메뉴 — 풀페이지 핀으로 moRoot top이 흔들려도 헤더 bottom 아래 20px 정렬(JS setTop이 --tem-hero-menu-top 부여). */
.tem-fp .tem-hero-menu { padding-top: var(--tem-hero-menu-top, var(--tem-top, 6.8rem)); }

/* 챕터 커버(이미지 + 하단 좌측 eyebrow/타이틀/칩) */
.tem-cover { position: relative; height: calc(100svh - var(--tem-top, 6.8rem)); overflow: hidden; background: #000; display: flex; flex-direction: column; justify-content: flex-end; } /* 헤더 제외 높이(청크 padding-top과 합쳐 화면 1개 정확히 채움) */
.tem-cover-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #000; text-align: left; }
/* sec2 커버 — 텍스트 섹션 상단 배치(tobe mo/2-1_2-2 상단부). 기본 하단정렬(flex-end) override. */
.tem-cover--top { justify-content: flex-start; }
.tem-cover--top .tem-cover-text { padding: 10rem 3.2rem 0; }
.tem-cover--dark .tem-cover-text { color: #fff; }
/* 다크 챕터 커버 하단 텍스트 가독용 검정 그라디언트(to top 1→0.5) — 다크 커버에서는 flat .tem-scrim 대신 이 pseudo로 통일 */
.tem-cover--dark .tem-scrim { display: none; }
.tem-cover--dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
/* 하단 그라디언트가 불필요한 다크 커버(data-tem-index=5)는 ::after 제거 */
.tem-cover--dark[data-tem-index="5"]::after { display: none; }
.tem-cover-text .te-prose-title { margin: 0; text-align: left; }

/* 챕터 칩(가로 스크롤, 양끝 대칭 인셋) */
.tem-cover-chips { display: flex; gap: 2.4rem; margin: 1rem -3.2rem 0; padding: 0 3.2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.005em; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; color: inherit; }
.tem-cover-chips::-webkit-scrollbar { display: none; }
.tem-cover-chips .te-chip { flex: 0 0 auto; }
/* [스크롤 인디케이터] 좌우 스크롤 가능(.is-scrollable) 시 우측 여백 10rem + 우측 6.4rem 흰→투명 mask 페이드 */
.tem-cover-chips.is-scrollable { padding-right: 3.2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); }
/* sec2 cover2(모바일) — 데스크탑 te-cover2 대응: mo/2-1 한 장이 커버+본문 전체 배경으로 이어짐(연속). 청크 네이티브 스크롤로 상단 커버(여백을 마시는 차)→하단 한국유기농 텍스트 이동. 다크 텍스트(라이트 이미지). */
.tem-cover2 { position: relative; background: #fff; color: #000; }
.tem-cover2-track { position: relative; }
.tem-cover2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 0; }
.tem-cover2-cover { position: relative; z-index: 1; min-height: calc(100svh - var(--tem-top, 6.8rem)); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 3.2rem 4rem; } /* 헤더 제외 높이 */
.tem-cover2-cover .te-prose-title { margin: 0; text-align: left; }
.tem-cover2-text { position: relative; z-index: 1; padding: 4rem 3.2rem 6rem; }
.tem-cover2-text .te-prose-title { margin: 0 0 4rem; text-align: left; }

/* 이미지/영상 위 텍스트(풀블리드, 하단 좌측) — 긴 본문은 섹션이 늘어나며 배경이 함께 커버. */
.tem-mediatext { position: relative; min-height: calc(100svh - var(--tem-top, 6.8rem)); overflow: hidden; background: #fff; display: flex; flex-direction: column; justify-content: flex-end; } /* 헤더 제외 높이 */
.tem-mediatext-text { position: relative; z-index: 2; padding: 10rem 3.2rem; text-align: left; color: #000; }
.tem-mediatext--dark .tem-mediatext-text { color: #fff; }
/* sec4 4-2(조선의 선비들…) 전용 — 텍스트를 이미지(섹션) 높이의 세로 중앙에 배치(기본 flex-end 하단정렬 override). sec1a·sec1b는 미적용. */
.tem-mediatext--center { justify-content: center; }
/* 다크 mediatext(예: sec1b 1-3) 위 '더 알아보기' 링크 — .te-more 기본색(검정60%)이 어두운 배경에 묻혀 흰색으로 override(화살표 svg는 currentColor라 함께 흰색). */
.tem-mediatext--dark .te-more { color: rgba(255, 255, 255, 0.8); }
.tem-mediatext--dark .te-more:hover { color: #fff; }
.tem-mediatext-text .te-prose-title { margin: 0 0 4rem; text-align: left; }
.tem-mediatext-text .te-more { margin-top: 4rem; } /* 모바일: 본문 텍스트 ↔ '더 알아보기' 링크 간격 */
/* sec1b(tem-mediatext--imgfull) — 이미지 원본 비율 전체 노출(자연 높이, cover 크롭 해제)·섹션 높이를 이미지에 맞춤 + 텍스트 오버레이 유지 */
.tem-mediatext--imgfull { min-height: 0; display: block; }
.tem-mediatext--imgfull .tem-bg,
.tem-mediatext--imgfull .tem-bg img { position: relative; inset: auto; height: auto; }
.tem-mediatext--imgfull .tem-mediatext-text { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 4rem; color: #fff; } /* scrim 없이 이미지 위 흰 텍스트(--dark/scrim 미사용) */
.tem-mediatext--imgfull .te-more { color: rgba(255, 255, 255, 0.8); }
.tem-mediatext--imgfull .te-more:hover { color: #fff; }
/* sec2(data-tem-index=2, imgfull) — 흰 텍스트 가독용 텍스트 박스 하단 검정 그라디언트(아래 진하게 → 위 투명) */
.tem-mediatext--imgfull[data-tem-index="2"] .tem-mediatext-text {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 100%);
}
/* [3-3 sticky 2단계 리빌] data-tem-index=7: 섹션을 180svh로 늘려 스크롤 여유 확보 + .tem-sticky-inner를 한 화면 고정(네이티브 sticky). JS가 .is-revealed 토글 → 이미지 blur(8px)+텍스트 오버레이 fade-in. 섹션 overflow:visible 필수 */
.tem-mediatext--sticky { min-height: 180svh; display: block; position: relative; overflow: visible; background: #000; }
.tem-mediatext--sticky .tem-sticky-inner { position: -webkit-sticky; position: sticky; top: 0; height: calc(100svh - var(--tem-top, 6.8rem)); overflow: hidden; } /* top:0 — 청크 padding-top(=헤더 클리어런스)이 이미 있어 sticky는 콘텐츠 상단(헤더 바로 아래)에 pin. top:헤더값 주면 이중 오프셋으로 상단 빈틈+하단 잘림 발생. */
.tem-mediatext--sticky .tem-bg { position: absolute; inset: 0; z-index: 0; }
.tem-mediatext--sticky .tem-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* [스펙] 스크림 — 기본(step0)=검정 20%(클린 이미지 명도 매칭), 리빌(step1)=투명+backdrop blur 20(데스크탑 te-reveal-blur 동일). */
.tem-mediatext--sticky .tem-sticky-inner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background 0.6s ease, -webkit-backdrop-filter 0.6s ease, backdrop-filter 0.6s ease; pointer-events: none; }
.tem-mediatext--sticky.is-revealed .tem-sticky-inner::after { background: transparent; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.tem-mediatext--sticky .tem-mediatext-text { position: absolute; top: 0; bottom: 0; left: 3.2rem; right: 3.2rem; display: flex; flex-direction: column; justify-content: center; padding: 0; z-index: 2; color: #fff; opacity: 0; transition: opacity 0.6s ease; } /* 위 20rem·아래 10rem 고정 박스 → 세로 중앙정렬(flex justify-center), 좌우 3.2rem 유지 */
.tem-mediatext--sticky .te-prose-body { padding-top: 10rem; } /* sec7 padding-top은 박스가 아니라 본문(te-prose-body)에 */
.tem-mediatext--sticky.is-revealed .tem-mediatext-text { opacity: 1; }
/* sec2 본문(tem-mediatext--flow) — 텍스트를 이미지 전체 높이에 걸쳐 flow. 두 prose-body 블록 사이 간격은 지정 패딩으로 분산. */
.tem-mediatext--flow .tem-mediatext-text { top: 0; padding-top: 20rem; color: #000; } /* sec2 본문(노랑 이미지)은 검정 텍스트 — imgfull 흰색 override */
.tem-mediatext--flow .te-prose-body:first-of-type { padding-top: 0; padding-bottom: 10rem; }
.tem-mediatext--flow .te-prose-body:last-of-type { padding-top: 0; padding-bottom: 30rem; }

/* 텍스트 전용(화이트 배경) */
.tem-prose { background: #fff; color: #000; padding: 10rem 3.2rem 10rem; }
.tem-prose .te-prose-title { text-align: left; }
/* sec3 3-2 텍스트(첫 잎부터…) 섹션 상하 여백 15rem (좌우 3.2rem 유지). data-tem-index=6 개별 타게팅. */
.tem-sec.tem-prose[data-tem-index="6"] { padding-top: 15rem; padding-bottom: 15rem; }

/* 풀폭 이미지(3-3) */
.tem-img { font-size: 0; }
.tem-img > img { display: block; width: 100%; height: auto; }

/* 마무리(초대 문구+방문예약) — .tea-tea-bottom 재사용(자체 패딩 보유). */
.tem-closing { background: #fff; }

/* [NEW-product-tea-wear-story] PRODUCT·TEAWARE STORY 풀페이지(PC .tw-*) — product-tea-story의 .te-* 블록을 그대로 복제해 프리픽스만 tw-/twm-로 치환(구조·값 동일) — space/teathology/parfums 패턴(커버/영상흐림/분할/풀블리드 텍스트오버/텍스트전용/50:50/CTA). */
html.tw-fp { scrollbar-width: none; -ms-overflow-style: none; }
html.tw-fp::-webkit-scrollbar { display: none; }

.content-asset-teaware-story { padding-left: 0; padding-right: 0; }
.content-asset-teaware-story .teaware_story { padding-left: 25px; padding-right: 25px; }
.content-asset-teaware-story .story-wrap { margin-top: 0; }

.tw-story { position: relative; }
.tw-stage { position: relative; height: 100svh; overflow: hidden; background: #fff; }

/* 섹션 공통(스택+전환) — 헤더(+배너) 아래에서 시작, 높이는 뷰포트-오프셋. 오프셋 --tw-grid-top=헤더 bottom(배너 포함, JS가 배너 토글 시 갱신). */
.tw-sec {
  position: absolute; left: 0; width: 100%;
  top: var(--tw-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)));
  height: calc(100svh - var(--tw-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  opacity: 0; transform: translateY(100%);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity; overflow: hidden; pointer-events: none;
}
.tw-sec.is-next { transform: translateY(100%); opacity: 0; }
.tw-sec.is-prev { transform: translateY(-100%); opacity: 0; }
.tw-sec.is-active { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* 인트로 서브메뉴 — 섹션이 이미 --tw-grid-top에서 시작하므로 서브메뉴는 섹션 상단(=헤더 bottom) 기준. */
.tw-sec .tw-intro-subnav { position: absolute; top: 0; left: 0; right: 0; z-index: 6; }
/* 첫 화면(ch4 커버)이 풀블리드 이미지라 검정 서브메뉴가 묻힘 → tea story와 동일한 흰 텍스트(비활성 흰 50%·활성 #fff) */
.tw-intro-subnav .sub_menu_wraps > li a,
.tw-intro-subnav .sub_menu_3depth > li a { color: rgba(255, 255, 255, 0.5); }
.tw-intro-subnav .sub_menu_wraps > li + li::before { background: rgba(255, 255, 255, 0.5); }
.tw-intro-subnav .sub_menu_wraps > li.active a,
.tw-intro-subnav .sub_menu_3depth > li.active a { color: #fff; }

/* 미디어 배경(이미지/영상) */
.tw-sec[data-tw-media] { background: #000; }
.tw-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tw-media-bg img, video.tw-media-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.tw-media-bg img.tw-obj-top { object-position: center top; }
.tw-media-bg img.tw-obj-bottom { object-position: center bottom; }
.tw-media-scrim { position: absolute; inset: 0; background: #000; opacity: 0.32; }
.tw-media-scrim.tw-media-scrim--soft { opacity: 0.22; }

/* 커버(중앙) */
.tw-cover { display: flex; align-items: center; justify-content: center; text-align: center; }
.tw-cover-inner { position: relative; z-index: 2; padding: 0 25px; color: #000; }
.tw-cover--dark .tw-cover-inner { color: #fff; }
/* 인트로(index 0) 텍스트 흰색 — BM 본문 재등록 없이 CSS로 지정(HTML class는 tw-cover--light 유지). */
.tw-cover[data-tw-index="0"] .tw-cover-inner { color: #fff; }
.tw-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0.6; color: inherit; }
.tw-cover-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.5; color: inherit; }
.tw-cover-chips { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 20px 0 0; font-size: 12px; font-weight: 500; line-height: 1.333; letter-spacing: 0.005em; color: inherit; }
.tw-chip { display: inline-block; color: inherit; text-decoration: none; white-space: nowrap; opacity: 0.6; cursor: pointer; transition: opacity 0.3s ease; }
.tw-chip:hover { opacity: 1; color: inherit; text-decoration: none; }

/* ch2 커버+본문 병합(내부 스크롤 data-tw-scroll) — 2-1 컵 이미지 2화면 높이 연속 스크롤(상단=차 커버/하단=한국 유기농 텍스트). 섹션 3→4를 네이티브 스크롤로 잇기 위해 한 섹션으로 통합. */
.tw-cover2 { background: #fff; color: #000; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tw-cover2::-webkit-scrollbar { display: none; }
.tw-cover2-track { position: relative; height: calc((100svh - var(--tw-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)))) * 2); }
.tw-cover2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 커버 텍스트 — 초기 화면(섹션 1화면 높이) 안에서 상하·좌우 가운데 */
.tw-cover2-cover { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: calc(100svh - var(--tw-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)))); display: flex; align-items: center; justify-content: center; text-align: center; }
/* 한국 유기농 텍스트 — 이미지 하단부(좌측 인덴트), 스크롤 진입 시 등장. */
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.tw-cover2-text { position: absolute; z-index: 3; left: 0; right: 0; max-width: 850px; margin: 0 auto; padding: 0 25px; bottom: 100px; color: #000; }
/* ch2 cover2(index 3) — ch4 커버처럼 상하좌우 흰 인셋 프레임. 이미지(.tw-cover2-img)를 상하 frame-y·좌우 frame-x로 인셋, 섹션 배경(#fff)이 여백으로 노출 */
/* .tw-sec[data-tw-media]{#000}를 이겨 프레임 여백이 흰색이 되도록 후순위·동일 특이도로 override */
.tw-cover2[data-tw-index="3"] {
  --tw-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --tw-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  background: #fff;
}
.tw-cover2[data-tw-index="3"] .tw-cover2-img {
  top: var(--tw-frame-y); left: var(--tw-frame-x); right: auto; bottom: auto;
  width: calc(100% - var(--tw-frame-x) * 2);
  height: calc(100% - var(--tw-frame-y) * 2);
}
/* 프레임 흰 여백(frame-y)만큼 bottom 가산 → 텍스트가 이미지 하단에서 100px 위(프레임 여백 포함). */
.tw-cover2[data-tw-index="3"] .tw-cover2-text { bottom: calc(100px + var(--tw-frame-y)); }

/* ch1 영상 커버 프레임(sec1=1-1 동영상) — 뷰포트 안쪽 흰 인셋. 좌우 150/상하 70px(1920) ~ 최소 25px(1025) */
/* 섹션이 이미 헤더 아래에서 시작 → 프레임 상단여백은 frame-y 만 */
.tw-cover.tw-cover--media[data-tw-media="video"] {
  --tw-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --tw-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  --tw-frame-top: var(--tw-frame-y);
  padding: var(--tw-frame-top) var(--tw-frame-x) var(--tw-frame-y);
  background: #fff;
}
.tw-cover.tw-cover--media[data-tw-media="video"] .tw-media-scrim,
.tw-cover.tw-cover--media[data-tw-media="video"] .tw-reveal-step {
  inset: var(--tw-frame-top) var(--tw-frame-x) var(--tw-frame-y) var(--tw-frame-x);
}
.tw-cover.tw-cover--media[data-tw-media="video"] .tw-media-bg {
  top: var(--tw-frame-top);
  left: var(--tw-frame-x);
  right: auto;
  bottom: auto;
  width: calc(100% - var(--tw-frame-x) * 2);
  height: calc(100% - var(--tw-frame-top) - var(--tw-frame-y));
}
/* step1: 텍스트(reveal-step)·스크림 모두 풀블리드 — 블러 프로스트가 흰 프레임 여백까지 덮어 가장자리까지 이어지게 */
.tw-cover.tw-cover--media[data-tw-media="video"][data-step="1"] .tw-reveal-step,
.tw-cover.tw-cover--media[data-tw-media="video"][data-step="1"] .tw-media-scrim {
  inset: 0;
}
.tw-cover.tw-cover--media[data-tw-media="video"][data-step="1"] .tw-media-bg {
  filter: blur(10px); 
}

/* index 4·5(ch2 2-1/2-2)·6(ch3 커버)·10(클로징) — ch1 영상 커버와 동일 흰 인셋 프레임. 9(ch4 커버)는 풀블리드로 프레임 제외, 11(final)은 .tw-final-img가 자체 처리 */
.tw-sec[data-tw-index="4"],
.tw-sec[data-tw-index="5"],
.tw-sec[data-tw-index="6"],
.tw-sec[data-tw-index="10"] {
  --tw-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --tw-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  --tw-frame-top: var(--tw-frame-y);
  padding: var(--tw-frame-top) var(--tw-frame-x) var(--tw-frame-y);
  background: #fff;
}
.tw-sec[data-tw-index="4"] .tw-media-bg,
.tw-sec[data-tw-index="5"] .tw-media-bg,
.tw-sec[data-tw-index="6"] .tw-media-bg {
  top: var(--tw-frame-top);
  left: var(--tw-frame-x);
  right: auto;
  bottom: auto;
  width: calc(100% - var(--tw-frame-x) * 2);
  height: calc(100% - var(--tw-frame-top) - var(--tw-frame-y));
}
.tw-sec[data-tw-index="4"] .tw-media-scrim,
.tw-sec[data-tw-index="5"] .tw-media-scrim,
.tw-sec[data-tw-index="6"] .tw-media-scrim {
  inset: var(--tw-frame-top) var(--tw-frame-x) var(--tw-frame-y) var(--tw-frame-x);
}

/* ch1 영상 커버 reveal — step0 커버 / step1(영상 유지+흰 프로스트 상승+검정 텍스트). 흐림: blur 30px·brightness 1.2·흰 스크림 opacity .6. */
.tw-media--reveal .tw-reveal-step { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; transition: opacity 600ms ease; }
.tw-media--reveal .tw-reveal-step[data-tw-step="1"] { opacity: 0; pointer-events: none; } /* 초기(step0): 겹친 step1 투명 오버레이가 step0 챕터칩 클릭을 가로채는 것 방지 */
.tw-media--reveal .tw-media-scrim { transition: background-color 600ms ease, opacity 600ms ease, -webkit-backdrop-filter 600ms ease, backdrop-filter 600ms ease; }
.tw-media--reveal[data-step="1"] .tw-media-scrim { background: #fff; opacity: 0.6; -webkit-backdrop-filter: blur(30px) brightness(1.2); backdrop-filter: blur(30px) brightness(1.2); }
/* 영상 스크림은 배경색을 전환에서 제외 → step1 진입 시 흰색으로 즉시 스냅(흰 프레임 여백의 검정 잔상 방지), opacity·blur만 전환 */
.tw-cover--media[data-tw-media="video"].tw-media--reveal .tw-media-scrim { transition: opacity 600ms ease, -webkit-backdrop-filter 600ms ease, backdrop-filter 600ms ease; }
/* ch1 영상 커버 step1 — 영상 자체를 filter:blur(10px)로 직접 흐림(백드롭 미지원 대비). 영상 커버로 스코프해 ch3 이미지 리빌은 제외 */
.tw-cover--media[data-tw-media="video"].tw-media--reveal .tw-media-bg { transition: filter 600ms ease, -webkit-filter 600ms ease; }
.tw-cover--media[data-tw-media="video"].tw-media--reveal[data-step="1"] .tw-media-bg { -webkit-filter: blur(10px); filter: blur(10px); }
.tw-media--reveal[data-step="1"] .tw-reveal-step[data-tw-step="0"] { opacity: 0; pointer-events: none; }
.tw-media--reveal[data-step="1"] .tw-reveal-step[data-tw-step="1"] { opacity: 1; pointer-events: auto; }
.tw-media--reveal[data-step="1"] .tw-reveal-step[data-tw-step="1"] .tw-prose-title,
.tw-media--reveal[data-step="1"] .tw-reveal-step[data-tw-step="1"] .tw-prose-body,
.tw-media--reveal[data-step="1"] .tw-reveal-step[data-tw-step="1"] .tw-prose-body p { color: #000; }
/* step1 텍스트 — max-width 800 블록을 영상 상하·좌우 가운데(제목·본문 모두 left). */
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.tw-reveal-prose { max-width: 850px; margin: 0 auto; padding: 0 25px; text-align: left; }
.tw-reveal-prose .tw-prose-title { text-align: left; }

/* index 8(ch3 3-3) 리빌 변형 — index 1과 동일 2단 리빌, 단 이미지·풀블리드(프레임 없음). 가림막 blur20px·오버레이 없음. step1 텍스트 흰색 가운데. */
/* [스펙] step0=검정 20%(뒤 블러 화면과 명도 매칭), step1=투명+backdrop blur 20. */
.tw-reveal-blur .tw-media-scrim { background: rgba(0, 0, 0, 0.2); opacity: 1; }
.tw-media--reveal.tw-reveal-blur[data-step="1"] .tw-media-scrim {
  background: transparent; opacity: 1;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.tw-media--reveal.tw-reveal-blur[data-step="1"] .tw-reveal-step[data-tw-step="1"] .tw-prose-title,
.tw-media--reveal.tw-reveal-blur[data-step="1"] .tw-reveal-step[data-tw-step="1"] .tw-prose-body,
.tw-media--reveal.tw-reveal-blur[data-step="1"] .tw-reveal-step[data-tw-step="1"] .tw-prose-body p { color: #fff; }

/* 공통 프로즈 타이포 */
.tw-prose-title { margin: 0 0 40px; font-size: 24px; font-weight: 500; line-height: 1.5; color: inherit; }
.tw-prose-body { display: flex; flex-direction: column; gap: 20px; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0.005em; color: inherit; word-break: keep-all; }
.tw-prose-body p { margin: 0; }
:lang(ja) .tw-prose-body { word-break: normal; }

/* 풀블리드 이미지/영상 + 텍스트 오버레이 — 좌측 인덴트 컬럼 */
.tw-imgtext { display: block; background: #000; color: #000; }
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.tw-imgtext-text { position: absolute; z-index: 3; left: 0; right: 0; max-width: 850px; margin: 0 auto; padding: 0 25px; top: 50%; transform: translateY(-50%); }
.tw-imgtext--bottom .tw-imgtext-text { top: auto; bottom: 16%; transform: none; }
.tw-imgtext--top .tw-imgtext-text { top: 30%; transform: none; }
.tw-imgtext--white .tw-imgtext-text { color: #fff; }
/* 영상 위 흰색 흐림(다크 텍스트) */
.tw-imgtext--blurlight .tw-media-bg img, .tw-imgtext--blurlight video.tw-media-bg { filter: blur(6px); -webkit-filter: blur(6px); transform: scale(1.06); }
.tw-imgtext--blurlight .tw-imgtext-veil { position: absolute; inset: 0; z-index: 2; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(30px) brightness(1.2); -webkit-backdrop-filter: blur(30px) brightness(1.2); }
/* 이미지 흐림(화이트 텍스트) — "흰색 뿌옇게" 다원 배경 */
.tw-imgtext--blurdark .tw-media-bg img { filter: blur(14px); -webkit-filter: blur(14px); transform: scale(1.08); }
.tw-imgtext--blurdark .tw-imgtext-veil { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.34); }

/* CTA(방문 예약) 버튼 — 하단 중앙 */
.tw-imgtext--cta .tw-cta { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8%; text-align: center; }
.tw-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 16px 24px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 14px; background: transparent; }
.tw-cta-btn:hover { background: #fff; color: #000; text-decoration: none; }

/* 분할(좌 이미지 / 우 텍스트) */
.tw-split { display: flex; align-items: center; background: #fff; color: #000; }
.tw-split-img { flex: 0 0 50%; max-width: 50%; height: 100%; }
.tw-split-img > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.tw-split-text { flex: 0 0 50%; max-width: 50%; padding: 0 150px 0 70px; }
.tw-split-text .tw-prose-body { margin: 0 0 40px; }

/* 더 알아보기 링크(화살표) — space/teathology 동일: 13px·rgba(0,0,0,.6)·화살표는 데스크탑 숨김(모바일만 노출). */
.tw-more { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.015em; color: #000; opacity: 0.6; text-decoration: none; }
.tw-more:hover { opacity: 0.8; text-decoration: none; }
/* 화살표를 mask+background-color:currentColor로 처리해 텍스트 색을 따르게(밝은 배경=검정·어두운 배경=흰색) */
.tw-more-arrow {
  display: none;
  width: 7px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* 텍스트 전용(화이트 배경) — 좌측 인덴트 */
.tw-text { display: flex; align-items: center; background: #fff; color: #000; }
/* index=7 순수 텍스트 섹션 — 헤더 포함 전체 뷰포트 세로 중앙 정렬. padding-bottom=--tw-grid-top으로 시각 중심을 위로 옮겨 50svh 안착 */
.tw-sec.tw-text[data-tw-index="7"] { padding-bottom: var(--tw-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))); }
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.tw-text-inner { width: 100%; max-width: 850px; margin: 0 auto; padding: 0 25px; box-sizing: border-box; }
.tw-text-inner .tw-prose-title, .tw-text-inner .tw-prose-body { max-width: 800px; }

/* 풀블리드 이미지(텍스트 없음) */
.tw-plain { background: #000; }

/* 클로징(내부 스크롤) — 텍스트 + 50:50 이미지쌍 + 텍스트 */
.tw-closing { background: #fff; color: #000; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 60px 0 80px; }
.tw-closing::-webkit-scrollbar { display: none; }
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.tw-closing-text { max-width: 850px; margin: 0 auto; padding: 0 25px; box-sizing: border-box; }
.tw-closing-text .tw-prose-title, .tw-closing-text .tw-prose-body { max-width: 800px; }
.tw-pair { display: flex; align-items: center; gap: 0; background: #000; margin: 100px 0; padding: 0; }
.tw-pair img { width: 50%; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* 클로징(index 10) 상하 여백 — 프레임 padding(frame-y) 대신 상하 200px. */
.tw-sec[data-tw-index="10"] { padding-top: 200px; padding-bottom: 200px; }

/* ch4 마무리 — 4-3 이미지+텍스트=한 화면 전용 섹션. 초대 문구·CTA가 스테이지 밖 문서 흐름으로 이동해 내부 스크롤 제거(이미지 상단 잘림 방지) */
/* 하단 1px 회색 선 제거 — .tw-sec의 will-change가 이 섹션을 상시 GPU 합성 레이어로 승격시켜 생기던 레이어 경계 이음선. .tw-sec보다 후순위·동일 특이도로 override */
.tw-final { background: #fff; color: #000; will-change: auto; }
/* 이미지+텍스트 블록: 프레임 인셋(상하좌우 여백), 높이=한 화면(헤더 제외). */
.tw-final-img {
  position: relative; box-sizing: border-box;
  height: calc(100svh - var(--tw-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  --tw-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --tw-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  padding: var(--tw-frame-y) var(--tw-frame-x); background: #fff;
}
.tw-final-img .tw-media-bg { top: var(--tw-frame-y); left: var(--tw-frame-x); right: auto; bottom: auto; width: calc(100% - var(--tw-frame-x) * 2); height: calc(100% - var(--tw-frame-y) * 2); }
.tw-final-img .tw-media-scrim { inset: var(--tw-frame-y) var(--tw-frame-x); }
/* 텍스트 — 이미지 상하 중앙 · 좌우 max-width 가운데 */
/* 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.tw-final-text { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-width: 850px; margin: 0 auto; padding: 0 25px; color: #fff; }

/* 마무리 초대 문구 + CTA — parfums .pf-closing-cta/.pf-closing-desc/.pf-cta-buttons와 동일 값 */
/* 이 블록은 고정 스테이지(.tw-stage) 밖 문서 흐름 — index 11의 내부 스크롤을 없애고 푸터로 이어지는 일반 스크롤에 포함. 여백: 상단 150px(스테이지와 문구 사이) / 하단 150px(문구와 백투탑·푸터 사이) */
.tw-closing-cta { width: 100%; max-width: 850px; margin: 0 auto; text-align: center; padding: 150px 25px; }
.tw-closing-desc { margin: 0; font-size: 16px; line-height: 1.6; color: #000; text-align: left; }
.tw-cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 150px 0; }

/* 블록 순차 등장 */
/* fade in/out 양방향 — 기본값에도 동일 transition을 둬 보이는 범위를 벗어나면 다시 흐려짐(사라질 때는 지연 없음) */
.tw-rvl { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tw-sec.is-active:not([data-tw-scroll]) .tw-rvl,
.tw-sec[data-tw-scroll] .tw-rvl.is-inview,
.tw-story-mo.twm-fade .tw-rvl.is-inview {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--rvl-i, 0) * 0.09s);
  will-change: opacity, transform;
}
/* 데스크탑 리빌: 섹션 도착/스크롤 진입 후 딜레이 뒤 fade+slide-up (is-active 패널 + [data-tw-scroll] 인뷰, 모바일 제외) */
.tw-sec.is-active:not([data-tw-scroll]) .tw-rvl,
.tw-sec[data-tw-scroll] .tw-rvl.is-inview { transition-delay: calc(0.5s + var(--rvl-i, 0) * 0.12s); }
/* 클로징(index10)은 각 블록이 뷰포트 진입할 때 순차 슬라이드업(is-inview) — 0.5s 베이스 + i*0.12s */
.tw-sec.tw-closing[data-tw-scroll] .tw-rvl.is-inview { transition-delay: calc(0.5s + var(--rvl-i, 0) * 0.12s); }
/* 클로징 마지막 블록만 더 빨리 등장 — 제목·본문을 함께 앞당기고 본문에 +0.12s 스태거를 줘 제목→본문 순서 유지 */
.tw-sec.tw-closing .tw-closing-text:last-child .tw-prose-title.tw-rvl.is-inview { transition-delay: 0.15s; }
.tw-sec.tw-closing .tw-closing-text:last-child .tw-prose-body.tw-rvl.is-inview { transition-delay: 0.27s; }
/* 모바일 세로 진입은 스크롤 순서대로 개별 노출 → 순번 딜레이 대신 평평한 0.06s (teathology 동일). */
.tw-story-mo.twm-fade .tw-rvl.is-inview { transition-delay: 0.06s; }
/* sec1(data-twm-index=1) 리빌을 패널 도착 시 재생 — is-inview만으론 숨김 유지하고, 청크 활성(.twm-chunk.is-active) 시점부터 base 0.9s+순번 0.3s로 제목→본문 순차 슬라이드업 */
.tw-story-mo.twm-fade .twm-chunk [data-twm-index="1"] .tw-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
.tw-story-mo.twm-fade .twm-chunk.is-active [data-twm-index="1"] .tw-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.3s); }
/* 콘텐츠 이미지/배경도 스크롤 진입 시 리빌 — 텍스트 .tw-rvl의 is-inview를 :has로 감지해 함께 등장. 섹션-필 배경(sec2·4 imgfull·sec10)은 상하 갭 방지 위해 opacity-only fade, 블록 콘텐츠(sec9 슬라이더)는 슬라이드업 */
.tw-story-mo.twm-fade [data-twm-index="2"] .twm-bg,
.tw-story-mo.twm-fade [data-twm-index="4"] .twm-bg,
.tw-story-mo.twm-fade [data-twm-index="10"] .twm-bg { opacity: 0; transition: opacity 0.8s ease; }
/* sec2·4 imgfull: 텍스트(이미지 하단 :has)가 아니라 이미지 상단 진입 시(JS 전용 IO가 .is-bgin 부여) 조기 fade. */
.tw-story-mo.twm-fade [data-twm-index="2"] .twm-bg.is-bgin,
.tw-story-mo.twm-fade [data-twm-index="4"] .twm-bg.is-bgin { opacity: 1; }
/* sec10(mediatext--dark 절대배치)은 텍스트 진입 시 fade 유지. */
.tw-story-mo.twm-fade [data-twm-index="10"]:has(.tw-rvl.is-inview) .twm-bg { opacity: 1; }
/* sec9 슬라이더(.twm-slider-sec)는 RVL_SEL에 추가해 자기 자신이 뷰 진입 시 슬라이드업 — :has(텍스트) 방식이면 위 프로즈 진입 시 리빌이 소진됨 */
/* eyebrow는 reveal 후에도 60% 유지(reveal의 opacity:1이 .tw-eyebrow{0.6}을 덮으므로 되돌림). */
.tw-story-mo.twm-fade .tw-eyebrow.tw-rvl.is-inview { opacity: 0.6; }
/* 모바일 top-of-chunk 리빌 조기 소진 방지(gate) + 챕터 커버(.twm-cover-text) 텍스트·칩 리빌. sec1은 위 별도 규칙(0.65s+0.3s) */
.tw-story-mo.twm-fade .twm-chunk:not(.is-active) .tw-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
.tw-story-mo.twm-fade .twm-chunk.is-active .twm-cover-text .tw-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.12s); }
.tw-story-mo.twm-fade .twm-chunk.is-active .twm-cover-text .tw-eyebrow.tw-rvl { opacity: 0.6; }
/* -more도 reveal 후 opacity 0.6 유지(reveal의 opacity:1이 .tw-more{0.6}을 덮으므로 되돌림). */
.tw-sec.is-active:not([data-tw-scroll]) .tw-more.tw-rvl,
.tw-sec[data-tw-scroll] .tw-more.tw-rvl.is-inview,
.tw-story-mo.twm-fade .tw-more.tw-rvl.is-inview { opacity: 0.6; }
/* hover 0.8 — reveal-0.6 규칙보다 높게(:hover 추가) 두어 hover가 이기도록. */
.tw-sec.is-active:not([data-tw-scroll]) .tw-more.tw-rvl:hover,
.tw-sec[data-tw-scroll] .tw-more.tw-rvl.is-inview:hover,
.tw-story-mo.twm-fade .tw-more.tw-rvl.is-inview:hover { opacity: 0.8; }
/* 인트로(index0) 슬라이드업 — JS(fireIntroReveal)가 배경 에셋 준비 후 .intro-in 부여 시 아래→위 슬라이드업(순번 스태거), 준비 전엔 숨김 대기 */
/* teaware는 첫 섹션이 data-tw-index=9라 index0 셀렉터에 안 걸림 → stage 첫 섹션으로도 매칭 */
.tw-sec[data-tw-index="0"].is-active:not(.intro-in) .tw-rvl,
.tw-stage > .tw-sec:first-child.is-active:not(.intro-in) .tw-rvl { opacity: 0; transform: translateY(2rem); transition: none; }
.tw-sec[data-tw-index="0"].intro-in .tw-rvl,
.tw-stage > .tw-sec:first-child.intro-in .tw-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
/* 모바일 인트로(.twm-hero) eyebrow/title/chips 슬라이드업 — 데스크탑 인트로와 동일. 순번 스태거, eyebrow는 0.6 유지 */
.twm-hero.intro-in .tw-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
.twm-hero.intro-in .tw-eyebrow.tw-rvl { opacity: 0.6; }
/* 첫 진입 깜박임(FOUC) 방지 — 리빌 마킹 여부와 무관하게 .intro-in 전에는 숨김 상태로 대기 */
.twm-hero:not(.intro-in) .twm-hero-text > * { opacity: 0; transform: translateY(2rem); }

/* [NEW-product-tea-wear-story] 모바일(하이브리드 풀페이지, .tw-story-mo.display-mo) — tea story .tem-* 복제 — root 62.5%→1rem=10px. JS(.twm-fp)가 인트로(.twm-hero)+챕터 청크(.twm-chunk)를 1제스처=1패널 전환(space/teathology 동일). */
/* 데스크탑 서브메뉴는 모바일 숨김 — .twm-hero-menu 가 대신 */
@media (max-width: 1024px) {
  .content-asset-teaware-story .teaware_story { display: none; }
  .tw-prose-title { font-size: 22px; line-height: 1.63; }
  .tw-prose-body { font-size: 16px; line-height: 1.75; }
  .tw-more { font-size: 12px; }
  .tw-more-arrow { display: inline-flex; }
}

.tw-story-mo { position: relative; }
.twm-sec { position: relative; }
.twm-sec.twm-closing .tea-tea-bottom { padding: 10rem 3.2rem; }

/* 배경(이미지/영상) 풀블리드 */
.twm-bg, .twm-bg img, video.twm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
video.twm-bg { -webkit-transform: translateZ(0); transform: translateZ(0); }
.twm-scrim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0.32; }
.twm-scrim.twm-scrim--soft { opacity: 0.22; }

/* 인트로 히어로(차 이미지 + 서브메뉴 + 타이틀/칩) */
.twm-hero { position: relative; height: 100svh; overflow: hidden; background: #e9e3d8; display: flex; flex-direction: column; justify-content: space-between; }
.twm-hero-menu { position: relative; z-index: 2; padding: 2.8rem 1.6rem 2rem; color: #fff; } /* 인트로 배경 영상(어두움) 위 흰색 계통 */
.twm-submenu-top, .twm-submenu { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.twm-submenu-top { font-size: 1.2rem; margin-bottom: 0.6rem; letter-spacing: 0.05em; }
.twm-submenu { font-size: 1.6rem; }
.twm-submenu-top a, .twm-submenu a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.twm-submenu-top .active a, .twm-submenu .active a { color: #fff; }
.twm-submenu .active a { font-size: 1.8rem; }
.twm-hero-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #fff; }
.twm-hero-title { font-size: 18px; font-weight: 500; line-height: 1.333; letter-spacing: 0.01em; }

/* 모바일 하이브리드 풀페이지(JS가 .twm-fp 부여) — 패널: 인트로(.twm-hero)/챕터 청크(.twm-chunk), 1제스처=1패널 슬라이드+fade. 첫 본문(영상)부터 청크 시작, 챕터 커버(.twm-cover 100svh)마다 새 청크→상단 패딩 0. space/teathology .xxm-fp 동일 구조. */
.twm-fp.tw-story-mo { position: relative; height: 100svh; overflow: hidden; }
.twm-fp > .twm-hero,
.twm-fp > .twm-chunk {
  position: absolute; top: 0; left: 0; width: 100%; height: 100svh;
  opacity: 0; transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity;
}
/* 진입 첫 프레임 전환 억제(JS가 no-fp-anim 부여 → rAF 후 제거). 흐름→화면밖 값변화로 transition이 발동해 "겹친 후 아래로 슬라이드"되던 초기 플래시 차단. */
.twm-fp.no-fp-anim > .twm-hero,
.twm-fp.no-fp-anim > .twm-chunk { transition: none; }
.twm-fp > .twm-hero.is-next,
.twm-fp > .twm-chunk.is-next { transform: translateY(100%); opacity: 0; }
.twm-fp > .twm-hero.is-prev,
.twm-fp > .twm-chunk.is-prev { transform: translateY(-100%); opacity: 0; }
.twm-fp > .twm-hero.is-active,
.twm-fp > .twm-chunk.is-active { transform: translateY(0); opacity: 1; }
.twm-fp > .twm-chunk { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-top: var(--twm-top, 6.8rem); } /* 헤더 클리어런스: 청크 콘텐츠가 고정 헤더 아래에서 시작(섹션 높이가 헤더 제외되도록 — parfums .pfm-chunk 동일) */
.twm-fp > .twm-chunk::-webkit-scrollbar { display: none; }
/* 인트로 서브메뉴 — 풀페이지 핀으로 moRoot top이 흔들려도 헤더 bottom 아래 20px 정렬(JS setTop이 --twm-hero-menu-top 부여). */
.twm-fp .twm-hero-menu { padding-top: var(--twm-hero-menu-top, var(--twm-top, 6.8rem)); }

/* 챕터 커버(이미지 + 하단 좌측 eyebrow/타이틀/칩) */
.twm-cover { position: relative; height: calc(100svh - var(--twm-top, 6.8rem)); overflow: hidden; background: #000; display: flex; flex-direction: column; justify-content: flex-end; } /* 헤더 제외 높이(청크 padding-top과 합쳐 화면 1개 정확히 채움) */
.twm-cover-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #000; text-align: left; }
/* sec2 커버 — 텍스트 섹션 상단 배치(tobe mo/2-1_2-2 상단부). 기본 하단정렬(flex-end) override. */
.twm-cover--top { justify-content: flex-start; }
.twm-cover--top .twm-cover-text { padding: 10rem 3.2rem 0; }
.twm-cover--dark .twm-cover-text { color: #fff; }
/* [guide-0716 Phase1-2] 다크 챕터 커버 하단 텍스트 가독용 검정 그라디언트(가이드 p100: 텍스트 하단 → 아래가 진하게 to top 1→0.5). 기존 flat .twm-scrim은 다크 커버에서 숨겨 그라디언트로 통일(pseudo, BM 무수정). */
.twm-cover--dark .twm-scrim { display: none; }
.twm-cover--dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
/* 하단 그라디언트가 불필요한 다크 커버(data-twm-index=8·5)는 ::after 제거 */
.twm-cover--dark[data-twm-index="8"]::after,
.twm-cover--dark[data-twm-index="5"]::after { display: none; }
.twm-cover-text .tw-prose-title { margin: 0; text-align: left; }

/* 챕터 칩(가로 스크롤, 양끝 대칭 인셋) */
.twm-cover-chips { display: flex; gap: 2.4rem; margin: 1rem -3.2rem 0; padding: 0 3.2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.005em; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; color: inherit; }
.twm-cover-chips::-webkit-scrollbar { display: none; }
.twm-cover-chips .tw-chip { flex: 0 0 auto; }
/* [스크롤 인디케이터] 좌우 스크롤 가능(.is-scrollable) 시 우측 여백 10rem + 우측 6.4rem 흰→투명 mask 페이드 */
.twm-cover-chips.is-scrollable { padding-right: 3.2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); }
/* sec2 cover2(모바일) — 데스크탑 tw-cover2 대응: mo/2-1 한 장이 커버+본문 전체 배경으로 이어짐(연속). 청크 네이티브 스크롤로 상단 커버(여백을 마시는 차)→하단 한국유기농 텍스트 이동. 다크 텍스트(라이트 이미지). */
.twm-cover2 { position: relative; background: #fff; color: #000; }
.twm-cover2-track { position: relative; }
.twm-cover2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 0; }
.twm-cover2-cover { position: relative; z-index: 1; min-height: calc(100svh - var(--twm-top, 6.8rem)); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 3.2rem 4rem; } /* 헤더 제외 높이 */
.twm-cover2-cover .tw-prose-title { margin: 0; text-align: left; }
.twm-cover2-text { position: relative; z-index: 1; padding: 4rem 3.2rem 6rem; }
.twm-cover2-text .tw-prose-title { margin: 0 0 4rem; text-align: left; }

/* 이미지/영상 위 텍스트(풀블리드, 하단 좌측) — 긴 본문은 섹션이 늘어나며 배경이 함께 커버. */
.twm-mediatext { position: relative; min-height: calc(100svh - var(--twm-top, 6.8rem)); overflow: hidden; background: #fff; display: flex; flex-direction: column; justify-content: flex-end; } /* 헤더 제외 높이 */
.twm-mediatext-text { position: relative; z-index: 2; padding: 10rem 3.2rem; text-align: left; color: #000; }
.twm-mediatext--dark .twm-mediatext-text { color: #fff; }
/* sec4 4-2(조선의 선비들…) 전용 — 텍스트를 이미지(섹션) 높이의 세로 중앙에 배치(기본 flex-end 하단정렬 override). sec1a·sec1b는 미적용. */
.twm-mediatext--center { justify-content: center; }
/* 다크 mediatext(예: sec1b 1-3) 위 '더 알아보기' 링크 — .tw-more 기본색(검정60%)이 어두운 배경에 묻혀 흰색으로 override(화살표 svg는 currentColor라 함께 흰색). */
.twm-mediatext--dark .tw-more { color: rgba(255, 255, 255, 0.8); }
.twm-mediatext--dark .tw-more:hover { color: #fff; }
.twm-mediatext-text .tw-prose-title { margin: 0 0 4rem; text-align: left; }
.twm-mediatext-text .tw-more { margin-top: 4rem; } /* 모바일: 본문 텍스트 ↔ '더 알아보기' 링크 간격 */
/* sec1b(twm-mediatext--imgfull) — 이미지 원본 비율 전체 노출(자연 높이, cover 크롭 해제)·섹션 높이를 이미지에 맞춤 + 텍스트 오버레이 유지 */
.twm-mediatext--imgfull { min-height: 0; display: block; }
.twm-mediatext--imgfull .twm-bg,
.twm-mediatext--imgfull .twm-bg img { position: relative; inset: auto; height: auto; }
.twm-mediatext--imgfull .twm-mediatext-text { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 4rem; color: #fff; } /* scrim 없이 이미지 위 흰 텍스트(--dark/scrim 미사용) */
.twm-mediatext--imgfull .tw-more { color: rgba(255, 255, 255, 0.8); }
.twm-mediatext--imgfull .tw-more:hover { color: #fff; }
/* sec2(data-twm-index=2, imgfull) — 흰 텍스트 가독용 텍스트 박스 하단 검정 그라디언트(아래 진하게 → 위 투명) */
.twm-mediatext--imgfull[data-twm-index="2"] .twm-mediatext-text {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 100%);
}
/* [3-3 sticky 2단계 리빌] data-twm-index=7: 섹션을 180svh로 늘려 스크롤 여유 확보 + .twm-sticky-inner를 한 화면 고정(네이티브 sticky). JS가 .is-revealed 토글 → 이미지 blur(8px)+텍스트 오버레이 fade-in. 섹션 overflow:visible 필수 */
.twm-mediatext--sticky { min-height: 180svh; display: block; position: relative; overflow: visible; background: #000; }
.twm-mediatext--sticky .twm-sticky-inner { position: -webkit-sticky; position: sticky; top: 0; height: calc(100svh - var(--twm-top, 6.8rem)); overflow: hidden; } /* top:0 — 청크 padding-top(=헤더 클리어런스)이 이미 있어 sticky는 콘텐츠 상단(헤더 바로 아래)에 pin. top:헤더값 주면 이중 오프셋으로 상단 빈틈+하단 잘림 발생. */
.twm-mediatext--sticky .twm-bg { position: absolute; inset: 0; z-index: 0; }
.twm-mediatext--sticky .twm-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* [스펙] 스크림 — 기본(step0)=검정 20%(클린 이미지 명도 매칭), 리빌(step1)=투명+backdrop blur 20(데스크탑 tw-reveal-blur 동일). */
.twm-mediatext--sticky .twm-sticky-inner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background 0.6s ease, -webkit-backdrop-filter 0.6s ease, backdrop-filter 0.6s ease; pointer-events: none; }
.twm-mediatext--sticky.is-revealed .twm-sticky-inner::after { background: transparent; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.twm-mediatext--sticky .twm-mediatext-text { position: absolute; top: 0; bottom: 0; left: 3.2rem; right: 3.2rem; display: flex; flex-direction: column; justify-content: center; padding: 0; z-index: 2; color: #fff; opacity: 0; transition: opacity 0.6s ease; } /* 위 20rem·아래 10rem 고정 박스 → 세로 중앙정렬(flex justify-center), 좌우 3.2rem 유지 */
.twm-mediatext--sticky .tw-prose-body { padding-top: 10rem; } /* sec7 padding-top은 박스가 아니라 본문(tw-prose-body)에 */
.twm-mediatext--sticky.is-revealed .twm-mediatext-text { opacity: 1; }
/* sec2 본문(twm-mediatext--flow) — 텍스트를 이미지 전체 높이에 걸쳐 flow. 두 prose-body 블록 사이 간격은 지정 패딩으로 분산. */
.twm-mediatext--flow .twm-mediatext-text { top: 0; padding-top: 20rem; color: #000; } /* sec2 본문(노랑 이미지)은 검정 텍스트 — imgfull 흰색 override */
.twm-mediatext--flow .tw-prose-body:first-of-type { padding-top: 0; padding-bottom: 10rem; }
.twm-mediatext--flow .tw-prose-body:last-of-type { padding-top: 0; padding-bottom: 30rem; }

/* 텍스트 전용(화이트 배경) */
.twm-prose { background: #fff; color: #000; padding: 10rem 3.2rem 10rem; }
.twm-prose .tw-prose-title { text-align: left; }
/* 마무리 초대 문구 — 바로 위 섹션에 붙여 상단 여백 제거 */
/* sec3 3-2 텍스트(첫 잎부터…) 섹션 상하 여백 15rem (좌우 3.2rem 유지). data-twm-index=6 개별 타게팅. */
.twm-sec.twm-prose[data-twm-index="6"] { padding-top: 15rem; padding-bottom: 15rem; }

/* 풀폭 이미지(3-3) */
.twm-img { font-size: 0; }
.twm-img > img { display: block; width: 100%; height: auto; }

/* 이미지 슬라이더(4-1-1/4-1-2) — parfums 스토어 슬라이더와 동일 Swiper(slidesPerView:'auto'·spaceBetween:0·offset 32). 좌측 오프셋·2번째 일부 노출(peek), 비활성 opacity .5. 화살표/넘버 없음. */
.twm-slider-swiper { width: 100%; }
.twm-slider-swiper .swiper-wrapper { height: auto; align-items: flex-start; gap: 0; }
.twm-slider-swiper .twm-slider-slide { width: 82%; box-sizing: border-box; height: auto; } /* swiper.css .swiper-slide{width:100%} override 위해 후손 셀렉터 specificity 상향(parfums 동일). opacity 디밍 제거 — 전 슬라이드 불투명(active 무관). */
.twm-slider-slide img { width: 100%; height: auto; display: block; }

/* 마무리(초대 문구+방문예약) — .tea-tea-bottom 재사용(자체 패딩 보유). */
.twm-closing { background: #fff; }


/* [NEW-product-parfums-story] 모바일(하이브리드 풀페이지, .pf-story-mo.display-mo) — root 62.5%→1rem=10px. JS(.pfm-fp)가 인트로(.pfm-hero)+챕터 청크(.pfm-chunk)를 1제스처=1패널 전환(tea story 동일). */
@media (max-width: 1024px) {
  .content-asset-parfums-story .parfums_story { display: none; }
  .pf-prose-title { font-size: 22px; line-height: 1.63; }
  .pf-prose-body { font-size: 16px; line-height: 1.75; }
}

.pf-story-mo { position: relative; }
.pfm-sec { position: relative; }

/* 배경(이미지/영상) 풀블리드 + 스크림/그라디언트 */
.pfm-bg, .pfm-bg img, video.pfm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
video.pfm-bg { -webkit-transform: translateZ(0); transform: translateZ(0); }
.pfm-scrim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0.35; }
.pfm-scrim.pfm-scrim--soft { opacity: 0.25; }
.pfm-grad-top { position: absolute; top: 0; left: 0; right: 0; height: 40%; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
.pfm-cover-frame { position: absolute; inset: 0; z-index: 1; background: url("../images/story-blur-bk-m.png") center / 100% 100% no-repeat; pointer-events: none; }

/* 인트로 히어로(=ch1 커버) */
.pfm-hero { position: relative; height: 100svh; overflow: hidden; background: #000; display: flex; flex-direction: column; justify-content: space-between; }
.pfm-hero-menu { position: relative; z-index: 2; padding: 2.8rem 1.6rem 2rem; color: #fff; }
.pfm-submenu-top, .pfm-submenu { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.pfm-submenu-top::-webkit-scrollbar, .pfm-submenu::-webkit-scrollbar { display: none; }
.pfm-submenu-top { font-size: 1.2rem; margin-bottom: 0.6rem; letter-spacing: 0.05em; }
.pfm-submenu { font-size: 1.5rem; }
.pfm-submenu-top li, .pfm-submenu li { flex: 0 0 auto; white-space: nowrap; }
.pfm-submenu-top a, .pfm-submenu a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.pfm-submenu a { font-size: 1.8rem; }
.pfm-submenu-top .active a, .pfm-submenu .active a { color: #fff; }
.pfm-hero-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #fff; }

/* 챕터 커버(하단 좌측 텍스트) — 고정 헤더 높이만큼 줄여 상단이 헤더에 가리지 않게 함 */
.pfm-cover { position: relative; height: calc(100svh - var(--pfm-top, 6.8rem)); overflow: hidden; background: #000; display: flex; flex-direction: column; justify-content: flex-end; }
.pfm-cover-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #fff; text-align: left; }
/* 이미지 커버(--light: mo/4, --dark: mo/9)는 검정 배경 제거 — 배경 이미지가 opacity 페이드될 때 뒤의 검정이 비쳐 깜빡였음. 영상 커버(--grad)는 로딩 중 검정 유지 */
.pfm-cover--light,
.pfm-cover--dark { background: #fff; }
.pfm-cover--light .pfm-cover-text { color: #000; }
.pfm-cover--dark { justify-content: center; }
.pfm-title { font-size: 18px; font-weight: 500; line-height: 1.333; letter-spacing: 0.01em; color: inherit; }

/* 챕터 칩(가로 스크롤, 양끝 대칭 인셋) */
.pfm-cover-chips { display: flex; gap: 2.4rem; margin: 1rem -3.2rem 0; padding: 0 3.2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.005em; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; color: inherit; }
.pfm-cover-chips::-webkit-scrollbar { display: none; }
.pfm-cover-chips .pf-chip { flex: 0 0 auto; }
/* [스크롤 인디케이터] 좌우 스크롤 가능(.is-scrollable) 시 우측 여백 10rem + 우측 6.4rem 흰→투명 mask 페이드 */
.pfm-cover-chips.is-scrollable { padding-right: 3.2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); }

/* [스크롤 인디케이터] tea/parfums 모바일 챕터 커버 칩도 좌우 스크롤 가능할 때만 › 노출 — teathology .tsm 동일. 색은 커버 텍스트색 상속(라이트=검정/다크=흰). JS가 .is-scrollable 토글. */
/* tea 인트로(.tem-hero)의 칩 부모는 .tem-hero-text라 셀렉터에 추가(parfums .pfm-hero-text와 동일) */
.tem-hero-text:has(.tem-cover-chips.is-scrollable)::after,
.tem-cover-text:has(.tem-cover-chips.is-scrollable)::after,
.pfm-hero-text:has(.pfm-cover-chips.is-scrollable)::after,
.pfm-cover-text:has(.pfm-cover-chips.is-scrollable)::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 4.1rem;
  width: 7px;
  height: 1.68rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  color: inherit;
  pointer-events: none;
  z-index: 3;
}
/* sec2 커버(tem-cover--top)는 상단정렬(padding-bottom:0)이라 칩이 cover-text 맨 아래 → 화살표 bottom을 칩 행에 맞춰 내림(기본 4.1rem은 하단정렬 커버용). 실측: 칩 행이 cover-text 하단 0~1.7rem. */
.tem-cover--top .tem-cover-text:has(.tem-cover-chips.is-scrollable)::after { bottom: 0.1rem; }
/* chnav 화살표(›) fade — 슬라이드업 불가한 가상요소라 opacity 0→1(커버/인트로 리빌 뒤 0.9s). 전 스토리 공통 */
.tem-hero-text:has(.tem-cover-chips.is-scrollable)::after,
.tem-cover-text:has(.tem-cover-chips.is-scrollable)::after,
.pfm-hero-text:has(.pfm-cover-chips.is-scrollable)::after,
.pfm-cover-text:has(.pfm-cover-chips.is-scrollable)::after,
.tsm-imgtext-text:has(.tsm-cover-chips.is-scrollable)::after { opacity: 0; transition: opacity 0.7s ease; }
.tem-hero.intro-in .tem-hero-text:has(.tem-cover-chips.is-scrollable)::after,
.te-story-mo.tem-fade .tem-chunk.is-active .tem-cover-text:has(.tem-cover-chips.is-scrollable)::after,
.pfm-hero.intro-in .pfm-hero-text:has(.pfm-cover-chips.is-scrollable)::after,
.pf-story-mo.pfm-fade .pfm-chunk.is-active .pfm-cover-text:has(.pfm-cover-chips.is-scrollable)::after,
.tsm-hero.intro-in .tsm-imgtext-text:has(.tsm-cover-chips.is-scrollable)::after,
.ts-story-mo.tsm-fade .tsm-chunk.is-active .tsm-imgtext-text:has(.tsm-cover-chips.is-scrollable)::after { opacity: 1; transition-delay: 0.9s; }

/* sec1 마퀴(1-1_1~8 흘러가는 이미지) */
.pfm-marquee { overflow: hidden; background: #000; }
.pfm-marquee-track { display: flex; width: max-content; animation: pfm-marquee var(--pfm-marquee-duration, 40s) linear infinite; }
.pfm-marquee-track > img { flex: 0 0 auto; width: auto; height: 42svh; min-height: 500px; object-fit: cover; object-position: center; display: block; }
@keyframes pfm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 프로즈(텍스트 전용) */
.pfm-prose { background: #fff; color: #000; padding: 6rem 3.2rem 10rem; }
.pfm-prose .pf-prose-title { margin: 0 0 4rem; text-align: left; }
.pfm-prose--dark { background: #000; color: #fff; }
.pfm-prose--invite { padding-top: 0; }

/* 미디어(영상/이미지) + 텍스트 */
.pfm-mediatext { position: relative; background: #fff; color: #000; padding-bottom: 500px; }
/* 하단 400px 흰→검정 그라디언트(다음 다크 섹션으로 자연 전환). */
.pfm-mediatext::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 400px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #000); pointer-events: none; }
.pfm-mediatext-media { position: relative; padding: 0; font-size: 0; }
.pfm-mediatext-media img, .pfm-mediatext-vid { width: 100%; height: auto; display: block; background: #000; }
/* sec2 타임코드 영상: 상·하 검정 레터박스 크롭(흰 밴드 8:3만). 이미지엔 미적용. */
.pfm-mediatext-vid { aspect-ratio: 9 / 3; height: auto; object-fit: cover; object-position: center; }
.pfm-timecode { position: absolute; top: 2.4rem; left: 3.2rem; z-index: 2; color: #fff; font-size: 2.4rem; font-weight: 600; letter-spacing: 0.08em; }
.pfm-mediatext-text { padding: 6rem 3.2rem 10rem; }
.pfm-mediatext-text .pf-prose-title { margin: 0 0 4rem; text-align: left; }

/* [참고 space] sec2 챕터 네비 — 4.jpg 커버는 이미지만, 챕터 텍스트(eyebrow+탭)는 타임코드 영상 섹션 상단(흰 배경·검정)으로 이동. space .ssm-chnav 패턴. */
.pfm-mediatext-sec { background: #fff; color: #000; }
/* sec2 챕터 텍스트를 커버 텍스트 마크업(.pfm-hero-text)으로 통일 — 흰 배경이라 color를 검정으로 되돌리고 상하 여백(4rem 3.2rem) 유지 */
.pfm-mediatext-sec .pfm-hero-text { color: #000; padding: 4rem 3.2rem; }
/* 커버/인트로가 아닌 일반 섹션이라 칩 › 화살표 fade 트리거(.pfm-hero.intro-in / .pfm-chunk.is-active)가 없어 opacity:0으로 남는다 → 기존 .pfm-chnav처럼 항상 노출. */
.pfm-mediatext-sec .pfm-hero-text:has(.pfm-cover-chips.is-scrollable)::after { opacity: 1; }
.pfm-chnav { position: relative; padding: 4rem 3.2rem; }
.pfm-chnav .pf-eyebrow { margin: 0 0 1rem; }
.pfm-chnav-tabs { display: flex; gap: 2rem; font-size: 18px; font-weight: 500; line-height: 1.333; letter-spacing: 0.01em; flex-wrap: nowrap; overflow-x: auto; margin: 0 -3.2rem; padding: 0 3.2rem; scrollbar-width: none; -ms-overflow-style: none; }
.pfm-chnav-tabs::-webkit-scrollbar { display: none; }
.pfm-chnav-tabs a { color: rgba(0, 0, 0, 0.4); text-decoration: none; flex: 0 0 auto; white-space: nowrap; }
.pfm-chnav-tabs a.is-active { color: #000; }
/* [스크롤 인디케이터] 탭바가 넘쳐 좌우 스크롤 가능할 때만 › 노출 — space .ssm-chnav 동일. JS가 .is-scrollable 토글. */
.pfm-chnav-tabs.is-scrollable { padding-right: 3.2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); }
.pfm-chnav:has(.pfm-chnav-tabs.is-scrollable)::after {
  content: ""; position: absolute; right: 1.2rem; bottom: 4rem; width: 7px; height: 2.4rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  color: inherit; pointer-events: none; z-index: 3;
}

/* sec3 필름 슬라이더 */
.pfm-film { color: #fff; }
.pfm-film-sec { position: relative; background: #000; color: #fff; padding: 4rem 0 0; }
.pfm-film-top { text-align: center; padding: 0 3.2rem 3rem; color: inherit; }
.pfm-film-time { color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: 0; }
/* iOS: 가로 스와이프 시 청크(overflow-y:auto→x도 auto 승격)가 가로 러버밴드로 딸려 밀림 → 가로는 Swiper 전담(touch-action:pan-y)+부모 체이닝 차단(overscroll-behavior-x:contain). SPACE STORY(.ssm-slides) 동일 패턴. */
.pfm-film-viewport { position: relative; touch-action: pan-y; }
.pfm-film-swiper { width: 100%; touch-action: pan-y; overscroll-behavior-x: contain; }
.pfm-film-swiper .swiper-wrapper { height: auto; align-items: flex-start; }
/* [guide-0716 Phase2-2] 모바일 필름 좌우 peek — 슬라이드 폭 vw-64px·비선택 opacity 40%(가이드 p125). slidesPerView:'auto'+centeredSlides가 좌우 32px peek 노출. */
.pfm-film-swiper .pfm-film-item { width: calc(100vw - 6.4rem); box-sizing: border-box; height: auto; opacity: 0.4; transition: opacity 0.4s ease; } /* swiper.css .swiper-slide{width:100%}(동일 특이도·후로드)를 이기려면 후손 셀렉터로 특이도 상향 — 스토어 슬라이더와 동일 패턴 */
.pfm-film-item.swiper-slide-active { opacity: 1; }
.pfm-film-vid { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.pfm-film-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 4rem; height: 4rem; border: 0; cursor: pointer; font-size: 0; background: url("../images/arrow-wh.svg") center / 0.7rem auto no-repeat; }
.pfm-film-arrow--prev { left: -0.4rem; transform: translateY(-50%) scaleX(-1); } /* 활성 영상 좌측 안쪽 14px(=peek 32px + 14px, 가이드 p125). arrow-wh.svg 우(›)→이전은 반전(‹) */
.pfm-film-arrow--next { right: -0.4rem; }
.pfm-film-name { color: #fff; margin: 3rem 0 4rem; text-align: center; font-size: 1.2rem; font-weight: 700; letter-spacing: 0; transition: opacity 0.4s ease; }
/* 필름 섹션이 검정 배경이라 하단 프로즈 블록도 검정 배경·흰 텍스트로(섹션 전체 검정). */
.pfm-film-sec .pfm-prose--dark { padding-top: 4rem; padding-bottom: 40rem; background: linear-gradient(
  0, rgba(255, 255, 255, 100%) 0%, rgba(0, 0, 0, 0) 30%); color: #fff; }

/* sec4 스토어 이미지 슬라이더 */
.pfm-store-sec { background: #fff; color: #000; padding: 0 0 10rem; }
.pfm-store-swiper { width: 100%; }
.pfm-store-swiper .swiper-wrapper { height: auto; align-items: flex-start; gap: 0; }
.pfm-store-swiper .pfm-store-slide { width: 82%; box-sizing: border-box; height: auto; opacity: 0.5; transition: opacity 0.4s ease; } /* swiper.css의 .swiper-slide{width:100%}를 이기려면 후손 셀렉터로 specificity 상향(데스크탑 .pf-imgslider .swiper-slide 패턴과 동일) */
.pfm-store-slide.swiper-slide-active { opacity: 1; }
.pfm-store-slide img { width: 100%; height: auto; display: block; }
.pfm-store-nav { display: flex; align-items: center; gap: 2rem; padding: 2rem 3.2rem 0; }
.pfm-store-arrow { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border: 0; background: transparent; color: #000; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 0; }
.pfm-store-arrow[data-pfm-store-next] svg { transform: scaleX(-1); } /* 제공 SVG는 좌(‹) 방향 → 다음 버튼은 반전(›) — pf-imgslider-arrow와 동일 패턴 */
.pfm-store-count { display: flex; gap: 1rem; font-size: 1.3rem; letter-spacing: 0.05em; }
.pfm-store-info { padding: 2rem 3.2rem 0; }
.pfm-store-name { margin: 0 0 3rem; font-size: 1.8rem; font-weight: 500; }
.pfm-store-dl { margin: 0; font-size: 1.4rem; line-height: 1.6; display: flex; flex-direction: column; gap: 1rem; }
.pfm-store-dl > div { display: flex; gap: 2.4rem; }
.pfm-store-dl dt { flex: 0 0 6rem; margin: 0; color: rgba(0, 0, 0, 0.5); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; line-height: 2rem; }
.pfm-store-dl dd { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; line-height: 2rem; }

/* sec4 마무리(버튼 위 텍스트 + CTA 2버튼) */
.pfm-closing { background: #fff; color: #000; text-align: center; padding: 10rem 3.2rem 8rem; }
.pfm-closing-desc { margin: 0 0 3rem; font-size: 1.4rem; line-height: 1.7; }
.pfm-cta-buttons { display: flex; flex-direction: column; gap: 1.2rem; }

/* 모바일 하이브리드 풀페이지(JS가 .pfm-fp 부여) — 패널: 인트로(.pfm-hero)/챕터 청크(.pfm-chunk), 1제스처=1패널 슬라이드+fade. 첫 본문(마퀴+텍스트)부터 청크 시작, 챕터 커버(.pfm-cover)마다 새 청크. tea story .tem-fp 동일 구조. */
.pfm-fp.pf-story-mo { position: relative; height: 100svh; overflow: hidden; }
.pfm-fp > .pfm-hero,
.pfm-fp > .pfm-chunk {
  position: absolute; top: 0; left: 0; width: 100%; height: 100svh;
  opacity: 0; transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity;
}
/* 진입 첫 프레임 전환 억제(JS가 no-fp-anim 부여 → rAF 후 제거). 흐름→화면밖 값변화로 transition이 발동해 "겹친 후 아래로 슬라이드"되던 초기 플래시 차단. */
.pfm-fp.no-fp-anim > .pfm-hero,
.pfm-fp.no-fp-anim > .pfm-chunk { transition: none; }
.pfm-fp > .pfm-hero.is-next,
.pfm-fp > .pfm-chunk.is-next { transform: translateY(100%); opacity: 0; }
.pfm-fp > .pfm-hero.is-prev,
.pfm-fp > .pfm-chunk.is-prev { transform: translateY(-100%); opacity: 0; }
.pfm-fp > .pfm-hero.is-active,
.pfm-fp > .pfm-chunk.is-active { transform: translateY(0); opacity: 1; }
/* overflow-x:hidden — 세로만 auto로 승격되며(overflow-x도 auto) 필름 화살표(-0.4rem 돌출) 등이 만드는 가로 4px 오버플로가 iOS에서 러버밴드로 잡히던 것 차단. 세로 스크롤은 유지. */
.pfm-fp > .pfm-chunk { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-top: var(--pfm-top, 6.8rem); }
.pfm-fp > .pfm-chunk::-webkit-scrollbar { display: none; }
/* 챕터 커버(.pfm-cover)는 자체 높이를 헤더만큼 줄였으므로(위) 청크도 동일하게 헤더 클리어런스 패딩을 유지 — 헤더에 가리지 않게 함 */
/* 다크 영상 커버(.pfm-cover--grad, index=3) 청크는 헤더 클리어런스 영역까지 검정 — 앞 그라디언트(검정)→커버로 배경 연속. */
.pfm-fp > .pfm-chunk:has(.pfm-cover--grad) { background: #000; }
/* 위 그라디언트(#000으로 끝남)→검정 커버 청크 전환 동안만 컨테이너를 검정으로 — 패널 페이드 사이로 흰 배경이 드러나 검정이 바래는 것 차단(JS paintMoBk) */
.pfm-fp.pf-story-mo.pfm-fp--bk { background: #000; }
/* 인트로 서브메뉴 — 풀페이지 핀으로 moRoot top이 흔들려도 헤더 bottom 아래 20px 정렬(JS setTop이 --pfm-hero-menu-top 부여). */
.pfm-fp .pfm-hero-menu { padding-top: var(--pfm-hero-menu-top, var(--pfm-top, 6.8rem)); }

/* [STORY 공통] 풀페이지 초기화 전 레이아웃 플래시(FOUC) 차단 — 패널 절대배치·뷰포트 클리핑이 JS flag(모바일 .pfm-fp/.tem-fp/.tsm-fp, 데스크탑 html.pf-fp/.te-fp/.ts-fp) 아래에만 정의돼 있어 flag 기준으로 초기 상태를 고정(space-story·parfums·tea·teaware·teathology 공통) */
@media (max-width: 1024px) {
  /* 모바일 — flag 전 root를 뷰포트로 클리핑 → 인트로 히어로(첫 자식·100svh)만 노출, 아래 섹션은 클립 */
  .space-story-mo:not(.ssm-fp),
  .pf-story-mo:not(.pfm-fp),
  .te-story-mo:not(.tem-fp),
  .tw-story-mo:not(.twm-fp),
  .cd-story-mo:not(.cdm-fp),
  .ts-story-mo:not(.tsm-fp) { height: 100svh; overflow: hidden; }
}
@media (min-width: 1025px) {
  /* 데스크탑 — flag 전 스토리·서브메뉴를 숨김(핀 정착·서브메뉴 이동 후 flag와 함께 노출) */
  .pf-story, .te-story, .tw-story, .cd-story, .ts-story,
  .content-asset-parfums-story .parfums_story,
  .content-asset-tea-story .tea_story,
  .content-asset-teaware-story .teaware_story,
  .content-asset-candle-story .candle_story,
  .content-asset-teathology-story .story_thology { visibility: hidden; }
  html.pf-fp .pf-story,
  html.te-fp .te-story,
  html.tw-fp .tw-story,
  html.cd-fp .cd-story,
  html.ts-fp .ts-story,
  html.pf-fp .content-asset-parfums-story .parfums_story,
  html.te-fp .content-asset-tea-story .tea_story,
  html.tw-fp .content-asset-teaware-story .teaware_story,
  html.cd-fp .content-asset-candle-story .candle_story,
  html.ts-fp .content-asset-teathology-story .story_thology { visibility: visible; }
}

/* [NEW-reservation-popup] 예약 팝업 신규(P1 생성/P2 완료/P4 닫기확인/P5·P6 인원초과) — Figma 855:2733(DT KR)·872:2179(MO KR). 폰트 family 미지정(MOD-fonts body 상속). */
/* 레거시 .modal(top/left 50%+translate)은 고정 크기 전제라 가변 폭 팝업에서 위치가 어긋남 → 전체화면 오버레이+flex 중앙정렬로 재정의 */
/* 딤 없음(운영 모달 동일, .modal-backdrop.show{display:none}). 사이트 헤더(z-index:99999)보다 위 → 모달이 헤더에 안 가림. */
.rp-modal.show, .rp-dialog.show {
  top: 0; left: 0; right: 0; bottom: 0;
  transform: none;
  width: 100%; height: 100%;
  display: flex !important;
  align-items: center; justify-content: center;
  overflow-y: auto;
  padding: 20px;
  z-index: 100000;
}
.rp-modal .modal-dialog, .rp-dialog .modal-dialog { pointer-events: auto; margin: 0; }
/* 개인정보 모달(#privacyPolicymodal, 레거시 z-index 1050)이 예약 팝업(100000) 뒤로 깔려 안 보이던 것 상향 */
#privacyPolicymodal { z-index: 100001; }

.rp-modal .modal-dialog { max-width: 860px; width: 100%; }
/* 세로 해상도 대응: modal-content는 flex 세로 컨테이너로 높이만 제한, 스크롤은 폼(#reservationFormNew)에서 발생. scrollbar-gutter:stable로 폭 흔들림 제거, 여백 각 30px */
.rp-modal .modal-content { position: relative; display: flex; flex-direction: column; border: 1px solid #000; border-radius: 0; padding: 0; max-height: calc(100vh - 40px); overflow: hidden; }
.rp-stickyhead { position: static; flex: 0 0 auto; z-index: 3; background: #fff; padding: 30px 30px 0; }
.rp-modal #reservationFormNew { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 0 16px 25px 30px; }
.rp-close { position: absolute; top: 30px; right: 30px; width: 15px; height: 15px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 5; }
.rp-close img, .rp-close svg { display: block; width: 100%; height: 100%; }

.rp-header { position: relative; padding-right: 30px; padding-bottom: 8px; margin-top: 4px; }
.rp-title { font-size: 15px; letter-spacing: 2.7px; color: #000; }

.rp-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; padding: 15px 0 10px; }
.rp-summary-item { display: flex; flex-direction: column; gap: 4px; }
.rp-summary-label { font-size: 13px; font-weight: 500; color: #000; line-height: 1.2; }
.rp-summary-value { font-size: 18px; font-weight: 600; color: #0c0c0c; line-height: 1.2; }

.rp-scroll { overflow-x: hidden; }

.rp-people-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.rp-people-label { font-size: 15px; font-weight: 500; color: #000; margin: 0; }
.rp-stepper { display: flex; align-items: center; gap: 40px; margin-right: 34px; }
.rp-stepper button { width: 12px; height: 12px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-stepper button img { display: block; width: 100%; height: 100%; }
.rp-stepper-value { min-width: 12px; text-align: center; font-size: 18px; font-weight: 600; color: #000; }

.rp-reveal { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(-8px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.rp-reveal.is-visible { opacity: 1; max-height: 2000px; overflow: visible; transform: translateY(0); pointer-events: auto; }

.rp-calendar { padding: 0 6px; }
.rp-cal-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 15px; }
.rp-cal-nav button { width: 16px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-cal-nav button svg { display: block; }
.rp-cal-title { font-size: 12px; font-weight: 500; letter-spacing: 2.16px; color: #0c0c0c; text-align: center; min-width: 94px; }
.rp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; text-align: center; }
.rp-cal-weekday { font-size: 12px; font-weight: 500; color: #000; padding: 6px 0; }
.rp-cal-cell { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; height: 33px; font-size: 12px; font-weight: 500; color: #0c0c0c; background: transparent; border: 0; cursor: pointer; }
.rp-cal-cell.is-blank { visibility: hidden; cursor: default; }
.rp-cal-cell.is-past { color: #ccc; cursor: not-allowed; }
.rp-cal-cell.is-disabled { color: #ccc; cursor: not-allowed; }
.rp-cal-cell.is-selected { color: #fff; }
.rp-cal-cell.is-selected::before { content: ''; position: absolute; inset: 0; margin: auto; width: 35px; height: 35px; background: #000; border-radius: 100%; z-index: -1; }

.rp-timeslots { padding-top: 39px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rp-timeslot { height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #e0e0e0; background: #fff; color: #0c0c0c; font-size: 12px; font-weight: 500; cursor: pointer; padding: 0 24px; }
/* 이미 예약된 시간대(is-disabled)와 지나간 시간대(is-past)는 동일 스타일 — 예약됨 기준. */
.rp-timeslot.is-disabled,
.rp-timeslot.is-past { color: #ccc; text-decoration: line-through; cursor: not-allowed; }
.rp-timeslot.is-selected { background: #000; border-color: #000; color: #fff; }

.rp-footer { border-top: 0; padding-top: 19px; margin-top: 0; }
.rp-namephone { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 40px; position: relative; padding-right: 90px; min-height: 20px; }
.rp-field { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: #0c0c0c; white-space: nowrap; margin-bottom: 2px; }
.rp-field-label { font-weight: 500; letter-spacing: 0.9px; color: #0c0c0c; }
/* 표시·편집 모두 input 하나가 담당(readonly↔편집 전환) → 항상 같은 요소라 편집 토글 시 높이 변화 없음. 밑줄은 기본 투명, 편집 시 검정으로만 색 전환. */
.rp-field-input { display: inline-block; font-size: 15px; font-weight: 600; color: #0c0c0c; border: 0; border-bottom: 1px solid transparent; padding: 0 0 2px; font-family: inherit; field-sizing: content; }
.rp-field-input[readonly] { cursor: default; }
/* 편집 중에만 입력 공간 확보(min-width). readonly(표시)일 땐 field-sizing:content가 내용 길이에 맞춰 자동 축소. */
.rp-namephone.is-editing .rp-field-input { border-bottom-color: #000; min-width: 100px; }
.rp-edit-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 80px; height: 30px; border: 1px solid #e0e0e0; background: #fff; color: #0c0c0c; font-size: 15px; cursor: pointer; }

.rp-agree { display: flex; align-items: flex-start; gap: 10px; padding: 15px 0 0; }
.rp-agree input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1px solid #000; background: #fff; cursor: pointer; position: relative; }
.rp-agree input[type="checkbox"]:checked { background: #000; }
.rp-agree input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rp-agree-text { font-size: 15px; font-weight: 500; color: #0c0c0c; }
.rp-agree-text a { color: #0c0c0c; text-decoration: underline; }

.rp-guide { padding-top: 10px; }
.rp-guide-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.3px; color: #0c0c0c; }
.rp-guide-toggle svg { transition: transform 0.3s ease; }
.rp-guide-toggle.is-open svg { transform: rotate(180deg); }
.rp-guide-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.rp-guide-body.is-open { max-height: 800px; }
.rp-guide-body .guide_txt { padding-top: 15px; font-size: 12px; line-height: 1.5; color: #0c0c0c; }
.rp-guide-body .guide_txt .title { padding: 20px 0 6px; font-size: 12px; font-weight: 500; }
.rp-guide-body .guide_txt .content-asset:first-child .title { padding-top: 0; }
.rp-guide-body .guide_txt ul { margin: 0; padding: 0; list-style: none; }
.rp-guide-body .guide_txt li { margin: 0; }
.rp-guide-body .guide_txt li + li { margin-top: 0; }

.rp-submit-wrap { margin-top: 20px; }
.rp-submit { display: block; width: 100%; height: 36px; border: 0; background: #000; color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; }
.rp-submit:disabled { background: #ccc; cursor: not-allowed; }

/* 소형 다이얼로그 공통(P2 완료·P4 닫기확인·P5/P6 인원초과·P3 취소). */
.rp-dialog .modal-dialog { max-width: 470px; width: 100%; }
.rp-dialog .modal-content { border: 1px solid #000; border-radius: 0; padding: 30px; position: relative; }
/* center(취소·닫기확인)·overcap(인원초과) 다이얼로그는 콘텐츠 상단 65px·하단 25px(Figma) — 완료(P2)는 타이틀 상단정렬이라 기본 30 유지. */
.rp-dialog-center .modal-content,
.rp-dialog-overcap .modal-content { padding: 65px 30px 25px; }
.rp-dialog-title { margin: 0 0 16px; font-size: 14px; font-weight: 500; color: #000; text-align: left; line-height: 1.2; }
.rp-dialog-center .rp-dialog-title { text-align: center; }
.rp-dialog-body { font-size: 12px; line-height: 1.2; color: #000; }
.rp-dialog-body p { margin: 0 0 5px; line-height: 1.2; }
.rp-dialog-overcap .rp-dialog-body p + p { margin-top: 10px; }
.rp-dialog-overcap .rp-dialog-body p:last-child { margin-top: 20px; }
/* P2 완료: 값(매장/날짜/시간/인원) 줄 간격 Figma대로 촘촘히(pitch 16), 완료 메시지만 위 여백. */
.rp-dialog-complete .rp-dialog-body p:last-child { margin-top: 16px; }
.rp-dialog-complete .rp-dialog-btns { margin-top: 20px; }
.rp-dialog-complete .rp-dialog-title { margin-bottom: 20px; }
.rp-dialog-list { list-style: none; font-size: 12px; width: 100%; line-height: 1.2; }
.rp-dialog-list li { display: flex; justify-content: space-between; padding: 5px 0; color: #000; }
.rp-dialog-list li:first-child { padding-top: 0; }
.rp-dialog-list li:last-child { padding-bottom: 0; }
.rp-dialog-btns { display: flex; gap: 10px; margin-top: 40px; }
.rp-dialog-btns button, .rp-dialog-btns a { flex: 1; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: none; border: 1px solid #000; background: #fff; color: #000; }
.rp-dialog-btns .rp-btn-primary { background: #000; color: #fff; }

/* ---- 모바일(≤1024) ---- */
@media only screen and (max-width: 1024px) {
  /* 모바일 P1: 헤더 고정 전체화면 모달. 오버레이 overflow:hidden(오버레이 스크롤바가 폭을 먹어 생기던 갭 제거), modal-content 100dvh flex·헤더(.rp-stickyhead) 고정·본문(#reservationFormNew)만 내부 스크롤 */
  .rp-modal.show { align-items: stretch; justify-content: flex-start; padding: 0; overflow: hidden; }
  .rp-modal .modal-dialog { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .rp-modal .modal-content { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; max-height: none; border: 0; padding: 0; overflow: hidden; }
  .rp-stickyhead { flex: 0 0 auto; position: static; padding: 3rem 3rem 0; }
  .rp-modal #reservationFormNew { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: auto; padding: 0 3rem 2.5rem; }
  .rp-dialog .modal-dialog { max-width: calc(100% - 2rem); margin: 0; }
  .rp-dialog .modal-content { padding: 6.5rem 3rem 2.5rem; }
  /* center·overcap 다이얼로그: 모바일 콘텐츠 시작 5.6rem(=56px)·하단 2.5rem (Figma 846:2165 등). */
  .rp-dialog-center .modal-content,
  .rp-dialog-overcap .modal-content { padding: 6.5rem 3rem 2.5rem; }
  .rp-dialog-cancel .modal-content { padding-top: 5.5rem; }
  .rp-dialog-cancel .rp-dialog-title { margin-bottom: 2.5rem; }
  .rp-dialog-complete .rp-close { display: none; }
  .rp-dialog-complete .modal-content { padding-top: 2.5rem; }

  .rp-close { top: 3rem; right: 2.9rem; width: 1.5rem; height: 1.5rem; }
  .rp-header { padding-right: 3rem; margin-bottom: 0.8rem; }
  .rp-title { font-size: 1.3rem; letter-spacing: 0.234rem; }

  .rp-summary { display: flex; justify-content: space-between; gap: 0.8rem 1rem; padding: 1rem 0 0.8rem; }
  .rp-summary-label { font-size: 1.3rem; }
  .rp-summary-value { font-size: 1.5rem; }

  .rp-people-row { padding: 2rem 0; }
  .rp-people-label { font-size: 1.3rem; }
  .rp-stepper { gap: 1.8rem; margin-right: 0; }
  .rp-stepper-value { font-size: 1.5rem; }

  .rp-cal-title { font-size: 1rem; letter-spacing: 0.18rem; }
  .rp-cal-grid { gap: 1.5rem; }
  .rp-cal-weekday { font-size: 1.2rem; }
  .rp-cal-cell { height: 3.3rem; font-size: 1.2rem; }
  .rp-cal-cell.is-selected::before { width: 3.5rem; height: 3.5rem; left: -0.2rem; }

  .rp-timeslots { grid-template-columns: repeat(4, 1fr); gap: 0.9rem 0.8rem; padding-top: 1.5rem; }
  .rp-timeslot { height: 3.6rem; font-size: 1.2rem; padding: 0 1rem; }

  .rp-namephone { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 0.8rem; align-items: baseline; padding-right: 8rem; }
  .rp-field { display: contents; font-size: 1.3rem; }
  .rp-field-input { font-size: 1.3rem; }
  .rp-edit-btn { width: 6rem; height: 2.5rem; font-size: 1.2rem; top: 50%; transform: translateY(-50%); }

  .rp-agree { padding-top: 1.5rem; gap: 2rem; }
  .rp-agree-text { font-size: 1.3rem; }

  .rp-guide { padding-top: 1.5rem; }
  .rp-guide-toggle { font-size: 1.3rem; }

  .rp-submit-wrap { margin-top: 0; padding-top: 2rem; }
  .rp-submit { height: 3.6rem; font-size: 1.2rem; }

  .rp-dialog-title { font-size: 1.3rem; margin-bottom: 1.5rem; }
  .rp-dialog-body, .rp-dialog-list { font-size: 1.2rem; }
  .rp-dialog-btns { flex-direction: column; }
  .rp-dialog-btns button, .rp-dialog-btns a { flex: none; height: 3.6rem; font-size: 1.2rem; }
}

/* [NEW-space-detail] SPACE 개별 매장 상세 (가이드 0716 p26~39). 헤더·갤러리 풀폭 · 본문(sd-body)만 12그리드 좌3·우3 제외 가운데 6컬럼 */
.content-asset-space-detail { padding: var(--header-height) 25px 0; }

.space-detail {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 10px;
  box-sizing: border-box;
  color: #111;
}

/* 본문(정보·예약·안내) 컨테이너: 가운데 6컬럼 / 헤더·갤러리는 풀폭 */
.sd-body { grid-column: 4 / span 6; }

/* 헤더 유닛 (p27): 상80 · eyebrow12 · →제목10 · 제목24 · →설명40 · 설명16 · 하120 */
.sd-header { grid-column: 1 / -1; padding-top: 80px; padding-bottom: 120px; text-align: center; }
.sd-eyebrow { font-size: 12px; letter-spacing: 0.05em; color: #000; opacity: 0.4; }
.sd-title { margin: 10px 0 0; font-size: 24px; font-weight: 400; line-height: 1.3; }
.sd-desc { margin: 40px 0 0; font-size: 16px; line-height: 1.6; }

/* 이미지 캐러셀 (p28~29): Swiper 페이드(4초 디졸브) · aspect 2/1 · cover · 하단 그라디언트 h200 · dot indicator (spaceDetail.js) */
.sd-gallery { grid-column: 1 / -1; width: auto; margin-left: -25px; margin-right: -25px; } /* 풀블리드: 컨테이너 좌우 25px 패딩 상쇄(width auto라야 음수마진이 양쪽 대칭 확장) */
.sd-swiper { position: relative; width: 100%; }
.sd-swiper .swiper-slide { width: 100%; }
.sd-swiper .swiper-slide img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
/* 하단 그라디언트(p29): w100·h200 — indicator 가독용 */
.sd-gallery-grad { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%); }
/* dot indicator(p29): 하단 30 위 · gap20 · 비선택 op40 */
.sd-swiper .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; display: flex; justify-content: center; gap: 20px; line-height: 0; }
.sd-swiper .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0; border-radius: 50%; background: #fff; opacity: 0.4; }
.sd-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* 매장 정보 테이블 (p30): 2열 · 좌 라벨 max200/min120 · 유닛간60 · 12px · 라벨↔값 gap30 · 상하패딩20 */
.sd-info { margin: 0; padding-top: 60px; display: flex; flex-direction: column; gap: 30px; }
.sd-info-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 30px; }
.sd-info-label { font-size: 12px; letter-spacing: 0.05em; }
.sd-info-value { margin: 0; font-size: 12px; display: flex; flex-direction: column; gap: 10px; }
.sd-info-text { line-height: 1.6; }
/* 메뉴 (p30/36): 2열 이름/가격 · 우측 열 90px · 행 간격 10px */
.sd-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sd-menu-item { display: flex; justify-content: space-between; align-items: baseline; }
.sd-menu-name { flex: 1; }
.sd-menu-price { width: 90px; flex-shrink: 0; text-align: right; }
.sd-map-link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(0, 0, 0, 0.6); text-decoration: none; }
.sd-map-link:hover { color: #000; }
/* 지도 미리보기 (p30): 값 dd 내부 · 지도보기 아래 · Google Maps iframe(클릭 시 구글맵 이동) */
.sd-map-preview { width: 100%; }
.sd-map-preview iframe { width: 100%; height: 100%; min-height: 200px; border: 0; display: block; }
.sd-arrow { display: inline-block; width: 6.11px; height: 11px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; } /* 화살표 SVG를 mask 배경 처리(currentColor 유지) */

/* 방문예약 버튼 (p31): w400 · padding10 · 검정 */
.sd-reserve-wrap { padding-top: 60px; display: flex; justify-content: center; }
.sd-reserve { width: 400px; max-width: 100%; padding: 10px; border: 0; background: #000; color: #fff; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; }
.sd-reserve:hover { opacity: 0.85; }

/* 안내 3블록 (p31): 2열 라벨+bullet · 유닛간60 · bullet 항목간20 · 상하패딩20 */
.sd-notes { padding-top: 60px; display: flex; flex-direction: column; gap: 30px; }
.sd-note-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 20px; }
.sd-note-label { font-size: 12px; letter-spacing: 0.05em; }
.sd-note-list { margin: 0; padding: 0 0 0 24px; font-size: 12px; line-height: 1.6; list-style: disc; display: flex; flex-direction: column; gap: 5px; }
.sd-note-list li { position: relative; }
.sd-note-list li::before { content: ""; position: absolute; left: -24px; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* BACK TO TOP (p32): 상하100 · 화살표↔텍스트16 · 12px */
.sd-backtotop { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 100px 0; font-size: 12px; letter-spacing: 0.05em; color: #000; text-decoration: none; }
.sd-backtotop-arrow svg { height: 7px; width: auto; }

/* 모바일 (≤1024) — 헤더→이미지 순서(3/4) · 정보/안내 세로 스택 (가이드 p33~39) */
@media (max-width: 1024px) {
  .content-asset-space-detail { padding: var(--header-height) 0 0; }
  .space-detail { display: flex; flex-direction: column; padding: 0 3rem; } /* 데스크탑 grid → 모바일 flex 복귀 */
  .sd-gallery { margin: 0 -3rem; }
  .sd-swiper .swiper-slide img { aspect-ratio: 3 / 4; }

  .sd-header { padding-top: 4rem; padding-bottom: 6rem; text-align: left; } /* 헤더↔이미지 60 (가이드 p33) */
  .sd-title { margin-top: 1rem; font-size: 1.8rem; }
  .sd-desc { margin-top: 3rem; font-size: 1.4rem; }

  .sd-info { padding-top: 6rem; gap: 4rem; }
  .sd-info-row { grid-template-columns: 1fr; gap: 2rem; }
  .sd-info-label { font-size: 1.6rem; padding: 0; }
  .sd-info-value { padding: 0; }
  .sd-menu { gap: 1rem; }
  .sd-menu-price { width: 9rem; }

  .sd-reserve-wrap { padding-top: 6rem; }
  .sd-reserve { width: 100%; }

  .sd-notes { padding-top: 6rem; gap: 4rem; }
  .sd-note-row { grid-template-columns: 1fr; gap: 2rem; }
  .sd-note-label { font-size: 1.6rem; padding: 0; }
  .sd-note-list { padding: 0 0 0 2.4rem; gap: 1.5rem; opacity: 0.6; }

  .sd-backtotop { padding: 6rem 0; }
}

/* [NEW-product-candles-tea-wear-story] PRODUCT·CANDLE STORY / TEAWARE STORY 컨테이너 — parfums story(.content-asset-parfums-story)와 동일한 컨테이너·서브메뉴 레이아웃. (candle 본문은 아래 [NEW-product-candles-story] .cd- / .cdm- 블록 참조) */
.content-asset-candle-story,
.content-asset-teaware-story { padding-left: 0; padding-right: 0; }

/* 컨테이너 좌우 패딩 해제분을 서브메뉴가 자체 25px로 보정(= .content-asset-parfums-story .sub_menu_wrap 동일) */
.content-asset-candle-story .sub_menu_wrap,
.content-asset-teaware-story .sub_menu_wrap { padding: 0 25px; }

/* 공통 .story-wrap{margin-top:50px} 해제 — 서브메뉴 바로 아래에서 본문 시작(parfums/tea story 동일) */
.content-asset-candle-story .story-wrap,
.content-asset-teaware-story .story-wrap { margin-top: 0; }

@media (max-width: 1024px) {
  /* 좌측 16px — parfums/tea story 서브메뉴 모바일 규칙과 동일. 우측 0으로 3depth 가로 스크롤이 화면 끝까지 닿게. */
  /* ※ parfums/tea/candle은 모바일에서 이 서브메뉴를 display:none 처리(모바일 스토리 마크업이 자체 서브메뉴 보유 — candle은 .cdm- 블록에서 해제). teaware는 아직 모바일 스토리 마크업이 없어 그대로 노출한다. */
  .content-asset-candle-story .sub_menu_wrap,
  .content-asset-teaware-story .sub_menu_wrap {
    padding-left: 1.6rem;
    padding-right: 0;
  }
}

/* [NEW-product-candles-story] PRODUCT·CANDLE STORY 풀페이지(PC .cd-* / 모바일 .cdm-*) — product-parfums-story의 .pf- / .pfm- 블록을 그대로 복제해 프리픽스만 cd-/cdm-로 치환(구조·값 동일). */
/* [NEW-product-candles-story] PRODUCT·PARFUMS STORY 풀페이지(PC .cd-*) — space/teathology 패턴(커버/프로즈/분할/블러리빌/영상박스·슬라이더/이미지슬라이더/CTA). */
html.cd-fp { scrollbar-width: none; -ms-overflow-style: none; }
html.cd-fp::-webkit-scrollbar { display: none; }

.content-asset-candle-story { padding-left: 0; padding-right: 0; }
.content-asset-candle-story .candle_story { padding-left: 25px; padding-right: 25px; }
.content-asset-candle-story .story-wrap { margin-top: 0; }

.cd-story { position: relative; }
.cd-stage { position: relative; height: 100svh; overflow: hidden; background: #fff; }
/* 검정 배경이 이어지는 구간(idx5→idx6) 전환 동안만 스테이지를 검정으로 — 크로스페이드 사이로 흰 스테이지가 드러나 검정이 바래는 것 차단(JS paintStageBk) */
.cd-stage.cd-stage--bk { background: #000; }

/* 섹션 공통(스택+전환) — 헤더(+배너) 아래에서 시작, 높이는 뷰포트-오프셋(--cd-grid-top). */
.cd-sec {
  position: absolute; left: 0; width: 100%;
  top: var(--cd-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px)));
  height: calc(100svh - var(--cd-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))));
  opacity: 0; transform: translateY(100%);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity; overflow: hidden; pointer-events: none;
}
.cd-sec.is-next { transform: translateY(100%); opacity: 0; }
.cd-sec.is-prev { transform: translateY(-100%); opacity: 0; }
.cd-sec.is-active { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* 인트로 서브메뉴(다크 커버 위 흰색) */
.cd-sec .cd-intro-subnav { position: absolute; top: 0; left: 0; right: 0; z-index: 6; } /* 섹션이 이미 헤더 아래(--cd-grid-top)에서 시작 */
.cd-intro-subnav .sub_menu_wraps > li a, .cd-intro-subnav .sub_menu_3depth > li a { color: rgba(255, 255, 255, 0.5); }
.cd-intro-subnav .sub_menu_wraps > li + li::before { background: rgba(255, 255, 255, 0.5); }
.cd-intro-subnav .sub_menu_wraps > li.active a, .cd-intro-subnav .sub_menu_3depth > li.active a { color: #fff; }

/* 미디어 배경(이미지/영상) */
.cd-sec[data-cd-media] { background: #000; }
.cd-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd-media-bg img, video.cd-media-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* sec1 그리드 커버 — 보틀 스틸 8장(2행 4열). minmax(0,1fr)로 셀 강제 균등(1fr=minmax(auto,1fr)이라 이미지 내용 높이로 행이 커져 상·하 불일치하던 것 방지). */
.cd-media-bg--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.cd-media-scrim { position: absolute; inset: 0; background: #000; opacity: 0.35; }

/* 커버 미디어 프레임(sec4·sec2 index3) 뷰포트 인셋 — 좌우 150/상하 70px(1920) ~ 최소 25px(1025). 모바일 제외, 여백은 흰 배경 */
/* 섹션이 이미 헤더 아래에서 시작 → 프레임 상단여백은 frame-y 만 */
.cd-cover--media.cd-media,
.cd-cover--light.cd-media {
  --cd-frame-x: clamp(25px, calc(13.966vw - 118.15px), 150px);
  --cd-frame-y: clamp(25px, calc(5.028vw - 26.54px), 70px);
  --cd-frame-top: var(--cd-frame-y);
  padding: var(--cd-frame-top) var(--cd-frame-x) var(--cd-frame-y);
  background: #fff;
}
/* 배경 미디어/스크림(절대배치)을 프레임 안으로 인셋 — padding은 절대요소를 밀지 못하므로 inset로 맞춤 */
.cd-cover--media.cd-media .cd-media-bg,
.cd-cover--media.cd-media .cd-media-scrim,
.cd-cover--light.cd-media .cd-media-bg,
.cd-cover--light.cd-media .cd-media-scrim {
  inset: var(--cd-frame-top) var(--cd-frame-x) var(--cd-frame-y) var(--cd-frame-x);
  width: auto; height: auto;
}
/* index3(light) — 이미지 원비율(width 100%·height auto)로 프레임 안 세로 중앙 배치 */
.cd-cover--light.cd-media .cd-media-bg { display: flex; align-items: center; justify-content: center; }
.cd-cover--light.cd-media .cd-media-bg img { width: 100%; height: auto; object-fit: initial; }
/* sec1 그리드 reveal 커버(index 1)는 풀블리드 — 프레임 상하좌우 여백 제거(8 챕터 커버는 프레임 유지). */
.cd-cover--media.cd-media.cd-media--reveal { padding: 0; }
.cd-cover--media.cd-media.cd-media--reveal .cd-media-bg,
.cd-cover--media.cd-media.cd-media--reveal .cd-media-scrim { inset: 0; width: 100%; height: 100%; }
/* sec3 챕터 커버(index 6) — scrim만 블러 프레임 이미지(story-blur-bk.png)로 대체해 섹션 전체 풀블리드. video는 기존 프레임 박스 크기(calc) 그대로 유지. */
.cd-cover--imgframe.cd-media { padding: 0; background: #000; }
.cd-cover--imgframe.cd-media .cd-media-bg {
  inset: var(--cd-frame-top) var(--cd-frame-x) var(--cd-frame-y) var(--cd-frame-x);
  right: auto; bottom: auto;
  width: calc(100% - (var(--cd-frame-x) * 2));
  height: calc(100% - var(--cd-frame-top) - var(--cd-frame-y));
}
.cd-cover--imgframe.cd-media .cd-media-scrim {
  inset: 0; width: 100%; height: 100%;
  background: url("../images/story-blur-bk.png") center / 120% 120% no-repeat;
  opacity: 1;
}

/* 커버(중앙) */
.cd-cover { display: flex; align-items: center; justify-content: center; text-align: center; }
.cd-cover--media { color: #fff; }
.cd-cover--media .cd-eyebrow, .cd-cover--media .cd-cover-title, .cd-cover--media .cd-cover-chips, .cd-cover--media .cd-chip { color: #fff; }
/* 밝은 배경 커버(스크림 없음) — 텍스트 검정. */
.cd-cover--light { color: #000; }
.cd-cover--light .cd-eyebrow, .cd-cover--light .cd-cover-title, .cd-cover--light .cd-cover-chips, .cd-cover--light .cd-chip { color: #000; }
.cd-cover-inner { position: relative; z-index: 2; padding: 0 25px; }
.cd-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0.6; }
.cd-cover-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.5; }
.cd-cover-chips { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 20px 0 0; font-size: 12px; font-weight: 500; line-height: 1.333; letter-spacing: 0.005em; }
.cd-chip { display: inline-block; color: inherit; text-decoration: none; white-space: nowrap; opacity: 0.6; cursor: pointer; transition: opacity 0.3s ease; }
.cd-chip:hover { opacity: 1; color: inherit; text-decoration: none; }

/* sec1 그리드 커버 리빌 — step0 흰 오버레이 20%+텍스트 / step1 오버레이 해제·텍스트 소멸. */
.cd-media--reveal .cd-reveal-step { transition: opacity 600ms ease; }
.cd-media--reveal[data-step="1"] .cd-reveal-step[data-cd-step="0"] { opacity: 0; pointer-events: none; }
.cd-media--reveal .cd-media-scrim { background: #fff; opacity: 0.2; transition: opacity 600ms ease; }
.cd-media--reveal[data-step="1"] .cd-media-scrim { opacity: 0; }
/* step0 그리드 이미지도 opacity 20% → step1 원래대로(100%). */
.cd-media--reveal .cd-media-bg--grid { opacity: 0.2; transition: opacity 600ms ease; }
.cd-media--reveal[data-step="1"] .cd-media-bg--grid { opacity: 1; }
/* step0 배경이 밝으므로 리빌 텍스트(eyebrow·타이틀·칩)는 검정색. */
.cd-media--reveal .cd-reveal-step,
.cd-media--reveal .cd-reveal-step .cd-eyebrow,
.cd-media--reveal .cd-reveal-step .cd-cover-title,
.cd-media--reveal .cd-reveal-step .cd-cover-chips,
.cd-media--reveal .cd-reveal-step .cd-chip { color: #000; }

/* 텍스트 섹션(프로즈) — max-width 800(space/teathology 공통). */
.cd-text { display: flex; align-items: center; justify-content: center; background: #fff; color: #000; }
/* index=2 순수 텍스트 섹션 — 헤더 포함 전체 뷰포트 세로 중앙 정렬. padding-bottom=--cd-grid-top으로 시각 중심을 위로 옮겨 50svh 안착 */
.cd-sec.cd-text[data-cd-index="2"] { padding-bottom: var(--cd-grid-top, calc(var(--header-height, 72px) + var(--banner-height, 30px))); }
/* 부모 .cd-text가 display:flex라 width 없으면 콘텐츠 실폭으로 축소돼 850(=텍스트 800) 폭이 보장되지 않음 / 순수 텍스트 800px 보장(padding 25px×2는 별도) */
.cd-prose { width: 100%; max-width: 850px; margin: 0 auto; padding: 0 25px; text-align: left; }
.cd-prose-title { margin: 0 0 40px; font-size: 24px; font-weight: 500; line-height: 1.5; }
.cd-prose-body { display: flex; flex-direction: column; gap: 20px; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0.005em; color: inherit; word-break: keep-all; text-align: left; }
.cd-prose-body p { margin: 0; }
:lang(ja) .cd-prose-body { word-break: normal; }

/* 분할(좌 이미지 / 우 텍스트) */
.cd-split { display: flex; align-items: center; background: #fff; color: #000; }
.cd-split-img { flex: 0 0 50%; max-width: 50%; height: 100%; }
.cd-split-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-split-text { flex: 0 0 50%; max-width: 50%; padding: 0 150px 0 70px; }

/* sec2 영상 박스 — 풀블리드 아님, max-width 800 중앙 */
/* .cd-sec[data-cd-media]{background:#000}(커버용)를 이기도록 특이도 상향 — 영상박스는 흰 배경. */
.cd-sec.cd-videobox { display: flex; align-items: center; justify-content: center; background: #fff; }
/* 콘텐츠(영상·텍스트) 폭 800px + 좌우 25px 패딩(border-box) → max-width 850. */
.cd-videobox-inner { width: 100%; max-width: 850px; padding: 0 25px; }
/* sec2 타임코드 영상: 파일에 구워진 상·하 검정 레터박스(각 1/6) 크롭 — 흰 밴드(8:3)만 노출, 타임코드 크기·좌우 유지. 영상 무띠 버전 확보 시 원복. */
.cd-video-bg { width: 100%; aspect-ratio: 9 / 3; height: auto; object-fit: cover; object-position: center; display: block; background: #000; }
/* sec2 영상 하단 텍스트 — 영상 폭에 맞춰 좌측 정렬·검정. */
.cd-videobox-text { margin-top: 100px; margin-bottom: 150px; color: #000; }
.cd-videobox-text.cd-prose { max-width: none; padding: 0}

/* sec3 영상 슬라이더(Swiper) — 검정 배경, centeredSlides+loop(활성 중앙+좌우 peek). 활성 영상만 재생(candleStory.js). 하단 텍스트는 내부 세로 스크롤. */
.cd-filmslider { display: flex; flex-direction: column; justify-content: flex-start; background: #000; color: #fff; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-top: 100px; }
.cd-filmslider::-webkit-scrollbar { display: none; }
.cd-film-swiper { width: 100%; padding: 0 25px; flex-shrink: 0; margin-bottom: 105px; }
/* swiper.css의 .swiper-slide/.swiper-wrapper{height:100%}가 슬라이드를 컨테이너 높이에 묶어 600px 영상이 .swiper overflow:hidden에 잘리던 것 → 콘텐츠 높이(auto)로 해제, 래퍼는 stretch 방지(flex-start). */
.cd-film-swiper .swiper-wrapper { height: auto; align-items: flex-start; }
.cd-film-swiper .swiper-slide { width: 900px; box-sizing: border-box; height: auto; opacity: 0.4; transition: opacity 0.4s ease; }
.cd-film-swiper .swiper-slide-active { opacity: 1; }
.cd-film { display: flex; flex-direction: column; align-items: center; }
.cd-film-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
/* 타임코드=영상 위(중앙), 제품명=영상 아래(중앙) — 활성 슬라이드만 노출. */
.cd-film-time { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; text-align: center; margin: 0 0 40px; }
.cd-film-caption { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; text-align: center; margin: 40px 0 0; }
.cd-film-swiper .swiper-slide .cd-film-time,
.cd-film-swiper .swiper-slide .cd-film-caption { opacity: 0; transition: opacity 0.4s ease; }
.cd-film-swiper .swiper-slide-active .cd-film-time,
.cd-film-swiper .swiper-slide-active .cd-film-caption { opacity: 1; }
.cd-filmslider-text { margin: 100px auto 200px; color: #fff; flex-shrink: 0; }

/* sec4 클로징 — 텍스트+이미지 슬라이더(비활성 opacity .5)+오프라인 초대+CTA 2버튼. */
.cd-closing { display: flex; flex-direction: column; justify-content: flex-start; background: #fff; color: #000; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-top: 0; }
.cd-closing::-webkit-scrollbar { display: none; }
.cd-closing-text { padding-top: 100px; padding-bottom: 100px; }
/* sec4 이미지 슬라이더 — Swiper(centeredSlides+loop, slidesPerView:'auto', spaceBetween:0). 슬라이드 800×600, 비활성 0.5/활성 1. swiper.css의 height:100% 해제(콘텐츠 높이). */
.cd-imgslider { margin: 180px 0 0; flex-shrink: 0; }
.cd-imgslider .swiper-wrapper { height: auto; align-items: flex-start; }
.cd-imgslider .swiper-slide { width: 800px; box-sizing: border-box; height: auto; opacity: 0.5; transition: opacity 0.4s ease; }
.cd-imgslider .swiper-slide-active { opacity: 1; }
.cd-imgslider .swiper-slide img { width: 100%; height: 600px; object-fit: cover; display: block; }
/* sec4 스토어 슬라이더 — 좌우 화살표 + 1/N 넘버 + 활성 매장정보(모바일 cdm-store 패턴 이식, 흰 배경·검정). */
/* 매장정보(좌) + 화살표·넘버(우)를 한 줄에, 상단 정렬, 850px 중앙 축. */
.cd-imgslider-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; max-width: 850px; margin: 0 auto; padding: 40px 25px 0; }
.cd-imgslider-nav { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.cd-imgslider-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.cd-imgslider-arrow[data-cd-store-next] svg { transform: scaleX(-1); } /* 제공 SVG는 좌(‹) 방향 → 다음 버튼은 반전(›) */
.cd-imgslider-count { display: flex; gap: 10px; font-size: 11px; font-weight: 400; line-height: 13px; letter-spacing: 0.015em; color: #000; }
.cd-imgslider-info { color: #000; }
.cd-imgslider-name { margin: 0 0 30px; font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: 0.005em; }
.cd-imgslider-dl { display: inline-block; margin: 0; font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 0.005em; text-align: left; }
.cd-imgslider-dl > div { display: flex; gap: 24px; }
.cd-imgslider-dl dt { flex: 0 0 60px; margin: 0; color: rgba(0, 0, 0, 0.5); }
.cd-imgslider-dl dd { margin: 0; }
/* 마무리 초대 문구 밴드 — sec3(.cd-filmslider) 끝에 붙여 흰 배경으로 분리(검정 섹션 위 검정 텍스트가 안 보이던 것 해소) */
.cd-closing-band { width: 100%; background: #fff; color: #000; flex-shrink: 0; }
.cd-closing-cta { width: 100%;  max-width: 850px; margin: 0 auto; text-align: center; padding: 150px 25px; }
.cd-closing-desc { margin: 0 0 0; font-size: 16px; line-height: 1.6; color: #000; text-align: left;}
.cd-cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 150px 0}

/* 블록 순차 등장 */
/* fade in/out 양방향 — 기본값에도 동일 transition을 둬 보이는 범위를 벗어나면 다시 흐려짐(사라질 때는 지연 없음) */
.cd-rvl { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cd-sec.is-active:not([data-cd-scroll]) .cd-rvl,
.cd-sec[data-cd-scroll] .cd-rvl.is-inview,
.cd-story-mo.cdm-fade .cd-rvl.is-inview {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--rvl-i, 0) * 0.09s);
  will-change: opacity, transform;
}
/* 데스크탑 리빌: 섹션 도착/스크롤 진입 후 딜레이 뒤 fade+slide-up (is-active 패널 + [data-cd-scroll] 인뷰, 모바일 제외) */
.cd-sec.is-active:not([data-cd-scroll]) .cd-rvl,
.cd-sec[data-cd-scroll] .cd-rvl.is-inview { transition-delay: calc(0.5s + var(--rvl-i, 0) * 0.12s); }
/* 모바일 하이브리드는 청크 순서대로 개별 노출 → 순번 딜레이 대신 평평한 0.06s (tea story 동일). */
.cd-story-mo.cdm-fade .cd-rvl.is-inview { transition-delay: 0.06s; }
/* 본문 챕터 텍스트(.cdm-mediatext-sec .cdm-hero-text = sec3) 순차 리빌 — 인트로와 같은 0.12s 순번 간격(스크롤 진입 base 0.06s 유지) */
.cd-story-mo.cdm-fade .cdm-mediatext-sec .cdm-hero-text .cd-rvl.is-inview { transition-delay: calc(0.06s + var(--rvl-i, 0) * 0.12s); }
/* eyebrow는 reveal 후에도 60% 유지(reveal의 opacity:1이 .cd-eyebrow{0.6}을 덮으므로 되돌림). */
.cd-story-mo.cdm-fade .cd-eyebrow.cd-rvl.is-inview { opacity: 0.6; }
/* 이미지 커버 배경은 위치 이동 없이 opacity만 페이드 — mo/4(.cdm-cover--light 배경) 대상. 영상 커버(--grad)·인트로(.cdm-hero)는 제외 */
.cdm-cover--light .cdm-bg.cd-rvl {
  transform: none;
}
/* 모바일 top-of-chunk 리빌 조기 소진 방지(gate) + 챕터 커버 텍스트·칩 리빌 — 청크 비활성 시 숨김 유지, 활성 시 패널 정착(0.65s) 뒤 슬라이드업 */
.cd-story-mo.cdm-fade .cdm-chunk:not(.is-active) .cd-rvl.is-inview { opacity: 0; transform: translateY(2rem); transition: none; }
.cd-story-mo.cdm-fade .cdm-chunk.is-active .cdm-cover-text .cd-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.65s + var(--rvl-i, 0) * 0.12s); }
.cd-story-mo.cdm-fade .cdm-chunk.is-active .cdm-cover-text .cd-eyebrow.cd-rvl { opacity: 0.6; }
/* chnav 화살표(›, ::after)는 슬라이드업 불가 → opacity 0→1 fade로 커버 텍스트 리빌 뒤(0.9s) 등장 */
.cd-story-mo.cdm-fade .cdm-chunk:not(.is-active) .cdm-cover-text:has(.cdm-cover-chips.is-scrollable)::after { opacity: 0; }
.cd-story-mo.cdm-fade .cdm-chunk.is-active .cdm-cover-text:has(.cdm-cover-chips.is-scrollable)::after { opacity: 1; transition: opacity 0.7s ease; transition-delay: 0.9s; }

/* 인트로(index0) 슬라이드업 — JS(fireIntroReveal)가 배경 준비 후 .intro-in 부여 시 아래→위 슬라이드업(순번 스태거), 준비 전엔 숨김 대기 */
.cd-sec[data-cd-index="0"].is-active:not(.intro-in) .cd-rvl { opacity: 0; transform: translateY(2rem); transition: none; }
.cd-sec[data-cd-index="0"].intro-in .cd-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
/* 모바일 인트로(.cdm-hero) eyebrow/title/chips 슬라이드업 — 데스크탑 인트로와 동일. 순번 스태거, eyebrow는 0.6 유지 */
.cdm-hero.intro-in .cd-rvl { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--rvl-i, 0) * 0.12s); }
.cdm-hero.intro-in .cd-eyebrow.cd-rvl { opacity: 0.6; }
/* 첫 진입 깜박임(FOUC) 방지 — 리빌 마킹 여부와 무관하게 .intro-in 전에는 숨김 상태로 대기 */
.cdm-hero:not(.intro-in) .cdm-hero-text > * { opacity: 0; transform: translateY(2rem); }

/* [NEW-product-candles-story] 모바일(하이브리드 풀페이지, .cd-story-mo.display-mo) — root 62.5%→1rem=10px. JS(.cdm-fp)가 인트로(.cdm-hero)+챕터 청크(.cdm-chunk)를 1제스처=1패널 전환(tea story 동일). */
@media (max-width: 1024px) {
  .content-asset-candle-story .candle_story { display: none; }
  .cd-prose-title { font-size: 22px; line-height: 1.63; }
  .cd-prose-body { font-size: 16px; line-height: 1.75; }
}

.cd-story-mo { position: relative; }
.cdm-sec { position: relative; }

/* 배경(이미지/영상) 풀블리드 + 스크림/그라디언트 */
.cdm-bg, .cdm-bg img, video.cdm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
video.cdm-bg { -webkit-transform: translateZ(0); transform: translateZ(0); }
.cdm-scrim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0.35; }
.cdm-scrim.cdm-scrim--soft { opacity: 0.25; }
.cdm-grad-top { position: absolute; top: 0; left: 0; right: 0; height: 40%; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
.cdm-cover-frame { position: absolute; inset: 0; z-index: 1; background: url("../images/story-blur-bk-m.png") center / 100% 100% no-repeat; pointer-events: none; }

/* 인트로 히어로(=ch1 커버) */
.cdm-hero { position: relative; height: 100svh; overflow: hidden; background: #000; display: flex; flex-direction: column; justify-content: space-between; }
.cdm-hero-menu { position: relative; z-index: 2; padding: 2.8rem 1.6rem 2rem; color: #fff; }
.cdm-submenu-top, .cdm-submenu { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.cdm-submenu-top::-webkit-scrollbar, .cdm-submenu::-webkit-scrollbar { display: none; }
.cdm-submenu-top { font-size: 1.2rem; margin-bottom: 0.6rem; letter-spacing: 0.05em; }
.cdm-submenu { font-size: 1.5rem; }
.cdm-submenu-top li, .cdm-submenu li { flex: 0 0 auto; white-space: nowrap; }
.cdm-submenu-top a, .cdm-submenu a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.cdm-submenu a { font-size: 1.8rem; }
.cdm-submenu-top .active a, .cdm-submenu .active a { color: #fff; }
.cdm-hero-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #fff; }

/* 챕터 커버(하단 좌측 텍스트) — 고정 헤더 높이만큼 줄여 상단이 헤더에 가리지 않게 함 */
.cdm-cover { position: relative; height: calc(100svh - var(--cdm-top, 6.8rem)); overflow: hidden; background: #000; display: flex; flex-direction: column; justify-content: flex-end; }
.cdm-cover-text { position: relative; z-index: 2; padding: 0 3.2rem 4rem; color: #fff; text-align: left; }
/* 이미지 커버(data-cdm-index=2, mo/4)는 검정 배경 제거 — 배경 이미지가 opacity 페이드될 때 뒤의 검정이 비쳐 깜빡였음. 영상 커버(--grad)는 로딩 중 검정 유지 */
.cdm-cover--light { background: #fff; }
.cdm-cover--light .cdm-cover-text { color: #000; }
.cdm-cover--dark { justify-content: center; }
.cdm-title { font-size: 18px; font-weight: 500; line-height: 1.333; letter-spacing: 0.01em; color: inherit; }

/* 챕터 칩(가로 스크롤, 양끝 대칭 인셋) */
.cdm-cover-chips { display: flex; gap: 2.4rem; margin: 1rem -3.2rem 0; padding: 0 3.2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.005em; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; color: inherit; }
.cdm-cover-chips::-webkit-scrollbar { display: none; }
.cdm-cover-chips .cd-chip { flex: 0 0 auto; }
/* [스크롤 인디케이터] 좌우 스크롤 가능(.is-scrollable) 시 우측 여백 10rem + 우측 6.4rem 흰→투명 mask 페이드 */
.cdm-cover-chips.is-scrollable { padding-right: 3.2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); }

/* [스크롤 인디케이터] tea/parfums 모바일 챕터 커버 칩도 좌우 스크롤 가능할 때만 › 노출 — teathology .tsm 동일. 색은 커버 텍스트색 상속(라이트=검정/다크=흰). JS가 .is-scrollable 토글. */
/* 인트로(data-cdm-index=0, .cdm-hero)의 칩 부모는 .cdm-hero-text라 셀렉터에 포함(parfums .pfm-* 동일) */
.cdm-hero-text:has(.cdm-cover-chips.is-scrollable)::after,
.cdm-cover-text:has(.cdm-cover-chips.is-scrollable)::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 4.1rem;
  width: 7px;
  height: 1.68rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  color: inherit;
  pointer-events: none;
  z-index: 3;
}
/* sec2 커버(tem-cover--top)는 상단정렬(padding-bottom:0)이라 칩이 cover-text 맨 아래 → 화살표 bottom을 칩 행에 맞춰 내림(기본 4.1rem은 하단정렬 커버용). 실측: 칩 행이 cover-text 하단 0~1.7rem. */
/* chnav 화살표(›) fade — 슬라이드업 불가한 가상요소라 opacity 0→1(커버/인트로 리빌 뒤 0.9s). 전 스토리 공통 */
.cdm-hero-text:has(.cdm-cover-chips.is-scrollable)::after,
.cdm-cover-text:has(.cdm-cover-chips.is-scrollable)::after { opacity: 0; transition: opacity 0.7s ease; }
.cdm-hero.intro-in .cdm-hero-text:has(.cdm-cover-chips.is-scrollable)::after,
.cd-story-mo.cdm-fade .cdm-chunk.is-active .cdm-cover-text:has(.cdm-cover-chips.is-scrollable)::after { opacity: 1; transition-delay: 0.9s; }

/* sec1 마퀴(1-1_1~8 흘러가는 이미지) */
.cdm-marquee { overflow: hidden; background: #000; }
.cdm-marquee-track { display: flex; width: max-content; animation: cdm-marquee var(--cdm-marquee-duration, 40s) linear infinite; }
.cdm-marquee-track > img { flex: 0 0 auto; width: auto; height: 42svh; min-height: 500px; object-fit: cover; object-position: center; display: block; }
@keyframes cdm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 프로즈(텍스트 전용) */
.cdm-prose { background: #fff; color: #000; padding: 6rem 3.2rem 10rem; }
.cdm-prose .cd-prose-title { margin: 0 0 4rem; text-align: left; }
.cdm-prose--dark { background: #000; color: #fff; }

/* 미디어(영상/이미지) + 텍스트 */
.cdm-mediatext { position: relative; background: #fff; color: #000; padding-bottom: 500px; }
/* 하단 400px 흰→검정 그라디언트(다음 다크 섹션으로 자연 전환). */
.cdm-mediatext::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 400px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #000); pointer-events: none; }
.cdm-mediatext-media { position: relative; padding: 0; font-size: 0; }
.cdm-mediatext-media img, .cdm-mediatext-vid { width: 100%; height: auto; display: block; background: #000; }
/* sec2 타임코드 영상: 상·하 검정 레터박스 크롭(흰 밴드 8:3만). 이미지엔 미적용. */
.cdm-mediatext-vid { aspect-ratio: 9 / 3; height: auto; object-fit: cover; object-position: center; }
.cdm-timecode { position: absolute; top: 2.4rem; left: 3.2rem; z-index: 2; color: #fff; font-size: 2.4rem; font-weight: 600; letter-spacing: 0.08em; }
.cdm-mediatext-text { padding: 6rem 3.2rem 10rem; }
.cdm-mediatext-text .cd-prose-title { margin: 0 0 4rem; text-align: left; }

/* [참고 space] sec2 챕터 네비 — 4.jpg 커버는 이미지만, 챕터 텍스트(eyebrow+탭)는 타임코드 영상 섹션 상단(흰 배경·검정)으로 이동. space .ssm-chnav 패턴. */
.cdm-mediatext-sec { background: #fff; color: #000; }
/* sec2 챕터 텍스트를 커버 텍스트 마크업(.cdm-hero-text)으로 통일 — 흰 배경이라 color를 검정으로 되돌리고 상하 여백(4rem 3.2rem) 유지 */
.cdm-mediatext-sec .cdm-hero-text { color: #000; padding: 4rem 3.2rem; }
/* 커버/인트로가 아닌 일반 섹션이라 칩 › 화살표 fade 트리거(.cdm-hero.intro-in / .cdm-chunk.is-active)가 없어 opacity:0으로 남는다 → 기존 .cdm-chnav처럼 항상 노출. */
.cdm-mediatext-sec .cdm-hero-text:has(.cdm-cover-chips.is-scrollable)::after { opacity: 1; }
.cdm-chnav { position: relative; padding: 4rem 3.2rem; }
.cdm-chnav .cd-eyebrow { margin: 0 0 1rem; }
.cdm-chnav-tabs { display: flex; gap: 2rem; font-size: 18px; font-weight: 500; line-height: 1.333; letter-spacing: 0.01em; flex-wrap: nowrap; overflow-x: auto; margin: 0 -3.2rem; padding: 0 3.2rem; scrollbar-width: none; -ms-overflow-style: none; }
.cdm-chnav-tabs::-webkit-scrollbar { display: none; }
.cdm-chnav-tabs a { color: rgba(0, 0, 0, 0.4); text-decoration: none; flex: 0 0 auto; white-space: nowrap; }
.cdm-chnav-tabs a.is-active { color: #000; }
/* [스크롤 인디케이터] 탭바가 넘쳐 좌우 스크롤 가능할 때만 › 노출 — space .ssm-chnav 동일. JS가 .is-scrollable 토글. */
.cdm-chnav-tabs.is-scrollable { padding-right: 3.2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 6.4rem - 3.2rem), transparent 100%); }
.cdm-chnav:has(.cdm-chnav-tabs.is-scrollable)::after {
  content: ""; position: absolute; right: 1.2rem; bottom: 4rem; width: 7px; height: 2.4rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.061 12.707'%3E%3Cg transform='translate(0.354 12.354) rotate(-90)'%3E%3Cpath d='M0,0,6,6l6-6' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 7px 10px;
  color: inherit; pointer-events: none; z-index: 3;
}

/* sec3 필름 슬라이더 */
.cdm-film { color: #fff; }
.cdm-film-sec { position: relative; background: #000; color: #fff; padding: 4rem 0 0; }
.cdm-film-top { text-align: center; padding: 0 3.2rem 3rem; color: inherit; }
.cdm-film-time { color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: 0; }
/* iOS: 가로 스와이프 시 청크(overflow-y:auto→x도 auto 승격)가 가로 러버밴드로 딸려 밀림 → 가로는 Swiper 전담(touch-action:pan-y)+부모 체이닝 차단(overscroll-behavior-x:contain). SPACE STORY(.ssm-slides) 동일 패턴. */
.cdm-film-viewport { position: relative; touch-action: pan-y; }
.cdm-film-swiper { width: 100%; touch-action: pan-y; overscroll-behavior-x: contain; }
.cdm-film-swiper .swiper-wrapper { height: auto; align-items: flex-start; }
/* [guide-0716 Phase2-2] 모바일 필름 좌우 peek — 슬라이드 폭 vw-64px·비선택 opacity 40%(가이드 p125). slidesPerView:'auto'+centeredSlides가 좌우 32px peek 노출. */
.cdm-film-swiper .cdm-film-item { width: calc(100vw - 6.4rem); box-sizing: border-box; height: auto; opacity: 0.4; transition: opacity 0.4s ease; } /* swiper.css .swiper-slide{width:100%}(동일 특이도·후로드)를 이기려면 후손 셀렉터로 특이도 상향 — 스토어 슬라이더와 동일 패턴 */
.cdm-film-item.swiper-slide-active { opacity: 1; }
.cdm-film-vid { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.cdm-film-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 4rem; height: 4rem; border: 0; cursor: pointer; font-size: 0; background: url("../images/arrow-wh.svg") center / 0.7rem auto no-repeat; }
.cdm-film-arrow--prev { left: -0.4rem; transform: translateY(-50%) scaleX(-1); } /* 활성 영상 좌측 안쪽 14px(=peek 32px + 14px, 가이드 p125). arrow-wh.svg 우(›)→이전은 반전(‹) */
.cdm-film-arrow--next { right: -0.4rem; }
.cdm-film-name { color: #fff; margin: 3rem 0 4rem; text-align: center; font-size: 1.2rem; font-weight: 700; letter-spacing: 0; transition: opacity 0.4s ease; }
/* 필름 섹션이 검정 배경이라 하단 프로즈 블록도 검정 배경·흰 텍스트로(섹션 전체 검정). */
.cdm-film-sec .cdm-prose--dark { padding-top: 4rem; padding-bottom: 40rem; background: linear-gradient(
  0, rgba(255, 255, 255, 100%) 0%, rgba(0, 0, 0, 0) 30%); color: #fff; }

/* sec4 스토어 이미지 슬라이더 */
.cdm-store-sec { background: #fff; color: #000; padding: 0 0 10rem; }
.cdm-store-swiper { width: 100%; }
.cdm-store-swiper .swiper-wrapper { height: auto; align-items: flex-start; gap: 0; }
.cdm-store-swiper .cdm-store-slide { width: 82%; box-sizing: border-box; height: auto; opacity: 0.5; transition: opacity 0.4s ease; } /* swiper.css의 .swiper-slide{width:100%}를 이기려면 후손 셀렉터로 specificity 상향(데스크탑 .cd-imgslider .swiper-slide 패턴과 동일) */
.cdm-store-slide.swiper-slide-active { opacity: 1; }
.cdm-store-slide img { width: 100%; height: auto; display: block; }
.cdm-store-nav { display: flex; align-items: center; gap: 2rem; padding: 2rem 3.2rem 0; }
.cdm-store-arrow { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border: 0; background: transparent; color: #000; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 0; }
.cdm-store-arrow[data-cdm-store-next] svg { transform: scaleX(-1); } /* 제공 SVG는 좌(‹) 방향 → 다음 버튼은 반전(›) — cd-imgslider-arrow와 동일 패턴 */
.cdm-store-count { display: flex; gap: 1rem; font-size: 1.3rem; letter-spacing: 0.05em; }
.cdm-store-info { padding: 2rem 3.2rem 0; }
.cdm-store-name { margin: 0 0 3rem; font-size: 1.8rem; font-weight: 500; }
.cdm-store-dl { margin: 0; font-size: 1.4rem; line-height: 1.6; display: flex; flex-direction: column; gap: 1rem; }
.cdm-store-dl > div { display: flex; gap: 2.4rem; }
.cdm-store-dl dt { flex: 0 0 6rem; margin: 0; color: rgba(0, 0, 0, 0.5); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; line-height: 2rem; }
.cdm-store-dl dd { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; line-height: 2rem; }

/* sec4 마무리(버튼 위 텍스트 + CTA 2버튼) */
.cdm-closing { background: #fff; color: #000; text-align: center; padding: 10rem 3.2rem 8rem; }
.cdm-closing-desc { margin: 0 0 3rem; font-size: 1.4rem; line-height: 1.7; }
.cdm-cta-buttons { display: flex; flex-direction: column; gap: 1.2rem; }

/* 모바일 하이브리드 풀페이지(JS가 .cdm-fp 부여) — 패널: 인트로(.cdm-hero)/챕터 청크(.cdm-chunk), 1제스처=1패널 슬라이드+fade. 첫 본문(마퀴+텍스트)부터 청크 시작, 챕터 커버(.cdm-cover)마다 새 청크. tea story .tem-fp 동일 구조. */
.cdm-fp.cd-story-mo { position: relative; height: 100svh; overflow: hidden; }
.cdm-fp > .cdm-hero,
.cdm-fp > .cdm-chunk {
  position: absolute; top: 0; left: 0; width: 100%; height: 100svh;
  opacity: 0; transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 600ms ease;
  will-change: transform, opacity;
}
/* 진입 첫 프레임 전환 억제(JS가 no-fp-anim 부여 → rAF 후 제거). 흐름→화면밖 값변화로 transition이 발동해 "겹친 후 아래로 슬라이드"되던 초기 플래시 차단. */
.cdm-fp.no-fp-anim > .cdm-hero,
.cdm-fp.no-fp-anim > .cdm-chunk { transition: none; }
.cdm-fp > .cdm-hero.is-next,
.cdm-fp > .cdm-chunk.is-next { transform: translateY(100%); opacity: 0; }
.cdm-fp > .cdm-hero.is-prev,
.cdm-fp > .cdm-chunk.is-prev { transform: translateY(-100%); opacity: 0; }
.cdm-fp > .cdm-hero.is-active,
.cdm-fp > .cdm-chunk.is-active { transform: translateY(0); opacity: 1; }
/* overflow-x:hidden — 세로만 auto로 승격되며(overflow-x도 auto) 필름 화살표(-0.4rem 돌출) 등이 만드는 가로 4px 오버플로가 iOS에서 러버밴드로 잡히던 것 차단. 세로 스크롤은 유지. */
.cdm-fp > .cdm-chunk { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-top: var(--cdm-top, 6.8rem); }
.cdm-fp > .cdm-chunk::-webkit-scrollbar { display: none; }
/* 챕터 커버(.cdm-cover)는 자체 높이를 헤더만큼 줄였으므로(위) 청크도 동일하게 헤더 클리어런스 패딩을 유지 — 헤더에 가리지 않게 함 */
/* 다크 영상 커버(.cdm-cover--grad, index=3) 청크는 헤더 클리어런스 영역까지 검정 — 앞 그라디언트(검정)→커버로 배경 연속. */
.cdm-fp > .cdm-chunk:has(.cdm-cover--grad) { background: #000; }
/* 인트로 서브메뉴 — 풀페이지 핀으로 moRoot top이 흔들려도 헤더 bottom 아래 20px 정렬(JS setTop이 --cdm-hero-menu-top 부여). */
.cdm-fp .cdm-hero-menu { padding-top: var(--cdm-hero-menu-top, var(--cdm-top, 6.8rem)); }