/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./src/asset/styles/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.bgc-primary {
  background-color: #ff3e66;
}

.txt-primary {
  color: #ff3e66;
}

.bgc-secondary {
  background-color: #006ad4;
}

.txt-secondary {
  color: #006ad4;
}

.bgc-black {
  background-color: #000;
}

.txt-black {
  color: #000;
}

.bgc-white {
  background-color: #fff;
}

.txt-white {
  color: #fff;
}

.bgc-neutral-900 {
  background-color: #212121;
}

.txt-neutral-900 {
  color: #212121;
}

.bgc-neutral-800 {
  background-color: #424242;
}

.txt-neutral-800 {
  color: #424242;
}

.bgc-neutral-700 {
  background-color: #616161;
}

.txt-neutral-700 {
  color: #616161;
}

.bgc-neutral-600 {
  background-color: #757575;
}

.txt-neutral-600 {
  color: #757575;
}

.bgc-neutral-500 {
  background-color: #9e9e9e;
}

.txt-neutral-500 {
  color: #9e9e9e;
}

.bgc-neutral-400 {
  background-color: #bdbdbd;
}

.txt-neutral-400 {
  color: #bdbdbd;
}

.bgc-neutral-300 {
  background-color: #e0e0e0;
}

.txt-neutral-300 {
  color: #e0e0e0;
}

.bgc-neutral-200 {
  background-color: #eee;
}

.txt-neutral-200 {
  color: #eee;
}

.bgc-neutral-100 {
  background-color: #fafafa;
}

.txt-neutral-100 {
  color: #fafafa;
}

.size3xl {
  font-size: 32px;
}

@media (max-width: 1024px) {
  .t-size3xl {
    font-size: 32px;
  }
}
.size2xl {
  font-size: 22px;
}

@media (max-width: 1024px) {
  .t-size2xl {
    font-size: 22px;
  }
}
.sizexl {
  font-size: 20px;
}

@media (max-width: 1024px) {
  .t-sizexl {
    font-size: 20px;
  }
}
.sizel {
  font-size: 18px;
}

@media (max-width: 1024px) {
  .t-sizel {
    font-size: 18px;
  }
}
.sizem {
  font-size: 16px;
}

@media (max-width: 1024px) {
  .t-sizem {
    font-size: 16px;
  }
}
.sizes {
  font-size: 14px;
}

@media (max-width: 1024px) {
  .t-sizes {
    font-size: 14px;
  }
}
.sizexs {
  font-size: 12px;
}

@media (max-width: 1024px) {
  .t-sizexs {
    font-size: 12px;
  }
}
.sizexs2 {
  font-size: 13px;
}

@media (max-width: 1024px) {
  .t-sizexs2 {
    font-size: 13px;
  }
}
.size2xs {
  font-size: 11px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .t-size2xs {
    font-size: 11px;
  }
}
.size3xs {
  font-size: 10px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .t-size3xs {
    font-size: 10px;
  }
}
:root {
  --contents-width: 1304px;
  --tablet-width: 1024px;
  --mobile-width: 768px;
  --header-height-detail: 48px;
  --input-height: 48px;
  --floating-bottom: 56px;
  --product-detail-bottom: 104px;
  --product-detail-no-option-bottom: 194px;
  --page-space: 32px;
  --mobile-space: 16px;
  --radius: 8px;
  --primary: #ff3e66;
  --secondary: #006ad4;
  --black: #000;
  --white: #fff;
  --neutral-900: #212121;
  --neutral-800: #424242;
  --neutral-700: #616161;
  --neutral-600: #757575;
  --neutral-500: #9e9e9e;
  --neutral-400: #bdbdbd;
  --neutral-300: #e0e0e0;
  --neutral-200: #eee;
  --neutral-100: #fafafa;
  --size3xl: 32px;
  --size2xl: 22px;
  --sizexl: 20px;
  --sizel: 18px;
  --sizem: 16px;
  --sizes: 14px;
  --sizexs: 12px;
  --sizexs2: 13px;
  --size2xs: 11px;
  --size3xs: 10px;
}

@media (max-width: 1304px) {
  :root {
    --page-space: 24px;
  }
}
@media (max-width: 768px) {
  :root {
    --page-space: 16px;
  }
}
.sp-mt-1 {
  margin-top: 1px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-1 {
    margin-top: 1px !important;
  }
}
.sp-mt-2 {
  margin-top: 2px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-2 {
    margin-top: 2px !important;
  }
}
.sp-mt-3 {
  margin-top: 3px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-3 {
    margin-top: 3px !important;
  }
}
.sp-mt-4 {
  margin-top: 4px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-4 {
    margin-top: 4px !important;
  }
}
.sp-mt-5 {
  margin-top: 5px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-5 {
    margin-top: 5px !important;
  }
}
.sp-mt-6 {
  margin-top: 6px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-6 {
    margin-top: 6px !important;
  }
}
.sp-mt-7 {
  margin-top: 7px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-7 {
    margin-top: 7px !important;
  }
}
.sp-mt-8 {
  margin-top: 8px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-8 {
    margin-top: 8px !important;
  }
}
.sp-mt-9 {
  margin-top: 9px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-9 {
    margin-top: 9px !important;
  }
}
.sp-mt-10 {
  margin-top: 10px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-10 {
    margin-top: 10px !important;
  }
}
.sp-mt-11 {
  margin-top: 11px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-11 {
    margin-top: 11px !important;
  }
}
.sp-mt-12 {
  margin-top: 12px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-12 {
    margin-top: 12px !important;
  }
}
.sp-mt-13 {
  margin-top: 13px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-13 {
    margin-top: 13px !important;
  }
}
.sp-mt-14 {
  margin-top: 14px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-14 {
    margin-top: 14px !important;
  }
}
.sp-mt-15 {
  margin-top: 15px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-15 {
    margin-top: 15px !important;
  }
}
.sp-mt-16 {
  margin-top: 16px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-16 {
    margin-top: 16px !important;
  }
}
.sp-mt-17 {
  margin-top: 17px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-17 {
    margin-top: 17px !important;
  }
}
.sp-mt-18 {
  margin-top: 18px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-18 {
    margin-top: 18px !important;
  }
}
.sp-mt-19 {
  margin-top: 19px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-19 {
    margin-top: 19px !important;
  }
}
.sp-mt-20 {
  margin-top: 20px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-20 {
    margin-top: 20px !important;
  }
}
.sp-mt-21 {
  margin-top: 21px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-21 {
    margin-top: 21px !important;
  }
}
.sp-mt-22 {
  margin-top: 22px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-22 {
    margin-top: 22px !important;
  }
}
.sp-mt-23 {
  margin-top: 23px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-23 {
    margin-top: 23px !important;
  }
}
.sp-mt-24 {
  margin-top: 24px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-24 {
    margin-top: 24px !important;
  }
}
.sp-mt-25 {
  margin-top: 25px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-25 {
    margin-top: 25px !important;
  }
}
.sp-mt-26 {
  margin-top: 26px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-26 {
    margin-top: 26px !important;
  }
}
.sp-mt-27 {
  margin-top: 27px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-27 {
    margin-top: 27px !important;
  }
}
.sp-mt-28 {
  margin-top: 28px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-28 {
    margin-top: 28px !important;
  }
}
.sp-mt-29 {
  margin-top: 29px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-29 {
    margin-top: 29px !important;
  }
}
.sp-mt-30 {
  margin-top: 30px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-30 {
    margin-top: 30px !important;
  }
}
.sp-mt-31 {
  margin-top: 31px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-31 {
    margin-top: 31px !important;
  }
}
.sp-mt-32 {
  margin-top: 32px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-32 {
    margin-top: 32px !important;
  }
}
.sp-mt-33 {
  margin-top: 33px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-33 {
    margin-top: 33px !important;
  }
}
.sp-mt-34 {
  margin-top: 34px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-34 {
    margin-top: 34px !important;
  }
}
.sp-mt-35 {
  margin-top: 35px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-35 {
    margin-top: 35px !important;
  }
}
.sp-mt-36 {
  margin-top: 36px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-36 {
    margin-top: 36px !important;
  }
}
.sp-mt-37 {
  margin-top: 37px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-37 {
    margin-top: 37px !important;
  }
}
.sp-mt-38 {
  margin-top: 38px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-38 {
    margin-top: 38px !important;
  }
}
.sp-mt-39 {
  margin-top: 39px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-39 {
    margin-top: 39px !important;
  }
}
.sp-mt-40 {
  margin-top: 40px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-40 {
    margin-top: 40px !important;
  }
}
.sp-mt-41 {
  margin-top: 41px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-41 {
    margin-top: 41px !important;
  }
}
.sp-mt-42 {
  margin-top: 42px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-42 {
    margin-top: 42px !important;
  }
}
.sp-mt-43 {
  margin-top: 43px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-43 {
    margin-top: 43px !important;
  }
}
.sp-mt-44 {
  margin-top: 44px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-44 {
    margin-top: 44px !important;
  }
}
.sp-mt-45 {
  margin-top: 45px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-45 {
    margin-top: 45px !important;
  }
}
.sp-mt-46 {
  margin-top: 46px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-46 {
    margin-top: 46px !important;
  }
}
.sp-mt-47 {
  margin-top: 47px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-47 {
    margin-top: 47px !important;
  }
}
.sp-mt-48 {
  margin-top: 48px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-48 {
    margin-top: 48px !important;
  }
}
.sp-mt-49 {
  margin-top: 49px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-49 {
    margin-top: 49px !important;
  }
}
/**
    * 마이페이지 베타 아이콘
 */
.member-icon-beta {
  background-image: url("/images/icons/member.svg") !important;
  background-size: contain;
  height: 32px;
  width: 32px;
}
.member-icon-beta.member-icon-24 {
  width: 24px;
  height: 24px;
}
.member-icon-beta.member-icon-20 {
  width: 20px;
  height: 20px;
}
.member-icon-beta.member-icon-16 {
  width: 16px;
  height: 16px;
}

html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

i {
  font-style: normal;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}
a:hover:not(.init) {
  color: var(--primary);
}
a:hover:not(.init) [class*=icons-].hover {
  background-color: var(--primary) !important;
}

strong {
  font-weight: inherit;
}
strong.m {
  font-weight: 500;
}
strong.sb {
  font-weight: 600;
}
strong.b {
  font-weight: 700;
}
strong.eb {
  font-weight: 800;
}

img {
  max-width: 100%;
}

button {
  all: unset;
  cursor: pointer;
}

* {
  box-sizing: border-box;
}
*:focus-visible {
  outline: 0;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("/fonts/pretendard/Pretendard-ExtraBold.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("/fonts/pretendard/Pretendard-Bold.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("/fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("/fonts/pretendard/Pretendard-Medium.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("/fonts/pretendard/Pretendard-Regular.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "VITRO-CORE-TTF";
  font-weight: 400;
  font-display: swap;
  src: local("VITRO-CORE-TTF"), url("/fonts/vitro/VITRO-CORE-TTF.woff2") format("woff2"), url("/fonts/vitro/VITRO-CORE-TTF.woff") format("woff");
}
html,
body {
  font-family: "Pretendard", arial, sans-serif;
}

body {
  font-size: var(--sizem);
  padding-right: 4px;
  padding-right: 0;
}
@media only screen and (min-device-width: 1024px) {
  body::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
@media (max-width: 768px) {
  body {
    font-size: var(--sizexs);
  }
}
body .verdana {
  font-family: Verdana;
}
body .txt-center {
  text-align: center;
}
body .ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
body .no-wrap {
  white-space: nowrap;
}

.ui-icon-small {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 2px;
  font-size: var(--size2xs);
  color: var(--neutral-700);
  padding: 1px 5px;
  border-width: 1px;
  border-style: solid;
}
.ui-icon-small:not(.r) {
  border-radius: 8px;
  border-color: var(--neutral-200);
}
.ui-icon-small.r {
  border-radius: 0px 4px 4px 4px;
  font-weight: 500;
}
.ui-icon-small.discount {
  border-color: #4e8aff;
  color: #4e8aff;
}
.ui-icon-small.recommend {
  border-color: #32ceb2;
  color: #32ceb2;
}
.ui-icon-small [class*=icons-] {
  width: 12px;
  height: 12px;
}

.icon-round {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--neutral-100);
}

[class*=icons-] {
  transition: background-color 0.3s;
  display: inline-flex;
  width: 24px;
  height: 24px;
}
[class*=icons-].ts {
  transition: 0.2s;
}
[class*=icons-].rotate {
  transform: rotate(180deg);
}
[class*=icons-].xsmall {
  width: 14px;
  height: 14px;
}
[class*=icons-].small {
  width: 18px;
  height: 18px;
}
[class*=icons-].large {
  width: 32px;
  height: 32px;
}
[class*=icons-].res-large {
  width: 32px;
  height: 32px;
}
@media (max-width: 1024px) {
  [class*=icons-].res-large {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 1024px) {
  [class*=icons-].t-xsmall {
    width: 14px;
    height: 14px;
  }
  [class*=icons-].t-small {
    width: 18px;
    height: 18px;
  }
}
[class*=icons-].icons-share:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/share.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-share:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-share.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-share.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/share.svg");
}
[class*=icons-].icons-share.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/share.png");
}
[class*=icons-].icons-talk:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/talk.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-talk:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-talk.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-talk.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/talk.svg");
}
[class*=icons-].icons-talk.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/talk.png");
}
[class*=icons-].icons-facebook:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/facebook.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-facebook:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-facebook.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-facebook.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/facebook.svg");
}
[class*=icons-].icons-facebook.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/facebook.png");
}
[class*=icons-].icons-discount:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/discount.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-discount:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-discount.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-discount.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/discount.svg");
}
[class*=icons-].icons-discount.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/discount.png");
}
[class*=icons-].icons-recommend:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/recommend.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-recommend:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-recommend.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-recommend.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/recommend.svg");
}
[class*=icons-].icons-recommend.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/recommend.png");
}
[class*=icons-].icons-delivery:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/delivery.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-delivery:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-delivery.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-delivery.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/delivery.svg");
}
[class*=icons-].icons-delivery.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/delivery.png");
}
[class*=icons-].icons-info:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/info.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-info:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-info.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-info.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/info.svg");
}
[class*=icons-].icons-info.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/info.png");
}
[class*=icons-].icons-coupon:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/coupon.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-coupon:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-coupon.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-coupon.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/coupon.svg");
}
[class*=icons-].icons-coupon.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/coupon.png");
}
[class*=icons-].icons-coupon_down:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/coupon_down.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-coupon_down:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-coupon_down.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-coupon_down.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/coupon_down.svg");
}
[class*=icons-].icons-coupon_down.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/coupon_down.png");
}
[class*=icons-].icons-cash:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/cash.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-cash:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-cash.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-cash.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cash.svg");
}
[class*=icons-].icons-cash.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cash.png");
}
[class*=icons-].icons-gift:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/gift.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-gift:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-gift.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-gift.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/gift.svg");
}
[class*=icons-].icons-gift.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/gift.png");
}
[class*=icons-].icons-time:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/time.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-time:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-time.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-time.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/time.svg");
}
[class*=icons-].icons-time.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/time.png");
}
[class*=icons-].icons-option_del:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/option_del.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-option_del:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-option_del.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-option_del.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/option_del.svg");
}
[class*=icons-].icons-option_del.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/option_del.png");
}
[class*=icons-].icons-minus:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/minus.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-minus:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-minus.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-minus.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/minus.svg");
}
[class*=icons-].icons-minus.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/minus.png");
}
[class*=icons-].icons-plus:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/plus.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-plus:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-plus.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-plus.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/plus.svg");
}
[class*=icons-].icons-plus.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/plus.png");
}
[class*=icons-].icons-search:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/search.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-search:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-search.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-search.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/search.svg");
}
[class*=icons-].icons-search.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/search.png");
}
[class*=icons-].icons-search_small:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/search_small.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-search_small:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-search_small.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-search_small.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/search_small.svg");
}
[class*=icons-].icons-search_small.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/search_small.png");
}
[class*=icons-].icons-heart:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/heart.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-heart:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-heart.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-heart.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/heart.svg");
}
[class*=icons-].icons-heart.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/heart.png");
}
[class*=icons-].icons-heart_on:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/heart_on.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-heart_on:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-heart_on.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-heart_on.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/heart_on.svg");
}
[class*=icons-].icons-heart_on.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/heart_on.png");
}
[class*=icons-].icons-cart:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/cart.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-cart:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-cart.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-cart.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart.svg");
}
[class*=icons-].icons-cart.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart.png");
}
[class*=icons-].icons-alarm:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/alarm.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-alarm:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-alarm.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-alarm.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/alarm.svg");
}
[class*=icons-].icons-alarm.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/alarm.png");
}
[class*=icons-].icons-close:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/close.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-close:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-close.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-close.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close.svg");
}
[class*=icons-].icons-close.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close.png");
}
[class*=icons-].icons-close2:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/close2.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-close2:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-close2.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-close2.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close2.svg");
}
[class*=icons-].icons-close2.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close2.png");
}
[class*=icons-].icons-close3:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/close3.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-close3:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-close3.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-close3.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close3.svg");
}
[class*=icons-].icons-close3.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close3.png");
}
[class*=icons-].icons-popper_arrow:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/popper_arrow.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-popper_arrow:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-popper_arrow.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-popper_arrow.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/popper_arrow.svg");
}
[class*=icons-].icons-popper_arrow.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/popper_arrow.png");
}
[class*=icons-].icons-auth:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/auth.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-auth:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-auth.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-auth.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/auth.svg");
}
[class*=icons-].icons-auth.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/auth.png");
}
[class*=icons-].icons-auth_line:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/auth_line.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-auth_line:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-auth_line.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-auth_line.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/auth_line.svg");
}
[class*=icons-].icons-auth_line.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/auth_line.png");
}
[class*=icons-].icons-auth_on:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/auth_on.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-auth_on:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-auth_on.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-auth_on.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/auth_on.svg");
}
[class*=icons-].icons-auth_on.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/auth_on.png");
}
[class*=icons-].icons-member:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/member.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-member:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-member.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-member.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member.svg");
}
[class*=icons-].icons-member.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member.png");
}
[class*=icons-].icons-member_thick:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/member_thick.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-member_thick:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-member_thick.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-member_thick.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member_thick.svg");
}
[class*=icons-].icons-member_thick.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member_thick.png");
}
[class*=icons-].icons-member_on:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/member_on.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-member_on:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-member_on.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-member_on.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member_on.svg");
}
[class*=icons-].icons-member_on.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member_on.png");
}
[class*=icons-].icons-favorite:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/favorite.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-favorite:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-favorite.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-favorite.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/favorite.svg");
}
[class*=icons-].icons-favorite.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/favorite.png");
}
[class*=icons-].icons-cart2:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/cart2.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-cart2:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-cart2.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-cart2.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart2.svg");
}
[class*=icons-].icons-cart2.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart2.png");
}
[class*=icons-].icons-cart2_on:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/cart2_on.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-cart2_on:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-cart2_on.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-cart2_on.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart2_on.svg");
}
[class*=icons-].icons-cart2_on.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart2_on.png");
}
[class*=icons-].icons-home:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/home.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-home:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-home.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-home.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/home.svg");
}
[class*=icons-].icons-home.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/home.png");
}
[class*=icons-].icons-home_thin:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/home_thin.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-home_thin:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-home_thin.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-home_thin.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/home_thin.svg");
}
[class*=icons-].icons-home_thin.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/home_thin.png");
}
[class*=icons-].icons-home_on:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/home_on.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-home_on:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-home_on.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-home_on.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/home_on.svg");
}
[class*=icons-].icons-home_on.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/home_on.png");
}
[class*=icons-].icons-select_arrow:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/select_arrow.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-select_arrow:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-select_arrow.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-select_arrow.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/select_arrow.svg");
}
[class*=icons-].icons-select_arrow.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/select_arrow.png");
}
[class*=icons-].icons-nav_menu:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/nav_menu.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-nav_menu:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-nav_menu.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-nav_menu.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/nav_menu.svg");
}
[class*=icons-].icons-nav_menu.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/nav_menu.png");
}
[class*=icons-].icons-recent:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/recent.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-recent:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-recent.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-recent.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/recent.svg");
}
[class*=icons-].icons-recent.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/recent.png");
}
[class*=icons-].icons-recent_on:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/recent_on.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-recent_on:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-recent_on.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-recent_on.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/recent_on.svg");
}
[class*=icons-].icons-recent_on.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/recent_on.png");
}
[class*=icons-].icons-cs:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/cs.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-cs:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-cs.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-cs.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cs.svg");
}
[class*=icons-].icons-cs.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cs.png");
}
[class*=icons-].icons-chatbot:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/chatbot.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-chatbot:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-chatbot.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-chatbot.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/chatbot.svg");
}
[class*=icons-].icons-chatbot.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/chatbot.png");
}
[class*=icons-].icons-quick_arrow:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/quick_arrow.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-quick_arrow:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-quick_arrow.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-quick_arrow.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/quick_arrow.svg");
}
[class*=icons-].icons-quick_arrow.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/quick_arrow.png");
}
[class*=icons-].icons-page_back:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/page_back.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-page_back:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-page_back.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-page_back.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_back.svg");
}
[class*=icons-].icons-page_back.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_back.png");
}
[class*=icons-].icons-cart_shop:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/cart_shop.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-cart_shop:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-cart_shop.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-cart_shop.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart_shop.svg");
}
[class*=icons-].icons-cart_shop.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/cart_shop.png");
}
[class*=icons-].icons-photo:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/photo.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-photo:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-photo.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-photo.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/photo.svg");
}
[class*=icons-].icons-photo.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/photo.png");
}
[class*=icons-].icons-page_prev1:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/page_prev1.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-page_prev1:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-page_prev1.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-page_prev1.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_prev1.svg");
}
[class*=icons-].icons-page_prev1.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_prev1.png");
}
[class*=icons-].icons-page_prev2:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/page_prev2.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-page_prev2:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-page_prev2.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-page_prev2.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_prev2.svg");
}
[class*=icons-].icons-page_prev2.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_prev2.png");
}
[class*=icons-].icons-page_next1:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/page_next1.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-page_next1:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-page_next1.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-page_next1.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_next1.svg");
}
[class*=icons-].icons-page_next1.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_next1.png");
}
[class*=icons-].icons-page_next2:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/page_next2.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-page_next2:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-page_next2.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-page_next2.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_next2.svg");
}
[class*=icons-].icons-page_next2.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/page_next2.png");
}
[class*=icons-].icons-reply:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/reply.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-reply:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-reply.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-reply.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/reply.svg");
}
[class*=icons-].icons-reply.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/reply.png");
}
[class*=icons-].icons-lock:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/lock.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-lock:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-lock.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-lock.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/lock.svg");
}
[class*=icons-].icons-lock.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/lock.png");
}
[class*=icons-].icons-check2:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/check2.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-check2:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-check2.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-check2.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/check2.svg");
}
[class*=icons-].icons-check2.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/check2.png");
}
[class*=icons-].icons-slick_prev:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/slick_prev.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-slick_prev:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-slick_prev.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-slick_prev.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_prev.svg");
}
[class*=icons-].icons-slick_prev.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_prev.png");
}
[class*=icons-].icons-slick_next:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/slick_next.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-slick_next:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-slick_next.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-slick_next.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_next.svg");
}
[class*=icons-].icons-slick_next.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_next.png");
}
[class*=icons-].icons-circle_minus:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/circle_minus.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-circle_minus:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-circle_minus.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-circle_minus.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/circle_minus.svg");
}
[class*=icons-].icons-circle_minus.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/circle_minus.png");
}
[class*=icons-].icons-circle_plus:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/circle_plus.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-circle_plus:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-circle_plus.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-circle_plus.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/circle_plus.svg");
}
[class*=icons-].icons-circle_plus.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/circle_plus.png");
}
[class*=icons-].icons-circle_equal:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/circle_equal.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-circle_equal:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-circle_equal.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-circle_equal.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/circle_equal.svg");
}
[class*=icons-].icons-circle_equal.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/circle_equal.png");
}
[class*=icons-].icons-go:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/go.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-go:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-go.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-go.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/go.svg");
}
[class*=icons-].icons-go.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/go.png");
}
[class*=icons-].icons-ds_cash:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/ds_cash.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-ds_cash:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-ds_cash.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-ds_cash.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/ds_cash.svg");
}
[class*=icons-].icons-ds_cash.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/ds_cash.png");
}
[class*=icons-].icons-visible:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/visible.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-visible:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-visible.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-visible.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/visible.svg");
}
[class*=icons-].icons-visible.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/visible.png");
}
[class*=icons-].icons-visible_none:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/visible_none.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-visible_none:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-visible_none.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-visible_none.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/visible_none.svg");
}
[class*=icons-].icons-visible_none.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/visible_none.png");
}
[class*=icons-].icons-banner_list:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/banner_list.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-banner_list:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-banner_list.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-banner_list.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/banner_list.svg");
}
[class*=icons-].icons-banner_list.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/banner_list.png");
}
[class*=icons-].icons-top_banner_ar:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/top_banner_ar.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-top_banner_ar:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-top_banner_ar.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-top_banner_ar.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/top_banner_ar.svg");
}
[class*=icons-].icons-top_banner_ar.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/top_banner_ar.png");
}
[class*=icons-].icons-close4:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/close4.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-close4:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-close4.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-close4.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close4.svg");
}
[class*=icons-].icons-close4.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/close4.png");
}
[class*=icons-].icons-sale-s:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/sale-s.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-sale-s:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-sale-s.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-sale-s.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/sale-s.svg");
}
[class*=icons-].icons-sale-s.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/sale-s.png");
}
[class*=icons-].icons-like-s:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/like-s.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-like-s:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-like-s.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-like-s.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/like-s.svg");
}
[class*=icons-].icons-like-s.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/like-s.png");
}
[class*=icons-].icons-star-s:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/star-s.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-star-s:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-star-s.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-star-s.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/star-s.svg");
}
[class*=icons-].icons-star-s.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/star-s.png");
}
[class*=icons-].icons-coupon-s:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/coupon-s.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-coupon-s:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-coupon-s.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-coupon-s.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/coupon-s.svg");
}
[class*=icons-].icons-coupon-s.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/coupon-s.png");
}
[class*=icons-].icons-gift-s:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/gift-s.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-gift-s:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-gift-s.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-gift-s.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/gift-s.svg");
}
[class*=icons-].icons-gift-s.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/gift-s.png");
}
[class*=icons-].icons-delivery-s:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/delivery-s.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-delivery-s:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-delivery-s.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-delivery-s.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/delivery-s.svg");
}
[class*=icons-].icons-delivery-s.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/delivery-s.png");
}
[class*=icons-].icons-house:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/house.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-house:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-house.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-house.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/house.svg");
}
[class*=icons-].icons-house.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/house.png");
}
[class*=icons-].icons-member:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/member.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-member:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-member.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-member.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member.svg");
}
[class*=icons-].icons-member.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/member.png");
}
[class*=icons-].icons-down:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/down.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-down:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-down.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-down.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/down.svg");
}
[class*=icons-].icons-down.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/down.png");
}
[class*=icons-].icons-lo_arrow2:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/lo_arrow2.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-lo_arrow2:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-lo_arrow2.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-lo_arrow2.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/lo_arrow2.svg");
}
[class*=icons-].icons-lo_arrow2.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/lo_arrow2.png");
}
[class*=icons-].icons-pass:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/pass.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-pass:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-pass.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-pass.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/pass.svg");
}
[class*=icons-].icons-pass.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/pass.png");
}
[class*=icons-].icons-card:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/card.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-card:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-card.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-card.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/card.svg");
}
[class*=icons-].icons-card.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/card.png");
}
[class*=icons-].icons-call:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/call.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-call:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-call.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-call.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/call.svg");
}
[class*=icons-].icons-call.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/call.png");
}
[class*=icons-].icons-banner_close:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/banner_close.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-banner_close:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-banner_close.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-banner_close.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/banner_close.svg");
}
[class*=icons-].icons-banner_close.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/banner_close.png");
}
[class*=icons-].icons-category_close:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/category_close.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-category_close:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-category_close.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-category_close.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/category_close.svg");
}
[class*=icons-].icons-category_close.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/category_close.png");
}
[class*=icons-].icons-ds_point:not(.bgi, .img) {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/ds_point.svg");
  -webkit-mask-position: center center;
}
[class*=icons-].icons-ds_point:not(.bgi, .img):not([class*=bgc-]) {
  background-color: var(--neutral-900);
}
[class*=icons-].icons-ds_point.auto {
  -webkit-mask-size: auto;
}
[class*=icons-].icons-ds_point.bgi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/ds_point.svg");
}
[class*=icons-].icons-ds_point.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/ds_point.png");
}
[class*=icons-].icons-share {
  width: 15px;
  height: 18px;
}
[class*=icons-].icons-talk, [class*=icons-].icons-facebook {
  width: 32px;
  height: 32px;
}
[class*=icons-].icons-chatbot {
  width: 60px;
  height: 60px;
}
@media (max-width: 1024px) {
  [class*=icons-].icons-chatbot {
    width: 40px;
    height: 40px;
  }
}
[class*=icons-].icons-ds_cash {
  width: 15px;
  height: 15px;
}
[class*=icons-].icons-house {
  width: 60px;
  height: 55px;
}
[class*=icons-].icons-search_small {
  width: 20px;
  height: 20px;
}
[class*=icons-].icons-search_small.small {
  width: 18px;
  height: 18px;
}
@media (max-width: 1024px) {
  [class*=icons-].icons-cart_shop {
    width: 20px;
    height: 20px;
  }
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.width-max .slick-list .slick-track {
  width: 8640px !important;
}

.photo-review .slick-slider .slick-track,
.photo-review .slick-slider .slick-list {
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo-review .slick-track .inner img {
  object-fit: contain;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  transition: opacity 0.3s;
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
.slick-slide,
.slick-slide a {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
  outline: 0;
  border: 0;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-arrow {
  all: unset;
  font-size: 0;
  cursor: pointer;
  z-index: 1;
}
.slick-arrow::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/slick_arrow.png");
  content: "";
  display: block;
  width: 48px;
  height: 48px;
}
.slick-arrow.slick-next::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/slick_arrow2.png");
}

.slick-dots {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  display: flex !important;
  gap: 4px;
}
.slick-dots button {
  all: unset;
  cursor: pointer;
  display: block;
  transition: background-color 0.3s;
  width: 8px;
  height: 8px;
  text-indent: -999em;
  overflow: hidden;
  border-radius: 100%;
  background-color: var(--neutral-400);
}
@media (max-width: 768px) {
  .slick-dots button {
    width: 6px;
    height: 6px;
  }
}
.slick-dots .slick-active button {
  background-color: var(--primary);
}

.slick-product-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 20px;
}
.slick-product-wrap.column {
  flex-direction: column;
}

.slick-product {
  max-width: 500px;
  border-radius: 6px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.04);
}
.slick-product .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .slick-product .inner {
    border-radius: 0;
  }
}
.slick-product .slick-arrow {
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}
.slick-product .slick-arrow.slick-next {
  right: 0;
}
.slick-product .slick-dots {
  transform: translateX(-50%);
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8px;
}
@media (max-width: 1024px) {
  .slick-product {
    max-width: 100%;
    border-radius: 0;
  }
}

.slick-product-thumb {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 20px;
}
.slick-product-thumb .thumb {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  color: #bdbdbd;
  border: 1px solid var(--neutral-200);
  background-color: var(--neutral-100) !important;
}
.slick-product-thumb .thumb .MuiButtonBase-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent !important;
}
.slick-product-thumb .thumb img {
  display: block;
}
.slick-product-thumb .thumb.active .MuiButtonBase-root {
  border: 1px solid var(--primary);
}

.column {
  gap: 10px;
}
.column .slick-product-thumb {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 10px;
  padding-bottom: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  overflow-x: auto;
}
@media only screen and (min-device-width: 1024px) {
  .column .slick-product-thumb::-webkit-scrollbar-track {
    border: 0;
    border-radius: 0;
    background-color: var(--neutral-200);
  }
  .column .slick-product-thumb::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: var(--neutral-200);
  }
  .column .slick-product-thumb::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: var(--neutral-800);
  }
}
@media (max-width: 1024px) {
  .column .slick-product-thumb {
    padding-bottom: 14px;
  }
}
@media (max-width: 1024px) {
  .column .slick-product-thumb .thumb {
    flex: none;
  }
}

.slick-banner-wrap {
  position: relative;
  max-width: 500px;
}
.slick-banner-wrap .slick-arrow {
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}
.slick-banner-wrap .slick-arrow.slick-prev {
  left: -24px;
}
.slick-banner-wrap .slick-arrow.slick-next {
  right: -24px;
}
@media (max-width: 1024px) {
  .slick-banner-wrap {
    max-width: 100%;
  }
  .slick-banner-wrap .slick-arrow.slick-prev {
    left: 0;
  }
  .slick-banner-wrap .slick-arrow.slick-next {
    right: 0;
  }
}

.slick-recent {
  padding: 0 48px;
}
.slick-recent .slick-arrow {
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}
.slick-recent .slick-arrow::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/slick_prev2.svg");
  -webkit-mask-position: center center;
  background-image: none;
  background-color: var(--neutral-500);
}
.slick-recent .slick-arrow.slick-next::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/slick_next2.svg");
  -webkit-mask-position: center center;
}
.slick-recent .slick-arrow.slick-prev {
  left: 0;
}
.slick-recent .slick-arrow.slick-next {
  right: 0;
}

@media (max-width: 1304px) {
  .slick-common-wrap {
    overflow: hidden;
  }
}
@media (max-width: 1024px) {
  .slick-common-wrap {
    margin: 0 calc(var(--page-space) * -1);
  }
}
.slick-common-wrap .slick-track {
  display: flex;
}
.slick-common-wrap .slick-arrow {
  position: absolute;
  top: 116px;
  width: 48px;
  height: 48px;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.17);
  border-radius: 100%;
}
.slick-common-wrap .slick-arrow::before,
.slick-common-wrap .slick-arrow ::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_arrow3.svg");
  width: 10px;
  height: 20px;
  margin: 0 auto;
}
.slick-common-wrap .slick-arrow.slick-prev {
  left: -6px;
}
.slick-common-wrap .slick-arrow.slick-next {
  transform: rotate(-180deg);
  right: -6px;
}
@media (max-width: 1304px) {
  .slick-common-wrap .slick-arrow {
    display: none !important;
  }
}
.slick-common-wrap .slick-common-inner {
  margin: 0 -20px;
}
.slick-common-wrap .slick-common-inner .slick-slide {
  padding: 0 20px;
}
@media (max-width: 768px) {
  .slick-common-wrap .slick-common-inner .slick-slide .thumb-card-wrap {
    width: 37vw;
  }
}
@media (max-width: 1304px) {
  .slick-common-wrap .slick-common-inner {
    margin: 0 -16px;
  }
  .slick-common-wrap .slick-common-inner .slick-slide {
    padding: 0 16px;
  }
}
@media (max-width: 1024px) {
  .slick-common-wrap .slick-common-inner {
    margin: 0;
  }
  .slick-common-wrap .slick-common-inner .slick-slide {
    padding: 0;
    padding-left: var(--page-space);
  }
}
.slick-common-wrap.gap-s .slick-arrow.slick-prev {
  left: -16px;
}
.slick-common-wrap.gap-s .slick-arrow.slick-next {
  right: -16px;
}
@media (min-width: calc(1024px + 1px)) {
  .slick-common-wrap.gap-s .slick-common-inner {
    margin: 0 -10px;
  }
  .slick-common-wrap.gap-s .slick-common-inner .slick-slide {
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .alpha {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
}

.flex {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}

.flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.flexYCenter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flexColumn {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
}

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

.flex1 {
  flex: 1 1;
}

.flex-none {
  flex: none;
}

.layout-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.layout-between > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.layout-nodeWrap {
  flex: 1 1;
  min-width: 100%;
}

.layout-node-flex1 > * {
  flex: 1 1;
}

@media (max-width: 1024px) {
  .t-flex1 {
    flex: 1 1;
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .m-flex1 {
    flex: 1 1;
    min-width: 100%;
  }
}

.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap {
  gap: 10px;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-26 {
  gap: 26px;
}

.layout-product-top {
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
}

.layout-contents.center {
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
}
.layout-contents.space-bottom {
  padding-bottom: 100px;
}

@media (max-width: 1304px) {
  .content-hide {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .tablet-hide {
    display: none !important;
  }
}

@media (min-width: calc(1024px + 1px)) {
  .tablet-show {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .tablet-show {
    display: flex !important;
  }
}

@media (max-width: 1024px) {
  .res-block {
    display: block;
  }
}

@media (max-width: 1024px) {
  .res-inline {
    display: inline-block;
  }
}

@media (max-width: 1024px) {
  .res-inline2 {
    display: inline;
  }
}

.layout-subpage-tab-wrap {
  min-height: 600px;
}
.layout-subpage-tab-wrap .ui-tabs-scroll button.MuiButtonBase-root {
  padding: 0 25px !important;
  text-transform: none !important;
}
@media (max-width: 1024px) {
  .layout-subpage-tab-wrap .ui-tabs-scroll {
    margin: 0 calc(var(--page-space) * -1);
  }
  .layout-subpage-tab-wrap .ui-tabs-scroll .MuiTabs-scroller {
    padding: 0 var(--page-space);
  }
}
@media (max-width: 768px) {
  .layout-subpage-tab-wrap .ui-tabs-scroll {
    padding-top: 24px;
  }
}
.layout-subpage-tab-wrap .round-another:not(.has-sub-btns) {
  margin-bottom: 80px;
}
@media (max-width: 1024px) {
  .layout-subpage-tab-wrap .round-another:not(.has-sub-btns) {
    margin-bottom: 20px;
  }
}
.layout-subpage-tab-wrap .tabs-sub-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 30px;
  margin-top: 20px;
  margin-bottom: 80px;
}
@media (max-width: 1024px) {
  .layout-subpage-tab-wrap .tabs-sub-btns {
    margin-right: calc(var(--page-space) * -1);
  }
}
.layout-subpage-tab-wrap .tabs-sub-btns .indiana-scroll-container {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}
.layout-subpage-tab-wrap .tabs-sub-btns .indiana-scroll-container .btn {
  flex: none;
  white-space: nowrap;
}
.layout-subpage-tab-wrap .tabs-sub-btns .btn {
  padding: 4px 8px;
  font-size: var(--sizel);
  color: var(--black);
  font-weight: 400;
}
.layout-subpage-tab-wrap .tabs-sub-btns .btn.on, .layout-subpage-tab-wrap .tabs-sub-btns .btn.on:hover {
  color: var(--primary);
  font-weight: 700;
}
@media (max-width: 1024px) {
  .layout-subpage-tab-wrap .tabs-sub-btns {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .layout-subpage-tab-wrap .tabs-sub-btns .btn {
    font-size: var(--sizes);
  }
}
@media (max-width: 768px) {
  .layout-subpage-tab-wrap .tabs-sub-btns {
    justify-content: flex-start;
  }
}
@media (max-width: 1024px) {
  .layout-subpage-tab-wrap {
    margin-bottom: 20px;
  }
}
.layout-subpage-tab-wrap .ui-sub-page-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  margin-bottom: 40px;
}
.layout-subpage-tab-wrap .ui-sub-page-banner a {
  line-height: 0;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-subpage-tab-wrap .ui-sub-page-banner {
    border-radius: 6px;
  }
}
@media (max-width: 1304px) {
  .layout-subpage-tab-wrap .ui-sub-page-banner {
    border-radius: 0;
    margin-left: calc(var(--page-space) * -1);
    margin-right: calc(var(--page-space) * -1);
  }
}
@media (max-width: 1024px) {
  .layout-subpage-tab-wrap .ui-sub-page-banner {
    margin-bottom: 24px;
  }
}

.ui-board-type-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 30px;
}
@media (max-width: 1024px) {
  .ui-board-type-control {
    margin-bottom: 16px;
  }
}
.ui-board-type-control .control-btns {
  margin-left: auto;
}
.ui-board-type-control .control-btns .toggle-btn-init {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}

.layout-res-grid {
  display: grid;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-res-grid.space {
    padding-top: 60px;
  }
}
.layout-res-grid .thumb-card-wrap {
  width: 100%;
}
.layout-res-grid.col-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 80px 40px;
}
@media (max-width: 1024px) {
  .layout-res-grid.col-4 {
    gap: 30px 16px;
  }
}
.layout-res-grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
}
@media (max-width: 1304px) {
  .layout-res-grid.col-3 {
    gap: 40px 20px;
  }
}
@media (max-width: 1024px) {
  .layout-res-grid.col-3 {
    gap: 30px 16px;
  }
}
@media (max-width: 1024px) {
  .layout-res-grid.t-col-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }
}
@media (max-width: 768px) {
  .layout-res-grid.m-col-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 16px;
  }
  .layout-res-grid.m-col-1 {
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
  }
}
.layout-res-grid.gap-s {
  gap: 40px;
}
@media (max-width: 1024px) {
  .layout-res-grid.gap-s {
    gap: 30px 16px;
  }
}

.thumb-scroll-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}
@media (max-width: 1024px) {
  .thumb-scroll-wrap.res-space-none {
    margin: 0 calc(var(--page-space) * -1);
  }
  .thumb-scroll-wrap.res-space-none .indiana-scroll-container {
    padding-left: var(--page-space);
    padding-right: var(--page-space);
  }
}
.thumb-scroll-wrap, .thumb-scroll-wrap > div {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 38px;
}
@media (max-width: 1304px) {
  .thumb-scroll-wrap, .thumb-scroll-wrap > div {
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .thumb-scroll-wrap, .thumb-scroll-wrap > div {
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .thumb-scroll-wrap.res-row {
    flex-wrap: wrap;
  }
}
.thumb-scroll-wrap > .indiana-scroll-container {
  padding-bottom: 8px;
  padding-bottom: 40px;
  width: 100%;
}
@media only screen and (min-device-width: 1024px) {
  .thumb-scroll-wrap > .indiana-scroll-container::-webkit-scrollbar-track {
    border: 0;
    border-radius: 0;
    background-color: var(--neutral-200);
  }
  .thumb-scroll-wrap > .indiana-scroll-container::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: var(--neutral-200);
  }
  .thumb-scroll-wrap > .indiana-scroll-container::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: var(--neutral-800);
  }
}
@media (max-width: 1024px) {
  .thumb-scroll-wrap > .indiana-scroll-container {
    padding-bottom: 24px;
  }
}
.thumb-scroll-wrap > .indiana-scroll-container > div {
  flex: none;
}
.thumb-scroll-wrap > .indiana-scroll-container > .col {
  flex: 1 1;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 38px;
  gap: 38px;
}
@media (max-width: 1304px) {
  .thumb-scroll-wrap > .indiana-scroll-container > .col {
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .thumb-scroll-wrap > .indiana-scroll-container > .col:not(.m-row-none) {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}
.thumb-scroll-wrap > .indiana-scroll-container > .col .thumb-card-wrap {
  max-width: 100% !important;
}
@media (max-width: 1024px) {
  .thumb-scroll-wrap > .indiana-scroll-container > .col-3 .thumb-card-wrap.res-row-none:not(.full),
  .thumb-scroll-wrap > .indiana-scroll-container > .col-3 .thumb-card-wrap.res:not(.full) {
    width: 23vw;
    min-width: 220px;
  }
}
@media (max-width: 768px) {
  .thumb-scroll-wrap > .indiana-scroll-container > .col-3 .thumb-card-wrap.res-row-none:not(.full),
  .thumb-scroll-wrap > .indiana-scroll-container > .col-3 .thumb-card-wrap.res:not(.full) {
    width: 54vw;
    min-width: 200px;
  }
}

@media (max-width: 1024px) {
  .thumb-slick-wrap.res-space-none .slick-banner {
    margin: 0 calc(var(--page-space) * -1);
  }
}
.thumb-slick-wrap.res-space-none .slick-banner .slick-slide {
  padding: 0;
  padding-left: var(--page-space);
}
.thumb-slick-wrap .slick-banner {
  margin: 0 -19px;
}
.thumb-slick-wrap .slick-banner .slick-slide {
  padding: 0 19px;
}
@media (max-width: 1304px) {
  .thumb-slick-wrap .slick-banner .slick-slide {
    padding: 0 12px;
  }
}
@media (max-width: 1304px) {
  .thumb-slick-wrap .slick-banner {
    margin: 0 -12px;
  }
}
@media (max-width: 1024px) {
  .thumb-slick-wrap .slick-banner {
    margin: 0 calc(var(--page-space) * -1);
  }
  .thumb-slick-wrap .slick-banner .slick-slide {
    padding: 0 var(--page-space);
  }
}

@media (max-width: 1024px) {
  .indiana-scroll-container.res-space-none {
    margin: 0 calc(var(--page-space) * -1);
    padding: 0 var(--page-space);
  }
}

.layout-mypage-menupage {
  min-height: 100vh;
  padding-bottom: 56px;
}
@media (max-width: 1024px) {
  .layout-mypage-menupage {
    background-color: var(--neutral-100);
  }
  .layout-mypage-menupage .ui-member-info-outer {
    background-color: var(--white);
    margin: 0 calc(var(--page-space) * -1);
    padding: 0 var(--page-space);
    width: auto !important;
  }
}

.layout-mypage-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 60px;
  padding-bottom: 100px;
}
@media (max-width: 1304px) {
  .layout-mypage-wrap {
    gap: 4%;
  }
}
.layout-mypage-wrap .layout-lnb-wrap {
  flex: none;
}
.layout-mypage-wrap .layout-lnb-wrap .ui-sub-title {
  padding: 12px 0 22px;
  text-align: left;
}
.layout-mypage-wrap .layout-lnb-wrap .ui-sub-title .tit {
  font-size: var(--size3xl);
}
.layout-mypage-wrap .layout-mypage-contents {
  width: 100%;
  min-width: 0;
}
.layout-mypage-wrap .layout-mypage-contents .order-list-title {
  padding-bottom: 20px;
}
.layout-mypage-wrap .layout-mypage-contents .order-list-title .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  font-size: var(--sizel);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .layout-mypage-wrap.is-mobile-menu {
    flex-direction: column-reverse;
  }
}

@media (max-width: 1024px) {
  .slick-product-items {
    margin: 0 calc(var(--page-space) * -1);
  }
  .slick-product-items .slick-slide {
    padding-left: var(--page-space);
  }
}

.text-transform-none {
  text-transform: none !important;
}

.top-title {
  color: var(--neutral-neutral-900, #212121);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px; /* 137.5% */
  display: none;
  margin-bottom: 16px;
  padding-top: 24px;
}
@media screen and (max-width: 768px) {
  .top-title {
    display: block;
  }
}

.complete-product-wrap {
  border-top: 1px solid var(--neutral-neutral-500, #9e9e9e);
  margin-bottom: 60px;
}
.complete-product-wrap h3 {
  color: var(--neutral-neutral-900, #212121);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px; /* 137.5% */
  padding: 19px 8px;
}
.complete-product-wrap .product-box {
  display: flex;
  width: 100%;
  border-top: 1px solid var(--neutral-neutral-200, #eee);
  border-bottom: 1px solid var(--neutral-neutral-200, #eee);
}
.complete-product-wrap .product-box .product-image {
  padding: 16px;
  width: 10%;
}
.complete-product-wrap .product-box .product-data {
  display: flex;
  width: 90%;
}
.complete-product-wrap .product-box .product-data .product-name {
  text-align: left;
  color: var(--neutral-neutral-900, #212121);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
  padding: 16px;
  width: 75%;
  display: flex;
  align-items: center;
}
.complete-product-wrap .product-box .product-data .product-price {
  width: 25%;
  display: flex;
}
.complete-product-wrap .product-box .product-data .product-price p {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--neutral-neutral-900, #212121);
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
  padding: 16px;
}
.complete-product-wrap .product-box .product-data .product-price p:first-child {
  width: 45%;
}
.complete-product-wrap .product-box .product-data .product-price p:nth-child(2) {
  color: var(--neutral-neutral-900, #212121);
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px; /* 137.5% */
  width: 55%;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .complete-product-wrap {
    margin-bottom: 24px;
  }
  .complete-product-wrap .product-box {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--neutral-neutral-200, #eee);
    border-bottom: 1px solid var(--neutral-neutral-200, #eee);
  }
  .complete-product-wrap .product-box .product-image {
    padding: 16px;
    width: 80px;
  }
  .complete-product-wrap .product-box .product-data {
    display: flex;
    width: calc(100% - 80px);
    flex-direction: column;
    padding: 16px;
  }
  .complete-product-wrap .product-box .product-data .product-name {
    padding: 0;
    width: 75%;
    margin-bottom: 8px;
  }
  .complete-product-wrap .product-box .product-data .product-price {
    width: 100%;
    display: flex;
  }
  .complete-product-wrap .product-box .product-data .product-price p {
    padding: 0;
    text-align: left;
  }
  .complete-product-wrap .product-box .product-data .product-price p:first-child {
    width: 25%;
  }
  .complete-product-wrap .product-box .product-data .product-price p:nth-child(2) {
    width: 75%;
    text-align: left;
  }
}

.order-info-wrap {
  margin-bottom: 60px;
}
.order-info-wrap h2 {
  color: var(--neutral-neutral-900, #212121);
  /* font-web/title/large */
  font-family: Pretendard;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 145.455% */
  margin-bottom: 16px;
}
.order-info-wrap table {
  width: 100%;
  border-top: 1px solid var(--neutral-neutral-500, #9e9e9e);
}
.order-info-wrap table tr th,
.order-info-wrap table tr td {
  border-bottom: 1px solid #ddd;
  padding: 22px 26px;
}
.order-info-wrap table tr th {
  width: 10%;
  background: var(--neutral-neutral-100, #fafafa);
  color: var(--neutral-neutral-900, #212121);
  text-align: center;
  /* font-web/title/xsmall */
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 138.462% */
}
.order-info-wrap table tr td {
  width: 90%;
  color: var(--neutral-neutral-700, #616161);
  /* font-web/body/medium */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}
.order-info-wrap table tr td.price {
  color: var(--primary-primary-normal, #ff3e66);
  /* font-web/title/medium */
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 144.444% */
}
@media screen and (max-width: 768px) {
  .order-info-wrap {
    margin-bottom: 24px;
  }
  .order-info-wrap h2 {
    font-size: 16px;
    line-height: 22px; /* 137.5% */
  }
  .order-info-wrap table tr th {
    width: 30%;
    padding: 22px 16px;
  }
  .order-info-wrap table tr td {
    width: 70%;
  }
}

.btn-wrap {
  display: flex;
  justify-content: center;
}
.btn-wrap:not(.no-mb) {
  margin-bottom: 100px;
}
.btn-wrap .main {
  border-radius: 8px;
  background: var(--primary-primary-normal, #ff3e66);
  padding: 0px 32px;
  color: var(--white, #fff);
  text-align: center;
  /* font-web/title/medium */
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 144.444% */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 56px;
}
.btn-wrap .main:hover {
  color: #fff;
}
.btn-wrap .order-list {
  border-radius: 8px;
  background: var(--neutral-neutral-800, #424242);
  padding: 0px 32px;
  color: var(--white, #fff);
  text-align: center;
  /* font-web/title/medium */
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 144.444% */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 56px;
  margin-left: 20px;
}
.btn-wrap .order-list:hover {
  color: #fff;
}
.btn-wrap .back-product {
  border-radius: 8px;
  background: var(--neutral-neutral-800, #424242);
  padding: 0px 8px;
  color: var(--white, #fff);
  text-align: center;
  /* font-web/title/medium */
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 144.444% */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 56px;
  margin-right: 20px;
}
.btn-wrap .back-product:hover {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .btn-wrap {
    margin-bottom: 56px;
  }
  .btn-wrap .main {
    width: 135px;
    height: 48px;
    color: var(--white, #fff);
    text-align: center;
    /* font-web/title/small */
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 137.5% */
    padding: 0;
  }
  .btn-wrap .order-list {
    width: 135px;
    height: 48px;
    color: var(--white, #fff);
    text-align: center;
    /* font-web/title/small */
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 137.5% */
    padding: 0;
  }
  .btn-wrap .back-product {
    width: 135px;
    height: 48px;
    color: var(--white, #fff);
    text-align: center;
    /* font-web/title/small */
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 137.5% */
    padding: 0;
  }
  .btn-wrap .back-list {
    width: 135px;
    height: 48px;
    color: var(--white, #fff);
    text-align: center;
    /* font-web/title/small */
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 137.5% */
    padding: 0;
  }
}

.main-footer .ui-right-bottom {
  position: relative;
}
.main-footer .ui-right-bottom.fixed:not(.on) {
  position: fixed;
}

.layout-main-outer {
  padding: 60px 0 100px;
}
@media (max-width: 1410px) {
  .layout-main-outer .main-layer {
    overflow: hidden;
  }
}
@media (max-width: 1304px) {
  .layout-main-outer {
    padding: 32px 0 100px;
  }
}
@media (max-width: 1024px) {
  .layout-main-outer {
    padding: 24px 0 100px;
  }
}
@media (max-width: 768px) {
  .layout-main-outer {
    padding: 16px 0 100px;
  }
}

.main-top-tabs-outer {
  padding-top: 90px;
}
@media (max-width: 1304px) {
  .main-top-tabs-outer {
    padding-top: 45px;
  }
}
@media (max-width: 1024px) {
  .main-top-tabs-outer {
    -top: 24px;
  }
}
@media (max-width: 768px) {
  .main-top-tabs-outer {
    padding-top: 22px;
  }
}

.main-layer.res-space00 {
  margin-top: 110px;
}
@media (max-width: 1304px) {
  .main-layer.res-space00 {
    margin-top: 100px;
  }
}
.main-layer.res-space01 {
  margin-top: 134px;
}
@media (max-width: 1304px) {
  .main-layer.res-space01 {
    margin-top: 100px;
  }
}
.main-layer.res-space02 {
  margin-top: 120px;
}
@media (max-width: 1304px) {
  .main-layer.res-space02 {
    margin-top: 100px;
  }
}
.main-layer.res-space-type00 {
  margin-top: 80px;
}
@media (max-width: 1304px) {
  .main-layer.res-space-type00 {
    margin-top: 50px;
  }
}
@media (max-width: 768px) {
  .main-layer.res-space-type00 {
    margin-top: 40px;
  }
}
@media (max-width: 1024px) {
  .main-layer.res-space00, .main-layer.res-space01, .main-layer.res-space02 {
    margin-top: 50px;
  }
}

.main-title {
  text-align: center;
  font-size: 36px;
  margin-bottom: 18px;
}
@media (max-width: 1024px) {
  .main-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-bottom: 24px;
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .main-title {
    font-size: var(--size2xl);
  }
}

.main-title-small {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.main-title-small .tit {
  font-size: 30px;
}
@media (max-width: 1024px) {
  .main-title-small .tit {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .main-title-small .tit {
    font-size: var(--size2xl);
  }
}
.main-title-small.space {
  margin-bottom: 40px;
}

.main-title-medium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.main-title-medium .tit {
  font-size: 36px;
}
@media (max-width: 1304px) {
  .main-title-medium .tit {
    font-size: 28px;
  }
}
@media (max-width: 1024px) {
  .main-title-medium .tit {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .main-title-medium .tit {
    font-size: var(--size2xl);
  }
}
.main-title-medium.space {
  margin-bottom: 42px;
}
@media (max-width: 1024px) {
  .main-title-medium.space {
    margin-bottom: 18px;
  }
}

.main-slider-outer {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 50px;
}
@media (min-width: calc(1024px + 1px)) {
  .main-slider-outer.col2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
  .main-slider-outer.col2 > div {
    max-width: 100%;
    min-width: 0;
    width: 47%;
  }
}

#mainRelateProduct.main-slider-outer {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 50px;
}
@media (min-width: calc(1024px + 1px)) {
  #mainRelateProduct.main-slider-outer.col2 {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: row;
  }
  #mainRelateProduct.main-slider-outer.col2 > div {
    max-width: 100%;
    min-width: 0;
    width: 47%;
  }
}

.slick-visual-outer {
  background-image: linear-gradient(to bottom, #ffffff 0px, #ffffff 40%, #f0f0ff 40%, #f0f0ff 100%);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  padding-bottom: 60px;
}
@media (max-width: 1304px) {
  .slick-visual-outer {
    padding-bottom: 50px;
  }
}
@media (max-width: 1024px) {
  .slick-visual-outer {
    padding: 36px 0;
    background: #f0f0ff;
  }
}

.slick-review-outer {
  padding: 60px 0;
  background-color: #f1f3f8;
}
@media (max-width: 1024px) {
  .slick-review-outer {
    padding: 40px 0 50px;
  }
}
@media (max-width: 768px) {
  .slick-review-outer {
    padding: 30px 0 60px;
  }
}

.main-customer-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 36px;
}
@media (max-width: 768px) {
  .main-customer-wrap {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    gap: 30px;
  }
}
.main-customer-wrap .info-wrap {
  max-width: 620px;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 1304px) {
  .main-customer-wrap .info-wrap {
    max-width: 560px;
  }
}
@media (max-width: 1024px) {
  .main-customer-wrap .info-wrap {
    max-width: 54%;
  }
}
@media (max-width: 768px) {
  .main-customer-wrap .info-wrap {
    max-width: 100%;
  }
}
.main-customer-wrap .info-wrap .info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 30px;
  padding: 30px 36px;
  gap: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 1.4;
}
.main-customer-wrap .info-wrap .info .tit {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  font-size: 24px;
  font-weight: 600;
}
.main-customer-wrap .info-wrap .info .tit .num {
  letter-spacing: 0.48px;
}
.main-customer-wrap .info-wrap .info .desc {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  color: var(--neutral-700);
  font-size: var(--sizes);
}
@media (max-width: 1024px) {
  .main-customer-wrap .info-wrap .info {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    gap: 4px;
    padding: 12px 32px;
  }
  .main-customer-wrap .info-wrap .info .tit {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: row;
    gap: 10px;
    font-size: var(--sizem);
  }
  .main-customer-wrap .info-wrap .info .desc {
    font-size: var(--sizexs);
  }
}
@media (max-width: 768px) {
  .main-customer-wrap .info-wrap .info {
    gap: 8px;
    padding: 20px 24px;
  }
}
.main-customer-wrap .info-wrap .links {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}
.main-customer-wrap .info-wrap .links > .link:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.main-customer-wrap .info-wrap .links .link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 14px;
  width: 100%;
  padding: 22px 23px;
}
@media (max-width: 1304px) {
  .main-customer-wrap .info-wrap .links .link {
    padding: 20px 16px;
    gap: 6px;
  }
}
.main-customer-wrap .info-wrap .links .link .tit {
  font-size: var(--size2xl);
  font-weight: 600;
  white-space: nowrap;
}
.main-customer-wrap .info-wrap .links .link .desc {
  font-size: var(--sizes);
  color: var(--neutral-700);
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .main-customer-wrap .info-wrap .links .link {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    text-align: center;
  }
  .main-customer-wrap .info-wrap .links .link .tit {
    font-size: var(--sizes);
  }
  .main-customer-wrap .info-wrap .links .link .desc {
    font-size: var(--size2xs);
  }
  .main-customer-wrap .info-wrap .links .link [class*=icons-] {
    width: 36px;
    height: 32px;
  }
}
.main-customer-wrap .ui-board-wrap {
  max-width: 560px;
  min-width: 0;
  width: 100%;
}
@media (max-width: 768px) {
  .main-customer-wrap .ui-board-wrap {
    max-width: 100%;
  }
}

.layout-page-class-wrap {
  margin-top: 60px;
  padding-bottom: 100px;
}
@media (max-width: 1024px) {
  .layout-page-class-wrap {
    margin-top: 30px;
    padding-bottom: 50px;
  }
}

.layout-class-visual {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0;
  background-image: url("/images/bg/class.jpg");
  padding: 63px 0 60px;
  height: 660px;
}
@media (max-width: 1024px) {
  .layout-class-visual {
    height: auto;
    padding: 32px 0 42px;
  }
}
.layout-class-visual .class-visual-inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 16px;
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
}
@media (max-width: 1024px) {
  .layout-class-visual .class-visual-inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
  }
}
@media (max-width: 768px) {
  .layout-class-visual .class-visual-inner {
    padding: 0;
  }
}
.layout-class-visual .class-visual-inner .class-visual-txt {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  max-width: 340px;
  width: 36.8%;
  min-width: 0;
}
.layout-class-visual .class-visual-inner .class-visual-txt .title {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(90deg, #4001c8 0%, #0d60dd 103.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 42px;
  font-weight: 800;
  word-break: keep-all;
}
.layout-class-visual .class-visual-inner .class-visual-txt .title::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/dot.svg");
  content: "";
  width: 40px;
  height: 20px;
}
.layout-class-visual .class-visual-inner .class-visual-txt .desc {
  font-size: var(--size2xl);
  line-height: 1.3;
}
.layout-class-visual .class-visual-inner .class-visual-txt .slick-control {
  margin-top: 50px;
}
.layout-class-visual .class-visual-inner .class-visual-txt .slick-control .banner-ar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.layout-class-visual .class-visual-inner .class-visual-txt .slick-control .banner-ar .ar {
  margin-top: 1px;
}
.layout-class-visual .class-visual-inner .class-visual-txt .slick-control .banner-nums {
  font-size: var(--sizexl);
  font-weight: 600;
}
.layout-class-visual .class-visual-inner .class-visual-txt .slick-control .banner-nums > span {
  display: inline-block;
  min-width: 26px;
}
.layout-class-visual .class-visual-inner .class-visual-txt .slick-control .banner-nums .length {
  color: var(--neutral-500);
}
.layout-class-visual .class-visual-inner .class-visual-txt .slick-control .banner-nums .length::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: #d9d9d9;
  margin: 0 8px;
}
@media (max-width: 1304px) {
  .layout-class-visual .class-visual-inner .class-visual-txt {
    width: 28%;
  }
}
@media (max-width: 1024px) {
  .layout-class-visual .class-visual-inner .class-visual-txt {
    width: 100%;
    text-align: center;
  }
  .layout-class-visual .class-visual-inner .class-visual-txt .title {
    align-items: center;
    gap: 2px;
    font-size: var(--size2xl);
  }
  .layout-class-visual .class-visual-inner .class-visual-txt .title::before {
    width: 26px;
    height: 14px;
  }
  .layout-class-visual .class-visual-inner .class-visual-txt .desc,
  .layout-class-visual .class-visual-inner .class-visual-txt .slick-control {
    display: none;
  }
}
.layout-class-visual .class-visual-inner .slick-banner {
  width: 100%;
  min-width: 0;
  margin: 0 -15px;
}
.layout-class-visual .class-visual-inner .slick-banner .slick-arrow {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.layout-class-visual .class-visual-inner .slick-banner .slick-track {
  display: flex;
}
.layout-class-visual .class-visual-inner .slick-banner .slick-slide {
  padding: 0 15px 8px;
  height: auto;
}
.layout-class-visual .class-visual-inner .slick-banner .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: 16px;
}
.layout-class-visual .class-visual-inner .slick-banner .slick-dots .slick-active button {
  background-color: #6549db;
}
@media (max-width: 1304px) {
  .layout-class-visual .class-visual-inner .slick-banner {
    margin: 0 -10px;
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-slide {
    padding: 0 10px 8px;
  }
}
@media (max-width: 1024px) {
  .layout-class-visual .class-visual-inner .slick-banner .slick-slide {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    padding-left: var(--page-space);
  }
}
@media (max-width: 768px) {
  .layout-class-visual .class-visual-inner .slick-banner {
    margin: 0 -20px;
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-arrow {
    transform: translate(-50%);
    position: absolute;
    top: calc(50% - 80px);
    z-index: 1;
    opacity: 1;
    width: 60px;
    height: 60px;
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-arrow::before {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url("/images/icons/arrow_class.svg");
    width: 60px;
    height: 60px;
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-arrow.slick-prev {
    left: calc(50% - 118px);
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-arrow.slick-next {
    left: calc(50% + 118px);
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-arrow.slick-next::before {
    transform: rotate(180deg);
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-slide {
    padding: 0 20px 8px;
  }
  .layout-class-visual .class-visual-inner .slick-banner .slick-slide .thumb-card-wrap {
    max-width: 200px;
  }
}
.layout-class-visual .thumb-card-wrap .txt-wrap .tit {
  min-height: 50px;
}

.layout-class-tit {
  margin: 80px 0 40px;
  text-align: center;
  font-size: var(--size3xl);
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .layout-class-tit {
    margin: 32px 0 24px;
    font-size: var(--size2xl);
  }
}
@media (max-width: 768px) {
  .layout-class-tit {
    font-size: var(--sizel);
  }
}

.layout-class-tab-wrap .tabs-wrap {
  margin-bottom: 40px;
}
@media (max-width: 1024px) {
  .layout-class-tab-wrap .tabs-wrap {
    margin-bottom: 24px;
  }
}
@media (max-width: 1024px) {
  .layout-class-tab-wrap .tab-contents {
    margin: 0 calc(var(--page-space) * -1);
  }
  .layout-class-tab-wrap .tab-contents .indiana-scroll-container {
    padding-left: var(--page-space);
    padding-right: var(--page-space);
  }
}
.layout-class-tab-wrap .indiana-scroll-container .thumb-card-wrap {
  width: 22vw !important;
}
@media (max-width: 768px) {
  .layout-class-tab-wrap .indiana-scroll-container .thumb-card-wrap {
    width: 37vw !important;
  }
}

.class-search-category:not(.is-btns) {
  color: var(--neutral-600);
  border-radius: 12px;
  border: 1px solid var(--neutral-300);
}
.class-search-category .MuiButtonBase-root.MuiButton-root:not(.unset) {
  height: 39px;
}
@media (max-width: 1024px) {
  .class-search-category .MuiButtonBase-root.MuiButton-root:not(.unset) {
    font-size: var(--sizexs2);
    height: 32px;
    padding: 0 14px !important;
  }
}
.class-search-category .row {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}
.class-search-category .label {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 200px;
  border-right: 1px solid var(--neutral-300);
  color: var(--neutral-700);
  font-size: var(--sizexl);
  font-weight: 500;
}
.class-search-category .cont {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  flex: 1 1;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
}
.class-search-category .cont .btn-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 15px;
  row-gap: 4px;
  flex-wrap: wrap;
}
.class-search-category .top .label,
.class-search-category .top .cont {
  padding-top: 20px;
}
.class-search-category .top .cont {
  padding-bottom: 4px;
}
.class-search-category .bottom .label,
.class-search-category .bottom .cont {
  padding-bottom: 20px;
}
.class-search-category .bottom .cont {
  padding-top: 4px;
}
.class-search-category .search {
  margin: auto 0 0 auto;
}
.class-search-category.is-btns .btns-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  font-size: var(--sizexs2);
  color: var(--neutral-600);
  font-weight: 500;
  line-height: 1;
}
.class-search-category.is-btns .btns-area [class*=icons-] {
  margin: -1px 0 0 4px;
}
@media (max-width: 1024px) {
  .class-search-category.is-btns .btns-area .MuiButtonBase-root {
    white-space: nowrap;
    padding: 0 10px !important;
  }
}
.class-search-category.is-btns .btns {
  margin-top: 12px;
}
@media (max-width: 1024px) {
  .class-search-category.is-btns .btns {
    margin-right: calc(var(--page-space) * -1);
  }
}
.class-search-category.is-btns .btns .indiana-scroll-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.class-search-category.is-btns .btns .MuiButtonBase-root {
  white-space: nowrap;
  padding: 8px;
  color: var(--black);
  font-size: var(--sizes);
}
.class-search-category.is-btns .btns .active, .class-search-category.is-btns .btns .active:hover {
  color: var(--primary);
  font-weight: 700;
}

.class-list-common {
  padding: 40px 0 60px;
}
.class-list-common .layout-paging-wrap {
  padding-top: 60px;
}
@media (max-width: 1024px) {
  .class-list-common .layout-paging-wrap {
    padding-top: 24px;
  }
}
@media (max-width: 768px) {
  .class-list-common {
    padding-bottom: 30px;
  }
}

.layout-mom-visual-wrap {
  padding-bottom: 70px;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-mom-visual-wrap {
    background-image: linear-gradient(to bottom, #ffffff 0px, #ffffff 80px, #f4f4f4 80px, #f4f4f4 100%);
    background-position: 0px 0px;
    background-repeat: no-repeat;
  }
}
@media (max-width: 1024px) {
  .layout-mom-visual-wrap {
    padding-bottom: 30px;
  }
}

.layout-recommend-wrap {
  background-color: var(--neutral-100);
  padding: 60px 0;
}
.layout-recommend-wrap .recommend-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
  .layout-recommend-wrap {
    padding: 30px 0;
  }
  .layout-recommend-wrap .recommend-title {
    font-size: var(--sizel);
    margin-bottom: 20px;
  }
}
@media (max-width: 1024px) and (max-width: 768px) {
  .layout-recommend-wrap .thumb-scroll-wrap {
    margin-right: calc(var(--page-space) * -1);
  }
}
@media (max-width: 1024px) {
  .layout-recommend-wrap .thumb-scroll-wrap .col {
    min-width: auto;
    flex: initial;
  }
}

.layout-page-view-btns {
  border-top: 1px solid var(--neutral-500);
  border-bottom: 1px solid var(--neutral-300);
}
@media (max-width: 768px) {
  .layout-page-view-btns .layout-contents {
    padding: 0;
  }
}
.layout-page-view-btns .inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}
.layout-page-view-btns .inner .prev,
.layout-page-view-btns .inner .next {
  width: 50%;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-page-view-btns .inner > div:not(:last-child) {
    border-right: 1px solid var(--neutral-300);
  }
}
.layout-page-view-btns .inner .link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 20px;
  font-size: var(--sizel);
}
.layout-page-view-btns .inner .link .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  flex: none;
}
.layout-page-view-btns .inner .link .cont {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  min-width: 0;
}
@media (max-width: 1024px) {
  .layout-page-view-btns .inner .link {
    font-size: var(--sizexs);
  }
  .layout-page-view-btns .inner .link [class*=icons-] {
    width: 18px;
    height: 18px;
  }
  .layout-page-view-btns .inner .link .cont {
    display: none;
  }
}
.layout-page-view-btns .inner .prev {
  padding: 30px 20px 30px 0;
}
.layout-page-view-btns .inner .next {
  padding: 30px 0 30px 20px;
}
.layout-page-view-btns .inner .next .link {
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .layout-page-view-btns .inner .prev,
  .layout-page-view-btns .inner .next {
    padding: 8px;
  }
}

.layout-bottom-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.layout-bottom-btns.space {
  padding-top: 60px;
}
@media (max-width: 1024px) {
  .layout-bottom-btns.space {
    padding: 30px 0;
  }
}
.layout-bottom-btns.bottom-space {
  padding-bottom: 100px;
}
@media (max-width: 1024px) {
  .layout-bottom-btns.bottom-space {
    padding-bottom: 50px;
  }
}

.ui-more-rectangle.MuiButton-root {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  width: 340px;
  height: 64px;
  border-radius: 5px;
  border: 1px solid var(--neutral-500) !important;
}
.ui-more-rectangle.MuiButton-root .txt {
  font-weight: 500;
  font-size: var(--size2xl);
}
.ui-more-rectangle.MuiButton-root.detail {
  width: 272px;
  height: 56px;
  border: 1px solid var(--neutral-300) !important;
}
.ui-more-rectangle.MuiButton-root.detail .txt {
  font-weight: 500;
  font-size: var(--sizel);
  color: var(--neutral-800);
}
.ui-more-rectangle.MuiButton-root.detail.gray, .ui-more-rectangle.MuiButton-root.detail.gray:hover {
  background-color: var(--neutral-800);
}
.ui-more-rectangle.MuiButton-root.detail.gray .txt, .ui-more-rectangle.MuiButton-root.detail.gray:hover .txt {
  color: var(--white);
}
.ui-more-rectangle.MuiButton-root.arrow::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/more.svg");
  -webkit-mask-position: 0 0;
  content: "";
  width: 28px;
  height: 28px;
  background-color: var(--black);
}
@media (max-width: 1024px) {
  .ui-more-rectangle.MuiButton-root.arrow::after {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 1024px) {
  .ui-more-rectangle.MuiButton-root {
    width: 200px;
    height: 48px;
  }
  .ui-more-rectangle.MuiButton-root .txt {
    font-size: var(--sizes);
  }
  .ui-more-rectangle.MuiButton-root::after {
    width: 18px;
    height: 18px;
  }
  .ui-more-rectangle.MuiButton-root.detail {
    width: 120px;
    height: 48px;
  }
  .ui-more-rectangle.MuiButton-root.detail .txt {
    font-size: var(--sizem);
  }
  .ui-more-rectangle.MuiButton-root.detail2 {
    width: 248px;
  }
  .ui-more-rectangle.MuiButton-root.detail2 .txt {
    font-size: var(--sizexs2);
  }
}

.layout-product-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-top {
    padding-bottom: 80px;
  }
}
@media (max-width: 1304px) {
  .layout-product-top {
    padding-bottom: 24px;
  }
}
.layout-product-top .layer-wrap01,
.layout-product-top .layer-wrap02,
.layout-product-top .layer-wrap03 {
  min-width: 0;
}
.layout-product-top .layer-wrap01 {
  order: 1;
}
.layout-product-top .layer-wrap01 .layer-inner {
  max-width: 600px;
  position: relative;
}
.layout-product-top .layer-wrap01 .tag {
  position: absolute;
  z-index: 9;
  display: flex;
  height: 28px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: var(--primary-primary-normal, #ff3e66);
  color: var(--white, #fff);
  text-align: center;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-bottom-right-radius: 12px;
}
.layout-product-top .layer-wrap02 {
  order: 3;
}
.layout-product-top .layer-wrap02 .layer-inner {
  max-width: 600px;
}
.layout-product-top .layer-wrap03 {
  order: 2;
  grid-row: span 4;
  margin-left: 32px;
}
.layout-product-top .layer-wrap03 .layer-inner {
  max-width: 560px;
  margin-left: auto;
}
.layout-product-top .layer-wrap04 {
  order: 4;
}
.layout-product-top .group-keyword-wrap,
.layout-product-top .ui-banner-outer {
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .layout-product-top .group-keyword-wrap,
  .layout-product-top .ui-banner-outer {
    margin-top: 24px;
  }
}
@media (max-width: 1024px) {
  .layout-product-top {
    padding-top: 32px;
    grid-template-columns: 40% 57%;
    column-gap: 3%;
  }
  .layout-product-top .layer-wrap01 .slick-product-thumb {
    display: none;
  }
  .layout-product-top .layer-wrap03 {
    margin-left: 0;
  }
  .layout-product-top .layer-wrap04 {
    grid-column: 1/span 2;
  }
  .layout-product-top .layer-wrap04 .banner-tit {
    padding: 0 var(--page-space);
  }
  .layout-product-top .layer-wrap04 .ui-banner-outer {
    margin-left: calc(var(--page-space) * -1);
    margin-right: calc(var(--page-space) * -1);
  }
  .layout-product-top .ui-banner-outer {
    margin-top: 24px;
  }
}
@media (max-width: 768px) {
  .layout-product-top {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    padding-top: 0;
  }
  .layout-product-top .layer-wrap01 {
    margin-left: calc(var(--page-space) * -1);
    margin-right: calc(var(--page-space) * -1);
  }
  .layout-product-top .layer-wrap01 .layer-inner {
    max-width: 100%;
  }
  .layout-product-top .layer-wrap02 .layer-inner {
    max-width: 100%;
  }
  .layout-product-top .layer-wrap03 {
    margin: 24px 0 0;
  }
  .layout-product-top .layer-wrap03 .layer-inner {
    max-width: 100%;
  }
}

.layout-product-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  align-items: initial;
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
}
@media (max-width: 1304px) {
  .layout-product-contents {
    padding-left: 0;
  }
}
@media (max-width: 1024px) {
  .layout-product-contents {
    padding-right: 0;
  }
}
.layout-product-contents .layout-product-view {
  width: 100%;
  min-width: 0;
  max-width: 880px;
  padding-bottom: 40px;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents .layout-product-view {
    padding-bottom: 100px;
  }
}
.layout-product-contents .layout-product-view .layout-product-tabs {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
  z-index: 1000;
  /* elevation1 */
  box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.02), 0px 1px 2px -2px rgba(0, 0, 0, 0.04);
}
.layout-product-contents .layout-product-view .layout-product-tabs .tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  position: relative;
  width: 100%;
  height: var(--header-height-detail);
  padding: 0 !important;
  border-radius: 0;
  background-color: var(--white);
  font-size: var(--sizexs2);
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents .layout-product-view .layout-product-tabs .tab {
    height: 80px;
    font-size: var(--sizel);
  }
}
.layout-product-contents .layout-product-view .layout-product-tabs .tab::after {
  transform: translateX(-50%);
  transition: width 0.2s;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--neutral-900);
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents .layout-product-view .layout-product-tabs .tab::after {
    height: 2px;
  }
}
.layout-product-contents .layout-product-view .layout-product-tabs .tab:hover {
  color: inherit;
}
.layout-product-contents .layout-product-view .layout-product-tabs .tab.active {
  font-weight: 700;
}
.layout-product-contents .layout-product-view .layout-product-tabs .tab.active::after {
  width: 100%;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents .layout-product-view .layout-product-tabs {
    box-shadow: 0 1px 0 0 var(--neutral-300);
  }
}
.layout-product-contents .layout-product-view #ProductTabHeader.layout-product-tabs {
  top: 0px;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents .layout-product-view #ProductTabHeader.layout-product-tabs {
    top: 40px;
  }
}
@media (max-width: 1024px) {
  .layout-product-contents .layout-product-view #ProductTabHeader.layout-product-tabs {
    position: fixed;
    width: inherit;
  }
}
.layout-product-contents .layout-product-view .product-view img {
  display: block;
}
.layout-product-contents .layout-product-view .product-view-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  padding: 60px 0 20px;
}
.layout-product-contents .layout-product-view .product-view-tit > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
@media (max-width: 768px) {
  .layout-product-contents .layout-product-view .product-view-tit > div {
    gap: 5px;
  }
}
@media (max-width: 1024px) {
  .layout-product-contents .layout-product-view .product-view-tit > div:last-child {
    min-width: 165px;
    justify-content: flex-end;
  }
}
.layout-product-contents .layout-product-view .product-view-tit .tit {
  white-space: nowrap;
  font-size: var(--size2xl);
  vertical-align: middle;
}
.layout-product-contents .layout-product-view .product-view-tit small {
  font-size: var(--sizexs);
  color: var(--neutral-600);
}
.layout-product-contents .layout-product-view .product-view-tit .MuiButtonBase-root {
  flex: none;
}
@media (max-width: 1304px) {
  .layout-product-contents .layout-product-view .product-view-tit {
    padding: 60px 0 20px var(--page-space);
  }
}
@media (max-width: 1024px) {
  .layout-product-contents .layout-product-view .product-view-tit {
    padding: 24px var(--page-space) 18px;
  }
  .layout-product-contents .layout-product-view .product-view-tit .tit {
    font-size: var(--sizem);
  }
}
@media (max-width: 768px) {
  .layout-product-contents .layout-product-view .product-view-tit small {
    font-size: var(--size2xs);
  }
}
.layout-product-contents .layout-product-view .product-detail-img {
  width: 100%;
}
@media (max-width: 1024px) {
  .layout-product-contents .layout-product-view {
    max-width: 100%;
  }
  .layout-product-contents .layout-product-view .layout-product-tabs {
    top: var(--header-height-detail);
  }
}
.layout-product-contents .layout-product-quick {
  position: relative;
}
.layout-product-contents .layout-product-quick .inner-scroll {
  padding-right: 4px;
  max-height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
@media only screen and (min-device-width: 1024px) {
  .layout-product-contents .layout-product-quick .inner-scroll::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  .layout-product-contents .layout-product-quick .inner-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  .layout-product-contents .layout-product-quick .inner-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
.layout-product-contents .layout-product-quick .price-quick-inner,
.layout-product-contents .layout-product-quick .price-quick-inner .MuiCollapse-wrapper,
.layout-product-contents .layout-product-quick .price-quick-inner .MuiCollapse-wrapperInner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents .layout-product-quick .price-quick-inner,
  .layout-product-contents .layout-product-quick .price-quick-inner .MuiCollapse-wrapper,
  .layout-product-contents .layout-product-quick .price-quick-inner .MuiCollapse-wrapperInner {
    max-height: 100%;
    overflow: hidden;
  }
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents .layout-product-quick {
    width: 300px;
    flex: none;
    margin-left: 32px;
  }
  .layout-product-contents .layout-product-quick .inner-scroll {
    margin-top: 10px;
  }
  .layout-product-contents .layout-product-quick .group-price-quick {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--white);
  }
  .layout-product-contents .layout-product-quick .group-price-quick .group-select-wrap .group-select-inputs {
    padding-top: 10px;
  }
  .layout-product-contents .layout-product-quick #ProductTabOption.group-price-quick {
    top: 40px;
  }
}
@media (max-width: 1024px) {
  .layout-product-contents .layout-product-quick {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1001;
    padding: 32px 16px 16px;
    border-radius: 12px 12px 0px 0px;
    background: var(--white, #fff);
    /* elevation_up */
    box-shadow: 0px -8px 16px -2px rgba(0, 0, 0, 0.04), 0px -4px 8px -2px rgba(0, 0, 0, 0.07);
  }
  .layout-product-contents .layout-product-quick .btn {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url("/images/icons/quick_arrow.svg");
    transition: 0.2s;
    transform: translateX(-50%);
    width: 30px;
    height: 12px;
    position: absolute;
    left: 50%;
    top: 10px;
  }
  .layout-product-contents .layout-product-quick .inner-scroll {
    margin-bottom: 4px;
    max-height: 32vh;
  }
  .layout-product-contents .layout-product-quick .group-price-quick {
    max-width: 100%;
  }
  .layout-product-contents .layout-product-quick .group-select-inputs {
    padding-top: 0;
  }
  .layout-product-contents .layout-product-quick .price-total-wrap {
    border-top: 1px solid var(--neutral-200);
  }
  .layout-product-contents .layout-product-quick .price-total-wrap.mobile-box {
    height: 69px !important;
  }
  .layout-product-contents .layout-product-quick.on .btn {
    transform: translateX(-50%) rotate(180deg);
  }
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents.on .layout-product-quick .group-price-quick {
    position: fixed;
    top: 0;
    height: 100%;
    padding: 40px 0 60px;
  }
  .layout-product-contents.on .layout-product-quick .group-price-quick .inner-scroll {
    padding-right: 6px;
  }
}
@media (min-width: calc(1024px + 1px)) {
  .layout-product-contents.right-quick-off .layout-product-quick .group-price-quick {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: auto;
  }
  .layout-product-contents.right-quick-off .layout-product-quick .group-price-quick .inner-scroll {
    padding-right: 0;
  }
}

.layout-product-items {
  padding: 60px 0;
  background-color: var(--neutral-100);
}
@media (max-width: 1304px) {
  .layout-product-items {
    padding: 40px 0;
  }
}
@media (max-width: 1024px) {
  .layout-product-items {
    padding: 20px 0;
  }
}
.layout-product-items .product-items-inner {
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
}
.layout-product-items .product-items-inner .product-items-tit {
  font-size: var(--size2xl);
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .layout-product-items .product-items-inner .product-items-tit {
    font-size: var(--sizem);
    margin-bottom: 16px;
  }
}

.product-view-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  min-height: 752px;
  font-size: var(--sizexs2);
  background-color: var(--neutral-100);
}

.product-rating-info {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  border-top: 1px solid var(--neutral-500);
  border-bottom: 1px solid var(--neutral-200);
  text-align: center;
}
.product-rating-info > div {
  padding: 16px;
}
.product-rating-info > div:not(.slick-review-wrap) {
  flex: none;
  min-width: 116px;
  background-color: var(--neutral-100);
  border-right: 1px solid var(--neutral-200);
}
.product-rating-info > div.average {
  min-width: 224px;
  padding-left: 24px;
  padding-right: 24px;
}
.product-rating-info .rating-tit {
  font-size: var(--sizexs2);
  font-weight: 700;
  margin-bottom: 16px;
}
.product-rating-info .rating-num {
  font-size: var(--size3xl);
}
.product-rating-info .review-num {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
}
.product-rating-info .review-num .num {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex: 1 1;
  font-size: 24px;
}
.product-rating-info .class-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
}
.product-rating-info .class-wrap .class {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex: 1 1;
}
.product-rating-info ol {
  text-align: left;
}
.product-rating-info ol li {
  font-size: var(--sizes);
  color: var(--neutral-700);
  line-height: 1.7;
}
.product-rating-info .slick-review-wrap {
  flex: 1 1;
  overflow: hidden;
  padding-left: 44px;
  padding-right: 44px;
}
@media (max-width: 768px) {
  .product-rating-info {
    flex-wrap: wrap;
  }
  .product-rating-info > div:not(.slick-review-wrap) {
    flex: 1 1;
  }
  .product-rating-info .class {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .product-rating-info .class li {
    font-size: var(--sizexs);
  }
  .product-rating-info .slick-review-wrap {
    min-width: 100%;
  }
}

@media (max-width: 1304px) {
  .product-rating-list {
    padding-left: var(--page-space);
  }
}
@media (max-width: 1024px) {
  .product-rating-list {
    padding-left: 0;
  }
}

.product-list-item {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 40px;
  border-bottom: 1px solid var(--neutral-200);
}
.product-list-item .list-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 10px;
}
.product-list-item .list-info > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}
.product-list-item .list-info .rating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  margin-right: 10px;
  color: #fc0;
  font-size: var(--size2xl);
}
.product-list-item .list-info .txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}
.product-list-item .list-info .txt01 {
  color: var(--neutral-700);
  font-size: var(--sizes);
}
.product-list-item .list-info .txt02 {
  color: var(--neutral-500);
  font-size: var(--sizexs);
}
.product-list-item .list-contents {
  color: var(--neutral-700);
  line-height: 1.6;
  font-size: var(--sizes);
}
@media (max-width: 1024px) {
  .product-list-item {
    padding: var(--page-space);
  }
  .product-list-item .list-info {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
  }
  .product-list-item .list-info .info {
    flex-direction: column;
    align-items: initial;
  }
}

.product-list-thumb {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 10px;
  padding-right: 4px;
  min-width: 0;
  overflow: hidden;
  overflow-x: auto;
}
@media only screen and (min-device-width: 1024px) {
  .product-list-thumb::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  .product-list-thumb::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  .product-list-thumb::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
@media (max-width: 768px) {
  .product-list-thumb {
    padding-bottom: 7px;
  }
}
.product-list-thumb .product-review {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  background-color: var(--neutral-200);
  object-fit: contain;
}
.product-list-thumb .product-review.light {
  background-color: var(--neutral-100);
}
.product-list-thumb .product-review .thumb.thumb,
.product-list-thumb .product-review .MuiButtonBase-root.thumb {
  position: relative;
  width: 100%;
  height: 100%;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
}
.product-list-thumb .product-review .thumb.thumb img,
.product-list-thumb .product-review .MuiButtonBase-root.thumb img {
  object-fit: contain;
}
.product-list-thumb .product-review .thumb.thumb .overlay,
.product-list-thumb .product-review .MuiButtonBase-root.thumb .overlay {
  width: 100%;
  height: 100%;
  text-align: right;
  padding: 3px;
}
.product-list-thumb .product-review .thumb.thumb .overlay .icons-close,
.product-list-thumb .product-review .MuiButtonBase-root.thumb .overlay .icons-close {
  color: #aaaaaa;
}

.layout-order-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  align-items: flex-start;
  gap: 30px;
}
.layout-order-wrap .layout-order-contents {
  width: 100%;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-order-wrap .layout-order-contents {
    max-width: 880px;
    padding-bottom: 100px;
  }
}
@media (max-width: 1024px) {
  .layout-order-wrap .layout-order-contents {
    padding: 24px 0 0;
  }
}
.layout-order-wrap .layout-order-contents.full {
  max-width: 100%;
}
.layout-order-wrap .layout-order-price {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 100px;
  width: 100%;
}
@media (min-width: calc(1024px + 1px)) {
  .layout-order-wrap .layout-order-price {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    width: 300px;
    min-width: 260px;
  }
}
@media (max-width: 1024px) {
  .layout-order-wrap {
    gap: 48px;
    flex-direction: column;
    align-items: flex-start;
  }
}

.order-inputs-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}
@media (max-width: 1024px) {
  .order-inputs-wrap {
    gap: 24px;
    margin-top: 24px;
  }
}
.order-inputs-wrap.space {
  padding-bottom: 100px;
}
.order-inputs-wrap .ui-table-wrap {
  position: relative;
}
.order-inputs-wrap .ui-table-wrap .light-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--neutral-900);
  opacity: 0.2;
  z-index: 1;
}
.order-inputs-wrap .ui-table-wrap .order-certification {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  align-items: center;
  justify-content: center;
}
.order-inputs-wrap .ui-table-wrap .order-certification div {
  color: var(--neutral-900);
  font-weight: 600;
  font-size: var(--sizexs2);
}
@media (max-width: 768px) {
  .order-inputs-wrap .ui-table-wrap table th {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
  }
}
.order-inputs-wrap .ui-table-wrap table td .payments-info {
  max-width: 520px;
  padding: 16px 0;
}
.order-inputs-wrap .ui-table-wrap table td .payments-info dt {
  font-weight: 700;
  font-size: var(--sizexs2);
  margin-bottom: 8px;
}
.order-inputs-wrap .ui-table-wrap table td .payments-info dd {
  line-height: 1.7;
}
@media (max-width: 768px) {
  .order-inputs-wrap .ui-table-wrap table td .MuiInputBase-root:not(.res-small) {
    flex: 1 1;
  }
  .order-inputs-wrap .ui-table-wrap table td .MuiInputBase-root {
    min-width: auto;
  }
}

.order-agree {
  border-top: 1px solid var(--neutral-500);
}
.order-agree .MuiFormControlLabel-root {
  padding: 10px;
  border-bottom: 1px solid var(--neutral-200);
}

.order-btns-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 1024px) {
  .order-btns-wrap {
    gap: 16px;
  }
}
.order-btns-wrap.width-fixed .MuiButtonBase-root {
  min-width: 128px;
}
@media (max-width: 1024px) {
  .order-btns-wrap.width-fixed .MuiButtonBase-root {
    min-width: 120px;
  }
}

.MuiButtonBase-root.MuiButton-root {
  min-width: auto;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-transform: inherit;
  border-radius: 6px;
}
.MuiButtonBase-root.MuiButton-root a,
.MuiButtonBase-root.MuiButton-root a:hover {
  color: inherit;
}
.MuiButtonBase-root.MuiButton-root.r {
  border-radius: 4px;
}
.MuiButtonBase-root.MuiButton-root.b {
  font-weight: bold;
}
.MuiButtonBase-root.MuiButton-root:not(.unset) {
  height: 48px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).large {
  height: 56px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).small {
  height: 32px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).s-medium {
  padding-right: 24px;
  padding-left: 24px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).s-medium.res {
  padding-right: 16px;
  padding-left: 16px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).s-small {
  padding-right: 16px;
  padding-left: 16px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).s-icons {
  padding-right: 4px;
  padding-left: 8px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).xsmall {
  border-radius: 4px;
  height: 32px;
  padding-right: 8px;
  padding-left: 8px;
  font-size: var(--sizexs2);
}
.MuiButtonBase-root.MuiButton-root:not(.unset).xsmall [class*=icons-] {
  width: 14px;
  height: 14px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset).xsmall2 {
  border-radius: 4px;
  height: 32px;
  padding-right: 16px;
  padding-left: 16px;
  font-size: var(--sizexs2);
}
@media (max-width: 1024px) {
  .MuiButtonBase-root.MuiButton-root:not(.unset).xsmall2 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}
.MuiButtonBase-root.MuiButton-root:not(.unset).xxsmall {
  height: 24px;
}
.MuiButtonBase-root.MuiButton-root:not(.unset):not(.icon, .none, .s-medium, .s-small, .xsmall, .s-icons, .xsmall2) {
  padding-right: 32px;
  padding-left: 32px;
}
@media (max-width: 1024px) {
  .MuiButtonBase-root.MuiButton-root:not(.unset).res-medium {
    height: 48px;
    padding-right: 24px;
    padding-left: 24px;
  }
}
@media (max-width: 1024px) {
  .MuiButtonBase-root.MuiButton-root:not(.unset).res-small {
    border-radius: 4px;
    height: 32px;
    font-size: var(--sizexs2);
    padding-right: 8px;
    padding-left: 8px;
  }
  .MuiButtonBase-root.MuiButton-root:not(.unset).res-small [class*=icons-] {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 1024px) {
  .MuiButtonBase-root.MuiButton-root:not(.unset).res-small2 {
    border-radius: 4px;
    height: 32px;
    font-size: var(--sizexs2);
    padding-right: 12px;
    padding-left: 12px;
  }
  .MuiButtonBase-root.MuiButton-root:not(.unset).res-small2 [class*=icons-] {
    width: 14px;
    height: 14px;
  }
}
.MuiButtonBase-root.MuiButton-root.icon {
  flex: none;
  width: 56px;
}
.MuiButtonBase-root.MuiButton-root.space {
  padding: 4px;
}
.MuiButtonBase-root.MuiButton-root:not([class*=bgc-], .Mui-disabled), .MuiButtonBase-root.MuiButton-root:hover:not([class*=bgc-], .Mui-disabled, .on) {
  background-color: #fff;
  color: inherit;
}
.MuiButtonBase-root.MuiButton-root.ts:not(.r) {
  border-radius: 0;
}
.MuiButtonBase-root.MuiButton-root.ts, .MuiButtonBase-root.MuiButton-root.ts:hover {
  background-color: transparent;
}
.MuiButtonBase-root.MuiButton-root.fill, .MuiButtonBase-root.MuiButton-root.fill:hover {
  background-color: var(--primary);
  color: var(--white);
}
.MuiButtonBase-root.MuiButton-root.fill [class*=icons-], .MuiButtonBase-root.MuiButton-root.fill:hover [class*=icons-] {
  background-color: var(--white) !important;
}
.MuiButtonBase-root.MuiButton-root.fill.black, .MuiButtonBase-root.MuiButton-root.fill.black:hover {
  background-color: var(--neutral-900);
}
.MuiButtonBase-root.MuiButton-root.fill.black-light, .MuiButtonBase-root.MuiButton-root.fill.black-light:hover {
  background-color: var(--neutral-800);
}
.MuiButtonBase-root.MuiButton-root.fill.Mui-disabled, .MuiButtonBase-root.MuiButton-root.fill.Mui-disabled:hover {
  background-color: var(--neutral-300);
}
.MuiButtonBase-root.MuiButton-root.disabled-btn {
  border: 1px solid var(--neutral-neutral-300, #E0E0E0);
  background: var(--neutral-neutral-100, #FAFAFA);
  cursor: no-drop;
  color: #BDBDBD;
}
.MuiButtonBase-root.MuiButton-root.disabled-btn:hover {
  background: var(--neutral-neutral-100, #FAFAFA);
  color: #BDBDBD;
}
.MuiButtonBase-root.MuiButton-root.outline {
  border: 1px solid var(--neutral-300);
}
.MuiButtonBase-root.MuiButton-root.outline.light {
  border: 1px solid var(--neutral-200);
}
.MuiButtonBase-root.MuiButton-root.outline.primary {
  border-color: var(--primary);
  color: var(--primary);
}
.MuiButtonBase-root.MuiButton-root.outline.bg {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
}
.MuiButtonBase-root.MuiButton-root.outline.Mui-disabled, .MuiButtonBase-root.MuiButton-root.outline.Mui-disabled:hover {
  color: var(--neutral-400);
  font-weight: 400;
  background-color: var(--white);
}
.MuiButtonBase-root.MuiButton-root.round {
  border-radius: 18px;
  line-height: 18px;
  padding: 0 8px;
}
.MuiButtonBase-root.MuiButton-root.round.s {
  padding: 0 20px;
}
.MuiButtonBase-root.MuiButton-root.int-member {
  height: 56px;
  border-radius: 8px;
  padding: 0 16px;
  background-color: #20af92;
  color: white;
  font-size: var(--sizel);
  line-height: 1.4;
}
.MuiButtonBase-root.MuiButton-root.int-member [class*=icons-] {
  margin-top: -1px;
}
.MuiButtonBase-root.MuiButton-root.int-member:hover {
  color: white;
  background-color: #3cd0b2;
}
@media (max-width: 1024px) {
  .MuiButtonBase-root.MuiButton-root.int-member {
    font-size: var(--sizem);
    height: 48px;
  }
  .MuiButtonBase-root.MuiButton-root.int-member [class*=icons-] {
    margin-top: 0;
    width: 18px;
    height: 18px;
  }
}
.MuiButtonBase-root.outline-rectangle {
  border: 1px solid var(--neutral-300);
  border-radius: 4px;
  width: 32px;
  height: 32px;
}
.MuiButtonBase-root.Mui-disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-300);
}
.MuiButtonBase-root.circle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--neutral-200);
  border-radius: 100%;
  color: black;
  font-size: 10px;
  font-weight: 500;
}
.MuiButtonBase-root.icon-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.MuiButtonBase-root.icon-circle:not(.fill) {
  border: 1px solid var(--neutral-400);
}
.MuiButtonBase-root.textAlign {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn-init .MuiButtonBase-root {
  all: unset;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.toggle-btn-init .MuiButtonBase-root.MuiToggleButton-root {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: var(--neutral-700);
  background-color: transparent;
}
.toggle-btn-init.check .Mui-selected {
  font-weight: 500;
  color: var(--neutral-900);
}
.toggle-btn-init.check .Mui-selected::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/check3.svg");
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 2px;
}
.toggle-btn-init.common-btns {
  gap: 8px;
}
@media (max-width: 360px) {
  .toggle-btn-init.common-btns {
    flex-wrap: wrap;
  }
}
.toggle-btn-init.common-btns .MuiButtonBase-root.MuiToggleButton-root {
  height: 48px;
  padding: 0px 16px;
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  font-size: var(--sizexs2);
  flex: 1 1;
}
.toggle-btn-init.common-btns .MuiButtonBase-root.MuiToggleButton-root.Mui-selected {
  border-color: var(--neutral-800);
  color: var(--neutral-900);
  font-weight: 700;
  background-color: var(--white);
}
@media (max-width: 768px) {
  .toggle-btn-init.common-btns .MuiButtonBase-root.MuiToggleButton-root {
    padding: 0px 12px;
  }
}

.radio-init {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  font-size: var(--sizem);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .radio-init {
    line-height: 2;
  }
}
.radio-init.MuiFormGroup-row {
  flex-direction: row;
  gap: 10px;
}
.radio-init .MuiFormControlLabel-root {
  position: relative;
  margin: 0;
  gap: 6px;
}
.radio-init .MuiFormControlLabel-root.Mui-disabled {
  color: var(--neutral-300);
}
.radio-init .MuiTypography-root.MuiFormControlLabel-label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.radio-init .MuiRadio-root {
  margin: 0;
  padding: 0;
  padding-left: 18px;
  height: 18px;
}
.radio-init .MuiRadio-root::before, .radio-init .MuiRadio-root::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/radio.svg");
  flex: none;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.radio-init .MuiRadio-root::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/radio_on.svg");
  transition: transform 0.2s;
  transform: scale(0);
}
.radio-init .MuiRadio-root.Mui-checked::after {
  transform: scale(1);
}
.radio-init .MuiRadio-root.Mui-disabled::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/radio_off.svg");
}
.radio-init .MuiRadio-root .MuiSvgIcon-root {
  display: none;
}

.check-init {
  line-height: 1.5;
}
.check-init.MuiFormControlLabel-root {
  position: relative;
  margin: 0;
  gap: 6px;
}
.check-init.MuiFormControlLabel-root.Mui-disabled {
  color: var(--neutral-300);
}
.check-init.MuiFormControlLabel-root.top {
  align-items: flex-start;
  display: flex;
}
.check-init .MuiTypography-root.MuiFormControlLabel-label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.check-init .MuiCheckbox-root {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  height: 20px;
}
.check-init .MuiCheckbox-root::before, .check-init .MuiCheckbox-root::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/check.svg");
  flex: none;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  display: inline-flex;
}
.check-init .MuiCheckbox-root::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/check_on.svg");
  transition: opacity 0.2s;
  opacity: 0;
}
.check-init .MuiCheckbox-root.Mui-checked::after {
  opacity: 1;
}
.check-init .MuiCheckbox-root.Mui-disabled::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/check_off.svg");
}
.check-init .MuiCheckbox-root.Mui-disabled::after {
  display: none;
}
.check-init .MuiCheckbox-root .MuiSvgIcon-root {
  display: none;
}
.check-init.check2 .MuiCheckbox-root::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("/images/icons/check_on2.svg");
}
.check-init.medium .MuiCheckbox-root {
  padding-left: 18px;
  height: 18px;
}
.check-init.medium .MuiCheckbox-root::before, .check-init.medium .MuiCheckbox-root::after {
  width: 100%;
  height: 100%;
}
.check-init.small .MuiCheckbox-root {
  padding-left: 12px;
  height: 12px;
}
.check-init.small .MuiCheckbox-root::before, .check-init.small .MuiCheckbox-root::after {
  width: 100%;
  height: 100%;
}
.check-init .txt-vertical {
  margin-top: 1px;
}

.custom-select-open::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

.select-init {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-radius: 6px;
  min-width: 120px;
  padding: 12px 16px;
  font-size: var(--sizes);
  padding: 0 !important;
}
.select-init:not(.MuiInputBase-multiline) {
  height: var(--input-height);
}
.select-init .MuiOutlinedInput-notchedOutline, .select-init .MuiOutlinedInput-notchedOutline.Mui-focused {
  border: 1px solid var(--neutral-300) !important;
}
.select-init:not([class*=bgc-]) {
  background-color: var(--white);
}
.select-init::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/select_arrow.svg");
  -webkit-mask-position: 0 0;
  pointer-events: none;
  content: "";
  transform: translateY(-50%);
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  background-color: var(--neutral-900);
}
.select-init.Mui-error::after {
  background-color: var(--primary);
}
.select-init.Mui-disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-400);
}
.select-init.Mui-disabled::after {
  opacity: 0.3;
}
.select-init.Mui-disabled .MuiOutlinedInput-notchedOutline,
.select-init.Mui-disabled .MuiOutlinedInput-notchedOutline.Mui-focused {
  border-color: var(--neutral-200) !important;
}
.select-init .MuiSelect-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  padding: 0 34px 0 16px !important;
  height: 100% !important;
  min-height: auto;
  font-size: var(--sizes);
  color: var(--neutral-700);
  line-height: 1 !important;
}
.select-init .MuiSelect-icon {
  display: none;
}
.select-init.small {
  border-radius: 4px;
  height: 32px !important;
  min-width: 80px;
}
.select-init.small .MuiSelect-select {
  font-size: var(--sizexs);
  padding: 0 28px 0 8px !important;
}
.select-init.small::after {
  right: 8px;
  width: 14px;
  height: 14px;
}
@media (max-width: 1024px) {
  .select-init.res {
    border-radius: 4px;
    height: 32px !important;
    min-width: 80px;
  }
  .select-init.res .MuiSelect-select {
    font-size: var(--sizexs);
    padding: 0 8px !important;
  }
  .select-init.res::after {
    right: 8px;
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 768px) {
  .select-init.res2 {
    border-radius: 4px;
    height: 32px !important;
    min-width: 120px;
  }
  .select-init.res2 .MuiSelect-select {
    font-size: var(--sizexs);
    padding: 0 8px !important;
  }
  .select-init.res2::after {
    right: 8px;
    width: 14px;
    height: 14px;
  }
}
.select-init.medium {
  min-width: 200px;
}
@media (max-width: 1024px) {
  .select-init.res-small {
    min-width: 75px;
  }
}

.select-init-pink {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-radius: 6px;
  min-width: 120px;
  padding: 12px 16px;
  font-size: var(--sizes);
  border: 1px solid #ff3e66;
  padding: 0 !important;
}
.select-init-pink:not(.MuiInputBase-multiline) {
  height: var(--input-height);
}
.select-init-pink .MuiOutlinedInput-notchedOutline, .select-init-pink .MuiOutlinedInput-notchedOutline.Mui-focused {
  border: 1px solid var(--neutral-300) !important;
}
.select-init-pink fieldset {
  border: none !important;
}
.select-init-pink:not([class*=bgc-]) {
  background-color: var(--white);
}
.select-init-pink::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/select_arrow.svg");
  -webkit-mask-position: 0 0;
  pointer-events: none;
  content: "";
  transform: translateY(-50%);
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  background-color: #ff3e66;
}
.select-init-pink.Mui-error::after {
  background-color: var(--primary);
}
.select-init-pink.Mui-disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-400);
}
.select-init-pink.Mui-disabled::after {
  opacity: 0.3;
}
.select-init-pink.Mui-disabled .MuiOutlinedInput-notchedOutline,
.select-init-pink.Mui-disabled .MuiOutlinedInput-notchedOutline.Mui-focused {
  border: 0px !important;
}
.select-init-pink .MuiSelect-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  padding: 0 34px 0 16px !important;
  height: 100% !important;
  min-height: auto;
  font-size: var(--sizes);
  color: var(--neutral-700);
  line-height: 1 !important;
}
.select-init-pink .MuiSelect-icon {
  display: none;
}
.select-init-pink.small {
  border-radius: 4px;
  height: 32px !important;
  min-width: 80px;
}
.select-init-pink.small .MuiSelect-select {
  font-size: var(--sizexs);
  padding: 0 28px 0 8px !important;
}
.select-init-pink.small::after {
  right: 8px;
  width: 14px;
  height: 14px;
}
@media (max-width: 1024px) {
  .select-init-pink.res {
    border-radius: 4px;
    height: 32px !important;
    min-width: 80px;
  }
  .select-init-pink.res .MuiSelect-select {
    font-size: var(--sizexs);
    padding: 0 8px !important;
  }
  .select-init-pink.res::after {
    right: 8px;
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 768px) {
  .select-init-pink.res2 {
    border-radius: 4px;
    height: 32px !important;
    min-width: 120px;
  }
  .select-init-pink.res2 .MuiSelect-select {
    font-size: var(--sizexs);
    padding: 0 8px !important;
  }
  .select-init-pink.res2::after {
    right: 8px;
    width: 14px;
    height: 14px;
  }
}
.select-init-pink.medium {
  min-width: 200px;
}
@media (max-width: 1024px) {
  .select-init-pink.res-small {
    min-width: 75px;
  }
}

.MuiMenu-paper {
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.MuiMenu-paper .MuiList-root {
  padding: 0;
}

.MuiMenuItem-root {
  transition: 0.2s;
  border-top: 1px solid var(--neutral-200);
  padding: 12px 16px;
  font-size: var(--sizes);
  line-height: 1.7;
}
.MuiMenuItem-root:first-child {
  border-top: 0;
}
.MuiMenuItem-root.Mui-disabled {
  display: none;
}
.MuiMenuItem-root.Mui-selected {
  background-color: var(--neutral-100) !important;
}

.small .MuiMenu-paper {
  border-radius: 4px;
}
.small .MuiMenuItem-root {
  padding: 8px;
  font-size: var(--sizexs);
}

@media (max-width: 1024px) {
  .res .MuiMenu-paper {
    border-radius: 4px;
  }
  .res .MuiMenuItem-root {
    padding: 8px;
    font-size: var(--sizexs);
  }
  .res .MuiMenuItem-root {
    min-height: 32px;
  }
}

@media (max-width: 768px) {
  .res2 .MuiMenu-paper {
    border-radius: 4px;
  }
  .res2 .MuiMenuItem-root {
    padding: 8px;
    font-size: var(--sizexs);
  }
  .res2 .MuiMenuItem-root {
    min-height: 32px;
  }
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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

.MuiInputBase-root {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-radius: 6px;
  min-width: 120px;
  padding: 12px 16px;
  font-size: var(--sizes);
  background-color: var(--white);
}
.MuiInputBase-root:not(.MuiInputBase-multiline) {
  height: var(--input-height);
}
.MuiInputBase-root .MuiOutlinedInput-notchedOutline, .MuiInputBase-root .MuiOutlinedInput-notchedOutline.Mui-focused {
  border: 1px solid var(--neutral-300) !important;
}
.MuiInputBase-root .MuiInputBase-input:not(textarea) {
  padding: 0;
  height: auto;
  line-height: 1.7;
  font-size: var(--sizes);
  color: var(--neutral-700);
}
.MuiInputBase-root.Mui-error {
  color: var(--primary);
}
.MuiInputBase-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary) !important;
}

.widthNoFixed .MuiInputBase-root {
  min-width: 0;
  height: 32px;
}

.MuiOutlinedInput-root .MuiInputAdornment-root {
  transition: 0.2s;
  opacity: 0.5;
}
.MuiOutlinedInput-root .MuiInputAdornment-root:hover {
  opacity: 1;
}

.MuiRating-root .MuiRating-icon {
  width: 32px;
  height: 32px;
}
.MuiRating-root .MuiRating-icon.MuiRating-iconFilled {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/star.svg");
  position: relative;
  z-index: 1;
}
.MuiRating-root .MuiRating-icon.MuiRating-iconEmpty {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/star.svg");
  -webkit-mask-position: 0 0;
  background-color: var(--neutral-200);
}
.MuiRating-root .MuiRating-icon .MuiSvgIcon-root {
  display: none;
}
.MuiRating-root.small .MuiRating-icon {
  width: 20px;
  height: 20px;
}
.MuiRating-root.medium .MuiRating-icon {
  width: 24px;
  height: 24px;
}
@media (max-width: 1024px) {
  .MuiRating-root.res .MuiRating-icon {
    width: 16px;
    height: 16px;
  }
}

.MuiAccordion-root.MuiPaper-root {
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.MuiAccordion-root.MuiPaper-root::before {
  display: none;
}
.MuiAccordion-root.MuiPaper-root .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex: none;
  height: 24px;
  padding: 0px 8px;
  border-radius: 4px;
  font-size: var(--sizexs);
}
.MuiAccordion-root.MuiPaper-root .icon.off {
  border: 1px solid var(--neutral-300);
  background-color: var(--white);
  color: var(--neutral-700);
}
.MuiAccordion-root.MuiPaper-root .icon.answer {
  background-color: var(--neutral-800);
  color: var(--white);
}
.MuiAccordion-root.MuiPaper-root .icon.completed {
  background-color: var(--primary);
  color: var(--white);
}
.MuiAccordion-root.MuiPaper-root .icon-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transition: 0.3s;
  flex: none;
  width: 32px;
  height: 32px;
  background-color: var(--neutral-800);
  color: var(--white);
  font-weight: 700;
  border-radius: 100%;
}
.MuiAccordion-root.MuiPaper-root.Mui-expanded .is-expanded .icon-circle {
  background-color: var(--primary);
}
.MuiAccordion-root.MuiPaper-root.Mui-expanded .is-expanded .tit {
  color: var(--primary);
  font-weight: 600;
}
.MuiAccordion-root.MuiPaper-root.Mui-expanded .is-expanded .icons-select_arrow {
  transform: rotate(180deg);
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-root {
  all: unset;
  cursor: pointer;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content {
  all: unset;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 20px 0;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit > div {
  min-width: 0;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit.no-wrap .tit {
  width: 100%;
  white-space: break-spaces;
  line-height: 1.7;
  padding-right: 30px;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .tit-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
}
@media (min-width: calc(1024px + 1px)) {
  .MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .tit-wrap .desc {
    display: none;
  }
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .tit-wrap .desc {
  font-size: var(--size2xs);
  color: var(--neutral-700);
  line-height: 1.8;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .tit {
  transition: 0.3s;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .tit [class*=icons-] {
  vertical-align: middle;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit [class*=icons-] {
  transition: 0.3s;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .MuiButtonBase-root {
  pointer-events: auto;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  color: var(--neutral-700);
  font-size: var(--sizexs);
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .info .date {
  color: var(--neutral-500);
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionDetails-root {
  all: unset;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionDetails-root .qna-contents {
  background-color: var(--neutral-100);
  padding: 0 20px;
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionDetails-root .part {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 10px;
  padding: 20px 0;
  line-height: 1.6;
  color: var(--neutral-700);
}
.MuiAccordion-root.MuiPaper-root .MuiAccordionDetails-root .part.answer-part {
  border-top: 1px solid var(--neutral-300);
}
.MuiAccordion-root.MuiPaper-root.Mui-disabled {
  pointer-events: none;
  cursor: default;
  background-color: transparent;
}
.MuiAccordion-root.MuiPaper-root.Mui-disabled .MuiAccordionSummary-root {
  color: inherit;
  opacity: 1;
}
@media (max-width: 1024px) {
  .MuiAccordion-root.MuiPaper-root {
    font-size: var(--sizes);
  }
  .product-view .qna-tit {
    padding: 16px var(--page-space) !important;
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit {
    padding: 16px 0;
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit:not(.no-wrap) {
    flex-wrap: wrap;
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit.no-wrap .info-wrap {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    min-width: auto;
    margin: 0;
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit.no-wrap .info-wrap .info {
    display: none;
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .info-wrap {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: row;
    gap: 5px;
    min-width: 100%;
    margin-top: 8px;
    white-space: nowrap;
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionSummary-content .qna-tit .info-wrap .info {
    flex-wrap: wrap;
    margin-right: auto;
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionDetails-root .qna-contents {
    padding: 0 var(--page-space);
  }
  .MuiAccordion-root.MuiPaper-root .MuiAccordionDetails-root .part {
    padding: 16px 0;
  }
}

.tabs-init.MuiTabs-root .MuiButtonBase-root {
  flex: 1 1;
  max-width: 100%;
  min-width: auto;
  min-height: auto;
  font-size: inherit;
  line-height: inherit;
  padding: 8px;
  font-size: var(--sizem);
  font-weight: 700;
  color: var(--neutral-500);
}
.tabs-init.MuiTabs-root .MuiButtonBase-root.Mui-selected {
  color: var(--neutral-900);
}
.tabs-init.MuiTabs-root.small,
.tabs-init.MuiTabs-root.small .MuiButtonBase-root {
  min-height: 24px;
}
.tabs-init.unset.MuiTabs-root {
  min-height: auto;
}
.tabs-init.unset.MuiTabs-root,
.tabs-init.unset .MuiTabs-scroller {
  overflow: visible !important;
}
.tabs-init.unset .MuiTabs-flexContainer {
  display: inline-flex;
  gap: 36px;
}
.tabs-init.unset .MuiTabs-flexContainer .MuiTab-root {
  all: unset;
  position: relative;
  display: inline-block;
  font-size: var(--size2xl);
  cursor: pointer;
}
.tabs-init.unset .MuiTabs-flexContainer .MuiTab-root::after {
  transition: 0.3s;
  transform: scale(0);
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: var(--primary);
}
.tabs-init.unset .MuiTabs-flexContainer .MuiTab-root .MuiTouchRipple-root {
  display: none;
}
.tabs-init.unset .MuiTabs-flexContainer .MuiTab-root.Mui-selected {
  font-weight: 700;
}
.tabs-init.unset .MuiTabs-flexContainer .MuiTab-root.Mui-selected::after {
  transform: scale(1);
}
@media (max-width: 1024px) {
  .tabs-init.unset .MuiTabs-flexContainer .MuiTab-root {
    font-size: 15px;
    padding: 4px 6px;
  }
  .tabs-init.unset .MuiTabs-flexContainer .MuiTab-root::after {
    right: -2px;
    top: -2px;
  }
}
.tabs-init.unset .MuiTabs-indicator {
  display: none;
}
.tabs-init.unset.res .MuiTabs-flexContainer {
  gap: 24px;
}
.tabs-init.unset.res .MuiTab-root {
  font-size: var(--sizexl);
}
@media (max-width: 1024px) {
  .tabs-init.unset.res .MuiTab-root {
    font-size: var(--sizel);
  }
}
@media (max-width: 768px) {
  .tabs-init.unset.res .MuiTab-root {
    font-size: var(--sizes);
  }
}
.tabs-init.round.MuiTabs-root {
  min-height: auto;
}
.tabs-init.round.MuiTabs-root .MuiTabs-indicator {
  display: none;
}
.tabs-init.round.MuiTabs-root .MuiTab-root {
  width: 166px;
  height: 56px;
  padding: 15px 16px;
  border-radius: 34px;
  border: 1px solid var(--neutral-400);
  background-color: var(--white);
  color: var(--neutral-500);
  font-weight: 500;
  font-size: var(--sizexl);
}
.tabs-init.round.MuiTabs-root .MuiTab-root.Mui-selected {
  background-color: var(--primary);
  color: var(--white);
  font-weight: 700;
  border-color: var(--primary);
}
.tabs-init.round-another .MuiTabs-indicator {
  display: none;
}
.tabs-init.round-another .MuiTabs-flexContainer {
  height: 100%;
}
.tabs-init.round-another.MuiTabs-root {
  display: flex;
  justify-content: center;
}
.tabs-init.round-another.MuiTabs-root .MuiTabs-scroller,
.tabs-init.round-another.MuiTabs-root .MuiTabs-flexContainer {
  flex: initial;
  width: auto;
}
.tabs-init.round-another.MuiTabs-root .MuiTabs-flexContainer {
  background-color: #f2f2f2;
  border-radius: 50px;
}
.tabs-init.round-another.MuiTabs-root .MuiButtonBase-root {
  transition: 0.3s;
  color: var(--neutral-800);
  font-weight: 400;
  font-size: var(--sizel);
  white-space: nowrap;
  flex: none;
  min-width: initial;
  padding: 0 30px;
}
.tabs-init.round-another.MuiTabs-root .MuiButtonBase-root.Mui-selected {
  color: var(--white);
  font-weight: 700;
  background-color: var(--primary);
  border-radius: 50px;
}
@media (max-width: 1024px) {
  .tabs-init.round-another.MuiTabs-root {
    min-height: 28px;
  }
  .tabs-init.round-another.MuiTabs-root .MuiTabs-flexContainer {
    background-color: transparent;
    border-radius: 0;
    gap: 8px;
  }
  .tabs-init.round-another.MuiTabs-root .MuiButtonBase-root {
    font-size: var(--sizes);
    padding: 0 20px;
    background-color: #f2f2f2;
    border-radius: 50px;
  }
}
.tabs-init.rectangle {
  box-shadow: inset 0 0 0 1px var(--neutral-300);
  min-height: 56px;
}
.tabs-init.rectangle.small {
  min-height: 48px;
}
.tabs-init.rectangle.space-bottom {
  margin-bottom: 60px;
}
@media (max-width: 1024px) {
  .tabs-init.rectangle.space-bottom {
    margin-bottom: 36px;
  }
}
@media (max-width: 768px) {
  .tabs-init.rectangle.space-bottom {
    margin-bottom: 24px;
  }
}
@media (max-width: 768px) {
  .tabs-init.rectangle.m-space-top {
    margin-top: 24px;
  }
}
@media (max-width: 768px) {
  .tabs-init.rectangle .MuiTabs-flexContainer {
    flex-wrap: wrap;
  }
}
.tabs-init.rectangle .MuiTabs-indicator {
  display: none;
}
.tabs-init.rectangle .MuiTabs-flexContainer,
.tabs-init.rectangle .MuiButtonBase-root {
  height: 100%;
}
.tabs-init.rectangle .MuiButtonBase-root {
  box-shadow: 1px 0 0 0 var(--neutral-300);
  position: relative;
  font-size: var(--sizel);
  font-weight: 400;
}
.tabs-init.rectangle .MuiButtonBase-root.Mui-selected {
  box-shadow: none;
  font-weight: 700;
}
.tabs-init.rectangle .MuiButtonBase-root.Mui-selected::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid var(--neutral-900);
}
.tabs-init.rectangle.grid-col4 {
  box-shadow: inset 1px 1px 0 0 var(--neutral-300);
}
.tabs-init.rectangle.grid-col4 .MuiTabs-flexContainer {
  height: auto;
}
.tabs-init.rectangle.grid-col4 .MuiButtonBase-root {
  height: 48px;
  box-shadow: inset -1px 0 0 0 var(--neutral-300);
  border-bottom: 1px solid var(--neutral-300);
}
.tabs-init.rectangle.grid-col4 .MuiButtonBase-root.Mui-selected::after {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid var(--neutral-900);
}
.tabs-init.rectangle.grid-col4 .MuiTabs-flexContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .tabs-init.rectangle.grid-col4 .MuiTabs-flexContainer {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1024px) {
  .tabs-init.rectangle {
    min-height: 36px !important;
  }
  .tabs-init.rectangle .MuiButtonBase-root {
    font-size: var(--sizexs2);
  }
}
@media (max-width: 768px) {
  .tabs-init.rectangle {
    box-shadow: inset 1px 1px 0 0 var(--neutral-300);
  }
  .tabs-init.rectangle .MuiTabs-flexContainer {
    height: auto;
  }
  .tabs-init.rectangle .MuiButtonBase-root {
    height: 36px;
    box-shadow: inset -1px 0 0 0 var(--neutral-300);
    border-bottom: 1px solid var(--neutral-300);
  }
  .tabs-init.rectangle .MuiButtonBase-root.Mui-selected::after {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid var(--neutral-900);
  }
  .tabs-init.rectangle.m-grid-col3 .MuiTabs-flexContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.tab-layer {
  padding-top: 24px;
}

.ui-tabs-scroll .MuiTabs-root,
.ui-tabs-scroll .MuiTabs-scroller {
  overflow: visible !important;
}
@media (max-width: 768px) {
  .ui-tabs-scroll .tabs-init.MuiTabs-root {
    justify-content: flex-start;
  }
}

.ui-top-banner {
  position: relative;
}
.ui-top-banner.on {
  z-index: 1020;
}
.ui-top-banner .inner {
  position: relative;
}
@media (max-width: 768px) {
  .ui-top-banner .inner {
    padding: 0;
  }
}
.ui-top-banner .inner .ui-top-banner-contents {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.ui-top-banner .inner .banner-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  width: 720px;
  height: 96px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .ui-top-banner .inner .banner-img {
    width: 480px;
    height: 64px;
  }
}
@media (max-width: 768px) {
  .ui-top-banner .inner .banner-img {
    width: 360px;
    height: 48px;
  }
}
@media (max-width: 360px) {
  .ui-top-banner .inner .banner-img {
    width: 100%;
  }
}
.ui-top-banner .inner .close {
  width: 48px;
  height: 48px;
  margin-left: auto;
}
.ui-top-banner .inner .close [class*=icons-] {
  width: 100%;
  height: 100%;
  background-color: var(--neutral-600);
}
@media (max-width: 768px) {
  .ui-top-banner .inner .close {
    width: 38px;
    height: 38px;
  }
}
.ui-top-banner .inner .btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 var(--page-space);
  pointer-events: none;
}
.ui-top-banner .inner .btns .check-init,
.ui-top-banner .inner .btns .unset {
  pointer-events: auto;
}

.location-wrap {
  padding: 30px 0;
}
.location-wrap .inner {
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.location-wrap .location {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
.location-wrap .location .home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 32px;
  height: 32px;
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
}
.location-wrap .group-share {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 14px;
}
.location-wrap .group-share .btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.layout-paging-wrap {
  margin: 40px 0;
}
.layout-paging-wrap.space-none {
  margin: 0;
}
.layout-paging-wrap .paging-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
.layout-paging-wrap .MuiButton-root:not(.unset) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 32px;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 4px;
  background-color: var(--white);
  font-size: var(--sizexs);
}
.layout-paging-wrap .MuiButton-root:not(.unset):not(.num) {
  border: 1px solid var(--neutral-300);
}
.layout-paging-wrap .MuiButton-root:not(.unset) [class*=icons-] {
  width: 18px;
  height: 18px;
}
.layout-paging-wrap .MuiButton-root:not(.unset).on {
  border: 1px solid var(--primary);
  font-weight: 700;
  font-size: var(--sizem);
  color: var(--primary);
}
.layout-paging-wrap.tablet {
  gap: 8px;
  margin: 24px 0;
  font-size: var(--sizexs);
}
.layout-paging-wrap.tablet .MuiButton-root:not(.unset) {
  width: 48px;
  height: 24px !important;
}
.layout-paging-wrap.tablet .MuiButton-root:not(.unset) [class*=icons-] {
  width: 12px;
  height: 12px;
}
.layout-paging-wrap.tablet .dash {
  color: var(--neutral-300);
}
.layout-paging-wrap.tablet .nums {
  color: var(--neutral-500);
}

.right-quick-wrap {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1010;
  right: 0;
  top: 40px;
}
.right-quick-wrap .right-quick-inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px;
}
.right-quick-wrap .right-quick-inner .icon-circle a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
  white-space: nowrap;
}
.right-quick-wrap .right-quick-inner .icon-circle a [class*=icons-] {
  position: relative;
  z-index: 100;
}
.right-quick-wrap .right-quick-inner .icon-circle a .txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  transition: 0.3s;
  position: absolute;
  right: -1px;
  top: -1px;
  height: calc(100% + 2px);
  border: 1px solid var(--primary);
  padding: 2px 36px 0 12px;
  background-color: var(--primary);
  border-radius: 20px;
  font-size: var(--sizexs2);
  color: var(--white);
  max-width: 0;
  opacity: 0;
  overflow: hidden;
}
.right-quick-wrap .right-quick-inner .icon-circle a:hover [class*=icons-] {
  background-color: var(--white);
}
.right-quick-wrap .right-quick-inner .icon-circle a:hover .txt {
  opacity: 1;
  max-width: 140px;
}

.thumb-card-wrap {
  width: 280px;
  max-width: 280px;
  min-width: 0;
}
.thumb-card-wrap[disabled],
.thumb-card-wrap[disabled] a,
.thumb-card-wrap[disabled] .item {
  cursor: default;
  pointer-events: none;
}
.thumb-card-wrap.full {
  width: 100%;
  max-width: 100%;
}
.thumb-card-wrap .item {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  display: inline-flex;
  gap: 20px;
  width: 100%;
}
@media (max-width: 768px) {
  .thumb-card-wrap .item {
    gap: 16px;
  }
}
.thumb-card-wrap .thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 1/1;
}
.thumb-card-wrap .thumb.close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: var(--neutral-900);
  opacity: 0.25;
  width: 100%;
  height: 100%;
}
.thumb-card-wrap .thumb img {
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  z-index: 1;
}
@media (max-width: 1024px) {
  .thumb-card-wrap .thumb {
    border-radius: 6px;
  }
}
.thumb-card-wrap .thumb .soldout {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  font-size: var(--sizexl);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 20px 24px;
  background-color: rgba(0, 0, 0, 0.68);
  color: var(--white);
  text-align: center;
}
.thumb-card-wrap .thumb .soldout .tit {
  font-size: 28px;
  font-weight: 800;
  word-break: keep-all;
}
.thumb-card-wrap .thumb .soldout .desc {
  font-size: var(--sizem);
  font-weight: 500;
  word-break: keep-all;
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .thumb-card-wrap .thumb .soldout {
    gap: 10px;
  }
  .thumb-card-wrap .thumb .soldout .tit {
    font-size: var(--sizel);
  }
  .thumb-card-wrap .thumb .soldout .desc {
    font-size: var(--sizexs);
  }
}
.thumb-card-wrap .thumb-info {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
}
.thumb-card-wrap .txt-wrap .desc {
  font-size: var(--sizes);
  color: var(--neutral-800);
  line-height: 1.4;
}
.thumb-card-wrap .txt-wrap .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  font-size: var(--sizel);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.thumb-card-wrap .nums-wrap {
  line-height: 1.4;
}
.thumb-card-wrap .nums-wrap .sale {
  font-size: var(--sizes);
  color: var(--neutral-500);
  text-decoration: line-through;
  line-height: 1.8;
}
.thumb-card-wrap .nums-wrap .sale.hide {
  opacity: 0;
}
.thumb-card-wrap .nums-wrap .sale.none {
  display: none;
}
.thumb-card-wrap .nums-wrap .price-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizel);
}
.thumb-card-wrap .nums-wrap .price-wrap > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.thumb-card-wrap .nums-wrap .price-wrap .percent {
  color: var(--primary);
  font-weight: 700;
}
.thumb-card-wrap .info-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 2px 8px;
  flex-wrap: wrap;
  max-width: 100%;
  font-size: var(--sizexs);
  overflow: hidden;
}
.thumb-card-wrap .info-wrap [class*=icons-] {
  width: 12px;
  height: 12px;
}
.thumb-card-wrap .info-wrap span,
.thumb-card-wrap .info-wrap i {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  white-space: nowrap;
}
.thumb-card-wrap .info-wrap span {
  gap: 2px;
}
.thumb-card-wrap .info-wrap i {
  padding: 4px;
  border-radius: 2px;
  color: var(--neutral-700);
  text-align: center;
  background-color: #f5f5f5;
}
.thumb-card-wrap .info-wrap i.active {
  background-color: #fff;
  font-weight: 500;
  border: 1px solid #ffa5b7;
  color: var(--primary);
  padding: 3px;
}
.thumb-card-wrap .info-wrap .desc-another {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  font-size: var(--sizes);
  letter-spacing: -0.24px;
  color: var(--neutral-800);
}
@media (max-width: 1024px) {
  .thumb-card-wrap .info-wrap .desc-another {
    font-size: var(--sizexs);
  }
}
@media (max-width: 1024px) {
  .thumb-card-wrap.res-row-none:not(.full), .thumb-card-wrap.res:not(.full) {
    width: 37vw;
  }
  .thumb-card-wrap.res-row-none .item, .thumb-card-wrap.res .item {
    gap: 16px;
  }
  .thumb-card-wrap.res-row-none .txt-wrap .desc, .thumb-card-wrap.res .txt-wrap .desc {
    font-size: var(--sizexs2);
  }
  .thumb-card-wrap.res-row-none .txt-wrap .tit, .thumb-card-wrap.res .txt-wrap .tit {
    font-size: var(--sizem);
  }
  .thumb-card-wrap.res-row-none .nums-wrap .sale, .thumb-card-wrap.res .nums-wrap .sale {
    font-size: var(--sizexs2);
  }
  .thumb-card-wrap.res-row-none .nums-wrap .price-wrap, .thumb-card-wrap.res .nums-wrap .price-wrap {
    font-size: var(--sizem);
  }
  .thumb-card-wrap.res-row-none .info-wrap, .thumb-card-wrap.res .info-wrap {
    max-width: 100%;
    font-size: var(--size2xs);
  }
}
@media (max-width: 768px) {
  .thumb-card-wrap.res-row-none, .thumb-card-wrap.res {
    min-width: 134px;
  }
  .thumb-card-wrap.res-row-none .item, .thumb-card-wrap.res .item {
    gap: 12px;
  }
  .thumb-card-wrap.res-row-none .txt-wrap .desc, .thumb-card-wrap.res .txt-wrap .desc {
    font-size: var(--sizexs);
  }
  .thumb-card-wrap.res-row-none .txt-wrap .tit, .thumb-card-wrap.res .txt-wrap .tit {
    font-size: 15px;
  }
  .thumb-card-wrap.res-row-none .nums-wrap .sale, .thumb-card-wrap.res .nums-wrap .sale {
    font-size: var(--size2xs);
  }
  .thumb-card-wrap.res-row-none .nums-wrap .price-wrap, .thumb-card-wrap.res .nums-wrap .price-wrap {
    font-size: var(--sizes);
  }
  .thumb-card-wrap.res-row-none .nums-wrap .price-wrap > div, .thumb-card-wrap.res .nums-wrap .price-wrap > div {
    gap: 6px;
  }
  .thumb-card-wrap.res-row-none .info-wrap, .thumb-card-wrap.res .info-wrap {
    font-size: var(--size2xs);
  }
}
@media (max-width: 768px) {
  .thumb-card-wrap.res-row-none.cont-has .item, .thumb-card-wrap.res.cont-has .item {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    gap: 12px;
  }
}
@media (max-width: 768px) {
  .thumb-card-wrap.res, .thumb-card-wrap.row {
    max-width: 100%;
  }
  .thumb-card-wrap.res:not(.cont-has) .thumb, .thumb-card-wrap.row:not(.cont-has) .thumb {
    flex: none;
    width: 37vw;
    height: 37vw;
  }
  .thumb-card-wrap.res .item, .thumb-card-wrap.row .item {
    flex-direction: row;
    align-items: center;
  }
  .thumb-card-wrap.res .item .thumb-info, .thumb-card-wrap.row .item .thumb-info {
    flex: 1 1;
    min-width: 0;
  }
  .thumb-card-wrap.res .item .txt-wrap .desc, .thumb-card-wrap.row .item .txt-wrap .desc {
    font-size: var(--sizexs);
  }
  .thumb-card-wrap.res .item .txt-wrap .tit, .thumb-card-wrap.row .item .txt-wrap .tit {
    font-size: 15px;
  }
  .thumb-card-wrap.res .item .nums-wrap .price-wrap, .thumb-card-wrap.row .item .nums-wrap .price-wrap {
    font-size: 15px;
  }
  .thumb-card-wrap.res .item .info-wrap, .thumb-card-wrap.row .item .info-wrap {
    gap: 6px;
    font-size: var(--size2xs);
  }
  .thumb-card-wrap.res .item .info-wrap i, .thumb-card-wrap.row .item .info-wrap i {
    padding: 2px;
  }
}
.thumb-card-wrap.limit {
  max-width: 500px;
  width: 100%;
}
.thumb-card-wrap.limit .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.thumb-card-wrap.limit .thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  max-width: 250px;
  height: 320px;
}
.thumb-card-wrap.limit .thumb .ui-limit {
  position: absolute;
  left: 14px;
  top: 14px;
}
.thumb-card-wrap.limit .limit-txt {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
  flex: none;
  margin-bottom: 40px;
}
.thumb-card-wrap.limit .limit-txt .icon {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 15px;
  background-color: var(--neutral-900);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.thumb-card-wrap.limit .limit-txt .info {
  font-size: 30px;
  font-weight: 700;
}
.thumb-card-wrap.limit .txt-wrap .desc {
  margin-bottom: 6px;
}
@media (max-width: 1024px) {
  .thumb-card-wrap.limit.res {
    max-width: 100%;
    width: 100%;
  }
  .thumb-card-wrap.limit.res .item {
    gap: 16px;
  }
  .thumb-card-wrap.limit.res .thumb {
    width: 150px;
    height: 190px;
    flex: none;
  }
  .thumb-card-wrap.limit.res .thumb .ui-limit {
    left: 8px;
    top: 8px;
  }
  .thumb-card-wrap.limit.res .thumb-info {
    gap: 6px;
  }
  .thumb-card-wrap.limit.res .limit-txt {
    gap: 4px;
    margin-bottom: 12px;
  }
  .thumb-card-wrap.limit.res .limit-txt .icon {
    padding: 3px 7px;
    font-size: var(--size3xs);
  }
  .thumb-card-wrap.limit.res .limit-txt .info {
    font-size: 24px;
  }
  .thumb-card-wrap.limit.res .txt-wrap .desc {
    font-size: var(--sizexs);
    margin-bottom: 0;
  }
  .thumb-card-wrap.limit.res .txt-wrap .tit {
    font-size: 15px;
  }
  .thumb-card-wrap.limit.res .nums-wrap .sale {
    font-size: var(--sizexs);
    line-height: 1;
  }
  .thumb-card-wrap.limit.res .nums-wrap .price-wrap {
    font-size: 15px;
  }
}
@media (max-width: 768px) {
  .thumb-card-wrap.limit.res {
    max-width: 100%;
  }
  .thumb-card-wrap.limit.res .thumb {
    width: 37vw;
    height: 37vw;
    min-height: 165px;
  }
}
.thumb-card-wrap.is-class {
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--white); /* elevation2 */
  box-shadow: 0px 8px 8px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -4px rgba(0, 0, 0, 0.12);
}
.thumb-card-wrap.is-class .item {
  gap: 0;
}
.thumb-card-wrap.is-class .item .thumb-info {
  padding: 28px 20px;
}
@media (max-width: 1024px) {
  .thumb-card-wrap.is-class .item .thumb-info {
    padding: 16px 12px;
  }
}
.thumb-card-wrap.is-class .thumb {
  border-radius: 12px 12px 0 0;
}
.thumb-card-wrap .info-class {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--neutral-200);
  padding-top: 12px;
  font-size: var(--sizes);
  color: var(--neutral-800);
}
@media (max-width: 1024px) {
  .thumb-card-wrap .info-class {
    padding-top: 6px;
  }
}
@media (max-width: 768px) {
  .thumb-card-wrap .info-class {
    font-size: var(--sizexs);
  }
}
.thumb-card-wrap .info-class > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 2px;
}
.thumb-card-wrap .info-class > div.icon-has::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: var(--neutral-500);
}
.thumb-card-wrap .info-class .time::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/bx_time.svg");
  -webkit-mask-position: 0 0;
}
.thumb-card-wrap .info-class .person::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/person.svg");
  -webkit-mask-position: 0 0;
}
.thumb-card-wrap.event .item {
  gap: 0;
}
.thumb-card-wrap.event .thumb {
  aspect-ratio: 1/0.48;
  max-height: 184px;
  border-radius: 10px;
}
.thumb-card-wrap.event .thumb-info {
  padding: 16px 6px;
}
.thumb-card-wrap.event .thumb-info .tit {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--neutral-800);
}
.thumb-card-wrap.event .thumb-info .desc {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.3px;
}
.thumb-card-wrap.event .thumb-info,
.thumb-card-wrap.event .txt-wrap {
  gap: 4px;
}
.thumb-card-wrap.event .txt-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
}
.thumb-card-wrap.event .info-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.thumb-card-wrap.event .info-event .date {
  color: var(--neutral-500);
  font-size: var(--sizes);
  line-height: 1.7;
  letter-spacing: -0.28px;
}
.thumb-card-wrap.event .info-event .members {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 2px 8px;
  border: 1px solid var(--neutral-800);
  color: var(--neutral-800);
  font-size: var(--sizexs2);
  letter-spacing: -0.26px;
}
@media (max-width: 1024px) {
  .thumb-card-wrap.event .thumb-info {
    padding: 8px 6px;
  }
  .thumb-card-wrap.event .thumb-info .tit {
    font-size: var(--sizem);
  }
  .thumb-card-wrap.event .thumb-info .desc {
    font-size: var(--sizes);
  }
  .thumb-card-wrap.event .info-event .date {
    font-size: var(--sizexs2);
  }
}

.ui-popper-collapse {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  z-index: 1000;
  overflow: hidden;
}
.ui-popper-collapse .ui-popper-inner {
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--white);
}
.ui-popper-collapse .ui-popper-inner .items {
  color: var(--neutral-700);
  line-height: 2;
}
.ui-popper-collapse .ui-popper-inner .items a {
  display: block;
  font-size: var(--sizem);
}
.ui-popper-collapse .ui-popper-inner .items dt {
  color: var(--neutral-900);
  font-weight: 700;
  font-size: var(--sizel);
  margin-bottom: 8px;
}
.ui-popper-collapse .ui-popper-inner .items dd {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  column-gap: 20px;
}
.ui-popper-collapse.right {
  left: initial;
  right: 0;
}
.ui-popper-collapse.right2 {
  left: inherit;
  top: 0;
  right: calc(100% + 8px);
}

.ui-popper-wrap {
  position: relative;
}
.ui-popper-wrap .popper-btn [class*=icons-] {
  transition: transform 0.2s;
}
.ui-popper-wrap .popper-btn.gap {
  gap: 4px;
}
.ui-popper-wrap.on .popper-btn [class*=icons-] {
  transform: rotate(180deg);
}
.ui-popper-wrap:not(.bubble) .ui-popper-collapse {
  /* elevation4 */
  box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.08), 0px 6px 12px -6px rgba(0, 0, 0, 0.12);
}
.ui-popper-wrap:not(.bubble) .ui-popper-collapse .ui-popper-inner {
  margin: 1px;
  padding: 16px 24px;
  box-shadow: 0 0 0 1px var(--neutral-700);
}
.ui-popper-wrap.large .ui-popper-collapse {
  width: calc(100% + 1px);
  top: 100%;
  left: -1px;
}
.ui-popper-wrap.large .ui-popper-collapse .ui-popper-inner {
  padding: 32px;
}
.ui-popper-wrap.bubble.on .popper-btn {
  font-weight: 700;
}
.ui-popper-wrap.bubble .ui-popper-collapse {
  top: calc(100% + 10px);
  border-radius: 6px;
  /* elevation8 */
  box-shadow: 0px 18px 88px -4px rgba(0, 0, 0, 0.14), 0px 8px 28px -6px rgba(0, 0, 0, 0.12);
}
.ui-popper-wrap.bubble .ui-popper-collapse .ui-popper-inner {
  margin: 1px;
  padding: 8px 16px;
  box-shadow: 0 0 0 1px var(--neutral-200);
}

.ui-banner-outer .banner-tit {
  font-size: var(--sizel);
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  .ui-banner-outer .banner-tit {
    font-size: var(--sizem);
  }
}

.ui-table-common {
  margin-top: 20px;
}
.ui-table-common .table {
  border-top: 1px solid var(--neutral-500);
  width: 100%;
}
.ui-table-common .tr {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}
.ui-table-common .thead .th {
  height: 58px;
  font-size: var(--sizexs2);
  font-weight: 700;
}
.ui-table-common .th,
.ui-table-common .td {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex: none;
  min-width: 0;
  position: relative;
  border-bottom: 1px solid var(--neutral-200);
  overflow: hidden;
  padding: 16px 0;
}
.ui-table-common .th > div,
.ui-table-common .td > div {
  overflow: hidden;
  width: 100%;
}
.ui-table-common .th .flex-none,
.ui-table-common .td .flex-none {
  height: auto;
  padding: 0;
  border: 0;
}
@media (min-width: calc(1024px + 1px)) {
  .ui-table-common .th > div:not(.flex-none), .ui-table-common .th.fill,
  .ui-table-common .td > div:not(.flex-none),
  .ui-table-common .td.fill {
    width: 100%;
    flex: 1 1;
  }
}
.ui-table-common .th.fill,
.ui-table-common .td.fill {
  width: 100%;
  flex: 1 1;
}
.ui-table-common:not(.left) .th,
.ui-table-common:not(.left) .td {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
}
.ui-table-common .left {
  text-align: left;
  justify-content: left;
}
.ui-table-common .center {
  justify-content: center;
  text-align: center;
}
.ui-table-common .tr .td {
  font-size: var(--sizes);
  min-height: 64px;
}
.ui-table-common .tr .td .inner {
  width: 100%;
}
.ui-table-common.td-s .tr .td {
  min-height: 54px;
  padding-left: 8px;
  padding-right: 8px;
}
.ui-table-common .tit {
  line-height: 1.7;
}
@media (max-width: 1024px) {
  .ui-table-common .tit {
    margin: 4px 0;
  }
}
.ui-table-common.res-font-size .tr .td {
  font-size: var(--sizexs);
}
.ui-table-common .date {
  font-size: var(--sizexs);
  color: var(--neutral-700);
}
.ui-table-common .use {
  font-size: var(--sizexs2);
  font-weight: 700;
}
.ui-table-common .benefit {
  font-size: var(--sizel);
}
.ui-table-common .desc {
  font-size: var(--sizexs);
  color: var(--neutral-700);
  line-height: 1.3;
}
.ui-table-common .ellipsis {
  width: 100%;
}
@media (max-width: 1024px) {
  .ui-table-common {
    margin-top: 16px;
  }
  .ui-table-common .thead {
    display: none;
  }
  .ui-table-common .tr .td {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    line-height: 1.4;
  }
  .ui-table-common .tr .ellipsis {
    text-overflow: initial;
    white-space: break-spaces;
    overflow: visible;
    line-height: 1.7;
  }
}

.icon-round-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  color: var(--neutral-700);
  font-weight: 700;
  font-size: var(--sizexs);
  background-color: var(--neutral-100);
}
.icon-round-circle.save {
  color: var(--primary);
  background-color: #fff2f4;
}

.ui-table-wrap table {
  border-top: 1px solid var(--neutral-500);
  width: 100%;
}
.ui-table-wrap th {
  background-color: var(--neutral-100);
  width: 100px;
  font-size: var(--sizexs2);
  letter-spacing: -0.5px;
}
.ui-table-wrap th:not(.w-small) {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}
@media (max-width: 1024px) {
  .ui-table-wrap th:not(.w-small) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }
}
@media (max-width: 768px) {
  .ui-table-wrap th:not(.w-small) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
  }
}
.ui-table-wrap th small {
  font-weight: normal;
  font-size: var(--sizexs);
}
.ui-table-wrap td {
  font-size: var(--sizes);
  color: var(--neutral-700);
  line-height: 1.7;
}
.ui-table-wrap td .icons-ds_cash {
  margin: -1px 0 0 1px;
}
@media (max-width: 1024px) {
  .ui-table-wrap td {
    font-size: var(--sizexs);
  }
}
.ui-table-wrap th,
.ui-table-wrap td {
  height: 68px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--neutral-200);
}
.ui-table-wrap.s-small th,
.ui-table-wrap.s-small td {
  padding: 10px;
}
@media (max-width: 768px) {
  .ui-table-wrap th,
  .ui-table-wrap td {
    padding: 10px;
  }
}
.ui-table-wrap .res-th {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  white-space: nowrap;
}
.ui-table-wrap .res-th .tit {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 4px;
}
.ui-table-wrap .res-th .tit.br {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .ui-table-wrap .res-th .tit {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
  }
}
.ui-table-wrap.completed td {
  padding-left: 26px;
  font-size: var(--sizes);
  color: var(--neutral-600);
}

.ui-table-caution {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  font-size: var(--sizexs);
  color: var(--neutral-500);
}
@media (max-width: 1024px) {
  .ui-table-caution {
    padding: 8px 0 0;
  }
}

.ui-info-caution {
  background-color: var(--neutral-100);
  border-top: 1px solid var(--neutral-500);
  padding: 20px;
}
.ui-info-caution dl {
  padding-bottom: 20px;
}
.ui-info-caution dt {
  margin-bottom: 16px;
  font-size: var(--sizexs2);
  font-weight: 700;
}
.ui-info-caution dd {
  position: relative;
  color: var(--neutral-700);
  font-size: var(--sizexs);
  padding-left: 10px;
  line-height: 1.6;
}
.ui-info-caution dd::before {
  position: absolute;
  left: 0;
  top: 8px;
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: var(--neutral-700);
}

.ui-backdrop {
  z-index: 1001;
}
.ui-backdrop.product {
  background: transparent;
}

.ui-product-list .inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 12px;
}
.ui-product-list .product-items,
.ui-product-list .product-items a {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 16px;
}
.ui-product-list .product-thumb {
  flex: none;
  width: 70px;
  height: 70px;
  min-width: 0;
  background-color: rgba(0, 0, 0, 0.06);
}
.ui-product-list .product-txt {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 5px 0;
  font-weight: 600;
}
.ui-product-list .product-txt .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  max-height: 36px;
  font-size: var(--sizes);
}
.ui-product-list .product-txt .price {
  color: var(--neutral-500);
  font-size: var(--sizexs);
}

.ui-right-bottom {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  bottom: 12px;
  right: 12px;
}
.ui-right-bottom .MuiButtonBase-root {
  border-radius: 100%;
  /* elevation4 */
  box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.08), 0px 6px 12px -6px rgba(0, 0, 0, 0.12);
}
.ui-right-bottom .MuiButtonBase-root.chatbot {
  background-color: transparent !important;
  line-height: 0;
}
.ui-right-bottom.on {
  position: absolute;
  bottom: calc(100% + 20px);
}
@media (max-width: 1024px) {
  .ui-right-bottom.on {
    bottom: calc(100% + 10px);
  }
}
@media (max-width: 1024px) {
  .footer-wrap .ui-right-bottom:not(.on) {
    bottom: calc(var(--floating-bottom) + 10px);
  }
  .footer-wrap.product-detail .ui-right-bottom:not(.on) {
    bottom: calc(var(--product-detail-bottom) + 10px);
  }
  .footer-wrap.product-detail.no-option .ui-right-bottom:not(.on) {
    bottom: calc(var(--product-detail-no-option-bottom) + 10px);
  }
}

.ui-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 60px 0;
  font-size: var(--sizexs2);
  font-weight: 700;
  border-bottom: 1px solid var(--neutral-300);
  background-color: var(--neutral-100);
}
.ui-empty.center-type {
  text-align: center;
  line-height: 1.4;
}
.ui-empty .desc {
  font-weight: 400;
  font-size: var(--sizexs);
}

.ui-empty-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 20px 0 40px;
  padding: 250px 0;
  background-color: var(--neutral-100);
}
.ui-empty-list .txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  font-size: 24px;
  font-weight: 500;
  color: var(--neutral-500);
}
.ui-empty-list .txt [class*=icons-] {
  width: 28px;
  height: 28px;
  background-color: var(--neutral-500);
}
@media (max-width: 1024px) {
  .ui-empty-list {
    margin: 0;
    padding: 120px 0;
  }
  .ui-empty-list .txt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    font-size: var(--sizem);
  }
  .ui-empty-list .txt [class*=icons-] {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 768px) {
  .ui-empty-list {
    padding: 100px 0;
  }
}

.ui-caution-txt {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  font-size: var(--sizexs);
  color: var(--neutral-500);
  line-height: 1.4;
}
.ui-caution-txt:not(.border-none) {
  border-top: 1px solid var(--neutral-200);
}
@media (max-width: 1024px) {
  .ui-caution-txt {
    padding: 8px 0;
  }
}

.ui-caution-alert-txt {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  font-size: var(--sizexs);
  color: var(--primary);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .ui-caution-alert-txt {
    padding-top: 8px;
  }
}

.ui-round-icons {
  display: inline-flex;
  height: 18px;
  padding: 0px 8px;
  border-radius: 18px;
  border: 1px solid var(--primary);
  background-color: var(--white);
  text-align: center;
  color: var(--primary);
  font-size: var(--size3xs);
  line-height: 18px;
}

.ui-sticker {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  display: inline-flex;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  font-size: var(--sizexs2);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  line-height: 1;
}
.ui-sticker.r {
  border-radius: 0 0 12px 0;
}
.ui-sticker > span {
  padding: 8px 10px 6.5px;
}
.ui-sticker .type0 {
  background-color: #ff8311;
}
.ui-sticker .type1 {
  background-color: #5c38c8;
}
.ui-sticker .type2 {
  background-color: var(--primary);
}
@media (max-width: 768px) {
  .ui-sticker {
    font-size: var(--size3xs);
  }
  .ui-sticker.r {
    border-radius: 0 0 6px 0;
  }
  .ui-sticker > span {
    padding: 6px 10px 4.5px;
  }
}

.ui-limit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.ui-limit::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
}
.ui-limit.time::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/time_limit.svg");
}
.ui-limit.limit::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/limit.svg");
}
.ui-limit .inner {
  margin-left: -12px;
  padding: 5px 12px 5px 18px;
  border-radius: 0 14px 14px 0;
  background-color: var(--white);
  font-size: var(--sizes);
  font-weight: 600;
}
@media (max-width: 1024px) {
  .res .ui-limit::before {
    width: 20px;
    height: 20px;
  }
  .res .ui-limit .inner {
    margin-left: -6px;
    padding: 2px 6px 2px 10px;
    font-size: var(--size3xs);
  }
}

.ui-more-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizel);
  white-space: nowrap;
}
.ui-more-btn::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/lo_arrow.svg");
  -webkit-mask-position: right center;
  content: "";
  width: 18px;
  height: 15px;
  background-color: var(--neutral-800);
}
@media (max-width: 1024px) {
  .ui-more-btn {
    font-size: var(--sizes);
  }
  .ui-more-btn::after {
    width: 11px;
    height: 10px;
  }
}

.ui-board-wrap .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding-bottom: 18px;
}
.ui-board-wrap .title .tit {
  font-size: 24px;
  font-weight: 600;
}
.ui-board-wrap .title .more {
  color: var(--neutral-700);
  font-size: var(--sizem);
}
@media (max-width: 1024px) {
  .ui-board-wrap .title {
    padding-bottom: 8px;
  }
  .ui-board-wrap .title .tit {
    font-size: 15px;
  }
  .ui-board-wrap .title .more {
    font-size: var(--size2xs);
  }
}

.ui-board {
  border-top: 1px solid var(--neutral-900);
}
.ui-board .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  display: block;
  width: 100%;
  padding: 12px 0;
  letter-spacing: -0.32px;
  border-bottom: 1px solid var(--neutral-300);
  color: var(--neutral-600);
}
@media (max-width: 1024px) {
  .ui-board .item {
    padding: 6px 0;
    font-size: var(--size2xs);
  }
}

.ui-sub-title {
  text-align: center;
  padding-bottom: 60px;
}
.ui-sub-title .tit {
  font-size: 48px;
  font-weight: 700;
}
.ui-sub-title .desc {
  font-size: 21px;
  color: var(--neutral-700);
  line-height: 1.2;
  margin-top: 16px;
}
.ui-sub-title.search-title-wrap {
  padding-top: 100px;
  padding-bottom: 30px;
}
.ui-sub-title.search-title-wrap .tit {
  font-size: var(--size3xl);
}
.ui-sub-title.search-title-wrap .search-txt1 {
  font-weight: 700;
  color: var(--primary);
}
.ui-sub-title.search-title-wrap .search-txt2 {
  font-weight: 600;
}
.ui-sub-title.search-title-wrap .num {
  font-weight: 500;
}
@media (max-width: 1024px) {
  .ui-sub-title.search-title-wrap {
    padding-top: 36px;
    padding-bottom: 30px;
  }
  .ui-sub-title.search-title-wrap .tit {
    font-size: var(--sizexl);
  }
}
@media (max-width: 768px) {
  .ui-sub-title.search-title-wrap {
    padding-top: 44px;
  }
}
@media (max-width: 1024px) {
  .ui-sub-title {
    padding-top: 32px;
    padding-bottom: 30px;
  }
  .ui-sub-title .tit {
    font-size: var(--size2xl);
  }
  .ui-sub-title .desc {
    margin-top: 4px;
    font-size: var(--sizexs);
  }
}
@media (max-width: 768px) {
  .ui-sub-title {
    padding: 24px 0;
  }
  .ui-sub-title:not(.res-none, .search-title-wrap) {
    display: none;
  }
}

.ui-sub-title-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin: 60px 0 16px;
}
.ui-sub-title-middle > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
.ui-sub-title-middle .tit {
  font-size: var(--size2xl);
  font-weight: 700;
  line-height: 1.4;
}
.ui-sub-title-middle .btns {
  margin-left: auto;
}
@media (max-width: 1024px) {
  .ui-sub-title-middle {
    margin-top: 24px;
  }
  .ui-sub-title-middle .tit {
    font-size: var(--sizem);
  }
}

.ui-sub-page-info {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  padding: 31px 0 32px;
  border-top: 2px solid var(--neutral-900);
  border-bottom: 1px solid var(--neutral-300);
}
@media (max-width: 768px) {
  .ui-sub-page-info {
    margin-top: 24px;
  }
}
.ui-sub-page-info .desc {
  font-size: var(--sizel);
  color: var(--neutral-700);
  font-weight: 500;
  line-height: 1.3;
}
.ui-sub-page-info .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  font-size: var(--size3xl);
  font-weight: 700;
  line-height: 1.4;
}
.ui-sub-page-info .date-tit {
  font-size: var(--sizel);
  color: var(--neutral-600);
  line-height: 1.5;
}
.ui-sub-page-info .member {
  flex: none;
  text-align: center;
  padding: 16px 14px;
  border: 1px solid var(--neutral-900);
}
.ui-sub-page-info .member .tit {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.ui-sub-page-info .member .num {
  font-size: var(--sizel);
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary);
}
@media (max-width: 1024px) {
  .ui-sub-page-info .member {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 14px;
    margin-left: auto;
    padding: 0 14px;
  }
  .ui-sub-page-info .member .tit,
  .ui-sub-page-info .member .num {
    font-size: var(--sizexs2);
  }
}
.ui-sub-page-info.has-member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 30px;
}
.ui-sub-page-info.has-member .inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 1024px) {
  .ui-sub-page-info.has-member {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}
@media (max-width: 1024px) {
  .ui-sub-page-info {
    padding: 26px 0 16px;
  }
  .ui-sub-page-info .desc {
    font-size: var(--sizes);
  }
  .ui-sub-page-info .tit {
    font-size: var(--sizexl);
  }
  .ui-sub-page-info .date-tit {
    font-size: var(--sizexs2);
    line-height: 1.4;
  }
}

.ui-experience-divider {
  padding: 0;
  border-bottom: none;
}

.ui-sub-page-view {
  padding: 60px 0;
  font-size: var(--sizel);
  line-height: 1.7;
}
@media (max-width: 1024px) {
  .ui-sub-page-view {
    padding: 32px 0 30px;
  }
}
.ui-sub-page-view .center {
  text-align: center;
}
@media (max-width: 1024px) {
  .ui-sub-page-view {
    font-size: var(--sizes);
  }
}

#SubEventDetailView.ui-sub-page-view {
  line-height: 0 !important;
}

.ui-list-common-wrap {
  padding-bottom: 100px;
}
.ui-list-common-wrap .layout-paging-wrap {
  margin: 60px 0 0;
}
@media (max-width: 1024px) {
  .ui-list-common-wrap {
    padding-bottom: 50px;
  }
  .ui-list-common-wrap .layout-res-grid {
    padding-bottom: 0;
  }
  .ui-list-common-wrap .layout-paging-wrap {
    margin: 30px 0;
  }
}

.ui-rank-wrap .ui-rank-num {
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .ui-rank-wrap .ui-rank-num {
    margin-bottom: 12px;
  }
}
.ui-rank-wrap .ui-rank-num > span {
  font-size: var(--size2xl);
  font-weight: 700;
}
.ui-rank-wrap .ui-rank-num.on > span {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  display: inline-flex;
  gap: 2px;
  color: var(--primary);
}
.ui-rank-wrap .ui-rank-num.on > span::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/rank.svg");
  -webkit-mask-position: 0 0;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: var(--primary);
}
@media (max-width: 1024px) {
  .ui-rank-wrap .ui-rank-num > span {
    font-size: 15px;
  }
  .ui-rank-wrap .ui-rank-num.on > span::before {
    width: 14px;
    height: 14px;
  }
}

.ui-category-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  padding: 20px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin: 80px 0 60px;
}
@media (max-width: 1024px) {
  .ui-category-title {
    margin: 30px 0 24px;
    padding: 16px 0;
    font-size: var(--sizes);
  }
}
.ui-category-title.type1 {
  background-color: #5023d5;
}
.ui-category-title.type2 {
  background-color: #345bdf;
}
.ui-category-title.type3 {
  background-color: #27b7f4;
}
.ui-category-title.type4 {
  background-color: #09c9c9;
}
.ui-category-title.type5 {
  background-color: #3bac68;
}

.ui-lnb-menu {
  width: 240px;
  border-radius: 8px;
  border: 1px solid var(--neutral-500);
  overflow: hidden;
}
.ui-lnb-menu dl {
  border-bottom: 1px solid var(--neutral-200);
}
@media (max-width: 1304px) {
  .ui-lnb-menu {
    width: 20vw;
  }
}
@media (max-width: 1024px) {
  .ui-lnb-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
    width: auto;
    border: 0;
    border-radius: 0;
  }
}
.ui-lnb-menu dt {
  font-size: var(--sizel);
  font-weight: 700;
  padding: 15px 16px;
  line-height: 1.4;
}
.ui-lnb-menu dd {
  font-size: var(--sizes);
}
.ui-lnb-menu dd li {
  color: var(--neutral-700);
  font-weight: 400;
}
.ui-lnb-menu dd li,
.ui-lnb-menu dd a {
  display: block;
}
.ui-lnb-menu dd li.on,
.ui-lnb-menu dd a.on {
  background-color: var(--neutral-100);
  color: var(--neutral-900);
  font-weight: 500;
}
.ui-lnb-menu dd li.on a::after,
.ui-lnb-menu dd a.on a::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/lnb_ar.svg");
  -webkit-mask-position: 0 0;
  content: "";
  width: 18px;
  height: 18px;
  background-color: var(--neutral-900);
}
.ui-lnb-menu dd a:hover {
  text-decoration: underline;
  color: var(--neutral-900);
}
.ui-lnb-menu dd .depth1 > li {
  padding: 15px 8px 15px 16px;
  border-top: 1px solid var(--neutral-100);
}
.ui-lnb-menu dd .depth1 > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.ui-lnb-menu .btn-area {
  grid-column: 1/span 2;
  font-size: var(--sizexs);
}
@media (max-width: 1024px) {
  .ui-lnb-menu {
    padding: 24px 0;
  }
  .ui-lnb-menu dl {
    border-bottom: 0;
  }
  .ui-lnb-menu dt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    font-size: 17px;
    padding: 0;
    height: 56px;
    border-bottom: 1px solid var(--neutral-400);
  }
  .ui-lnb-menu dd {
    border-bottom: 0;
    font-size: 15px;
    color: var(--neutral-600);
  }
  .ui-lnb-menu dd li,
  .ui-lnb-menu dd a {
    font-weight: 400;
  }
  .ui-lnb-menu dd li.on,
  .ui-lnb-menu dd a.on {
    background-color: transparent;
  }
  .ui-lnb-menu dd li.on a::after,
  .ui-lnb-menu dd a.on a::after {
    display: none;
  }
  .ui-lnb-menu dd .depth1 {
    margin-top: 8px;
  }
  .ui-lnb-menu dd .depth1 > li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 0;
    border-top: 0;
    height: 36px;
  }
}

@media (max-width: 1024px) {
  .ui-member-info-wrap {
    padding: 24px 0;
  }
}
.ui-member-info-wrap .member-info-top,
.ui-member-info-wrap .member-info-bottom {
  white-space: nowrap;
  word-break: break-all;
}
@media (max-width: 360px) {
  .ui-member-info-wrap .member-info-top,
  .ui-member-info-wrap .member-info-bottom {
    white-space: initial;
  }
}
.ui-member-info-wrap .member-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 80px;
}
@media (max-width: 768px) {
  .ui-member-info-wrap .member-info-top {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}
.ui-member-info-wrap .member-info-top > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.ui-member-info-wrap .member-info-top .member-info-tit {
  gap: 4px;
  font-size: 24px;
}
.ui-member-info-wrap .member-info-top .member-info-desc > div,
.ui-member-info-wrap .member-info-top .member-info-desc .cont {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.ui-member-info-wrap .member-info-top .member-info-desc > div {
  gap: 10px;
  padding: 0 24px;
}
.ui-member-info-wrap .member-info-top .member-info-desc > div:not(:first-child) {
  border-left: 1px solid var(--neutral-300);
}
.ui-member-info-wrap .member-info-top .member-info-desc .label {
  font-weight: 700;
  font-size: var(--sizem);
}
.ui-member-info-wrap .member-info-top .member-info-desc .cont {
  gap: 4px;
  font-size: var(--sizel);
}
.ui-member-info-wrap .member-info-top .member-info-desc .cont .num {
  font-weight: 700;
  font-family: Verdana;
}
.ui-member-info-wrap .member-info-top .member-info-desc [class*=icons-] {
  background-color: var(--primary) !important;
}
@media (max-width: 768px) {
  .ui-member-info-wrap .member-info-top .member-info-desc {
    height: 48px;
  }
}
@media (max-width: 1024px) {
  .ui-member-info-wrap .member-info-top {
    height: 60px;
  }
  .ui-member-info-wrap .member-info-top .member-info-tit {
    font-size: var(--sizel);
  }
}
@media (max-width: 768px) {
  .ui-member-info-wrap .member-info-top {
    height: auto;
  }
}
.ui-member-info-wrap .member-info-bottom {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  flex-wrap: wrap;
  border-radius: 8px;
  border: 1px solid var(--neutral-300);
  background-color: var(--white);
  overflow: hidden;
}
.ui-member-info-wrap .member-info-bottom > div {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  flex: 1 1;
  text-align: center;
}
@media (max-width: 768px) {
  .ui-member-info-wrap .member-info-bottom > div {
    min-width: 50%;
  }
  .ui-member-info-wrap .member-info-bottom > div:nth-child(even) {
    border-right: 1px solid var(--neutral-300);
  }
}
.ui-member-info-wrap .member-info-bottom > div.front {
  width: 166px;
  padding: 16px 24px;
  background-color: var(--neutral-100);
}
.ui-member-info-wrap .member-info-bottom > div.front .tit {
  font-size: var(--sizem);
}
@media (max-width: 1024px) {
  .ui-member-info-wrap .member-info-bottom > div.front {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    min-width: 100%;
  }
}
.ui-member-info-wrap .member-info-bottom > div .tit {
  font-weight: 700;
  font-size: var(--sizexs2);
}
.ui-member-info-wrap .member-info-bottom > div .desc {
  font-size: var(--sizes);
  color: var(--neutral-700);
}
@media (max-width: 768px) {
  .ui-member-info-wrap .member-info-bottom > div .desc {
    font-size: var(--sizexs);
  }
}
.ui-member-info-wrap .member-info-bottom > div .link-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-flex;
  height: 32px;
  padding: 0px 16px;
  font-size: var(--sizexs2);
  border-radius: 4px;
  border: 1px solid var(--neutral-300);
  background-color: var(--white);
  font-weight: 700;
}

.ui-caution-small {
  color: var(--neutral-500);
  font-size: var(--sizexs);
  line-height: 1.6;
  margin: 16px 0;
}
.ui-caution-small.space-bottom {
  margin-bottom: 20px;
}
.ui-caution-small.space-s {
  margin: 8px 0;
}

.ui-search-control-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  white-space: nowrap;
}
.ui-search-control-wrap > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.ui-search-control-wrap .select-wrap {
  flex: 1 1;
}
.ui-search-control-wrap .select-init {
  width: 100%;
}
.ui-search-control-wrap .ui-daterange .MuiTextField-root {
  width: 100%;
}
@media (max-width: 1304px) {
  .ui-search-control-wrap {
    flex-direction: column;
    align-items: initial;
  }
  .ui-search-control-wrap .ui-daterange {
    width: 100%;
  }
  .ui-search-control-wrap .btn-seach {
    width: 160px;
    margin: 0 auto;
  }
}
@media (max-width: 1024px) {
  .ui-search-control-wrap {
    margin-top: 24px;
  }
}
@media (max-width: 768px) {
  .ui-search-control-wrap .select-wrap {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
  }
}

.ui-daterange {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  font-size: var(--sizes);
}

.ui-receipt-download {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  display: inline-flex;
  flex-wrap: wrap;
  padding: 20px 0;
  border: 1px solid var(--neutral-300);
  border-top: 1px solid var(--neutral-500);
}
@media (max-width: 1024px) {
  .ui-receipt-download {
    display: flex;
    row-gap: 40px;
  }
}
.ui-receipt-download > div {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  flex: 1 1;
  width: 188px;
}
.ui-receipt-download > div .tit {
  font-size: var(--sizexs2);
  font-weight: 700;
  line-height: 1.4;
}
.ui-receipt-download > div .btn .MuiButtonBase-root {
  padding: 0 4px 0 8px !important;
}
@media (min-width: calc(1024px + 1px)) {
  .ui-receipt-download > div:not(:last-child) {
    border-right: 1px solid var(--neutral-300);
  }
}
@media (max-width: 1024px) {
  .ui-receipt-download > div {
    width: 50%;
  }
  .ui-receipt-download > div:not(:last-child) {
    border-right: 1px solid var(--neutral-300);
  }
  .ui-receipt-download.col-3 > div {
    flex: none;
    width: 33.3%;
    border-right: 1px solid var(--neutral-300);
  }
  .ui-receipt-download.col-3 > div:nth-child(3n) {
    border-right: 0;
  }
}
@media (max-width: 768px) {
  .ui-receipt-download > div, .ui-receipt-download.col-3 > div {
    width: 50%;
    border-right: 1px solid var(--neutral-300) !important;
  }
  .ui-receipt-download > div:nth-child(2n), .ui-receipt-download.col-3 > div:nth-child(2n) {
    border-right: 0 !important;
  }
}

.ui-cash-detailed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}
.ui-cash-detailed > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 16px;
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
}
.ui-cash-detailed > div > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}
.ui-cash-detailed > div .tit {
  font-weight: 700;
  font-size: var(--sizexs2);
}
.ui-cash-detailed > div .desc {
  font-size: var(--sizel);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .ui-cash-detailed {
    margin-top: 24px;
  }
  .ui-cash-detailed > div {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 80px;
  }
  .ui-cash-detailed > div .tit {
    font-size: var(--sizexs);
  }
}

.ui-thumb-list-common {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px 50px;
  gap: 40px 50px;
}
.ui-thumb-list-common > div {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1024px) {
  .ui-thumb-list-common {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
  }
  .ui-thumb-list-common > div {
    gap: 8px;
  }
}
@media (max-width: 768px) {
  .ui-thumb-list-common {
    grid-template-columns: repeat(2, 1fr);
  }
}

.qna-wrap {
  border-top: 1px solid var(--neutral-500);
}
.qna-wrap .MuiAccordion-root {
  border-bottom: 1px solid var(--neutral-300);
}
.qna-wrap .MuiAccordion-root.Mui-expanded {
  margin: 0;
}
@media (max-width: 1304px) {
  .qna-wrap {
    margin-left: var(--page-space);
  }
}
@media (max-width: 1024px) {
  .qna-wrap {
    margin: 0;
  }
}

.ui-review-common {
  border-bottom: 1px solid var(--neutral-300);
}
.ui-review-common .review-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 24px;
  padding: 16px 0;
}
@media (max-width: 1024px) {
  .ui-review-common .review-info {
    gap: 10px;
  }
}
.ui-review-common .review-info > div, .ui-review-common .review-info > a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 1024px) {
  .ui-review-common .review-info > div, .ui-review-common .review-info > a {
    gap: 10px;
  }
}
.ui-review-common .review-info .thumb {
  flex: none;
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .ui-review-common .review-info .thumb {
    width: 60px;
    height: 60px;
  }
}
.ui-review-common .review-info .txt {
  min-width: 0;
  overflow: hidden;
}
.ui-review-common .review-info .txt .desc {
  font-size: var(--sizexs);
  color: var(--neutral-500);
  line-height: 1.6;
}
.ui-review-common .review-info .txt .tit {
  font-size: var(--sizem);
  min-width: 0;
  line-height: 1.4;
}
@media (min-width: calc(1024px + 1px)) {
  .ui-review-common .review-info .txt .tit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
}
@media (max-width: 1024px) {
  .ui-review-common .review-info .txt .tit {
    font-size: var(--sizes);
  }
}
.ui-review-common .review-info .btns {
  flex: none;
  gap: 10px;
}
@media (max-width: 1024px) {
  .ui-review-common .review-info .btns {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
  }
}
.ui-review-common .review-contents {
  padding: 24px;
  background-color: var(--neutral-100);
}
.ui-review-common .review-contents .review-txt {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  margin-top: 10px;
  line-height: 1.6;
  font-size: var(--sizem);
  color: var(--neutral-700);
}
@media (max-width: 1024px) {
  .ui-review-common .review-contents .review-txt {
    margin-top: 8px;
    font-size: var(--sizes);
  }
}
@media (max-width: 1024px) {
  .ui-review-common .review-contents {
    padding: 16px;
  }
}
.ui-review-common .rating-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 1024px) {
  .ui-review-common .rating-wrap {
    gap: 10px;
  }
}
.ui-review-common .rating-wrap .rating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  color: #fc0;
  font-family: Verdana;
  font-size: var(--size2xl);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .ui-review-common .rating-wrap .rating {
    font-size: var(--sizem);
  }
}
.ui-review-common .rating-wrap .date {
  color: var(--neutral-500);
  font-size: var(--sizexs);
  margin-top: 1px;
}
@media (max-width: 1024px) {
  .ui-review-common .rating-wrap .date {
    margin-top: 2px;
  }
}

.ui-contents-box {
  border-top: 1px solid var(--neutral-500);
}
.ui-contents-box.info-wrap {
  padding-top: 40px;
}
.ui-contents-box.info-wrap .txt-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ui-contents-box.info-wrap .txt-wrap .title {
  font-size: var(--sizel);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.ui-contents-box.info-wrap .txt-wrap .desc {
  font-size: var(--sizexs);
  line-height: 1.7;
}
.ui-contents-box.info-wrap .btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 20px 0;
}
.ui-contents-box.info-wrap .btns .MuiButton-root {
  padding: 0 30px;
  height: 48px;
  border: 1px solid var(--neutral-300);
  border-radius: 24px;
  font-size: var(--sizes);
}
.ui-contents-box.info-wrap .btn-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 20px 0 40px;
  border-bottom: 1px solid var(--neutral-300);
}
@media (max-width: 1024px) {
  .ui-contents-box.info-wrap {
    padding-top: 24px;
  }
  .ui-contents-box.info-wrap .btns .MuiButton-root {
    padding: 0 24px;
    height: 32px;
    font-size: var(--sizexs);
  }
  .ui-contents-box.info-wrap .btn-bottom {
    padding: 8px 0 24px;
  }
}

.ui-card-manage > div {
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--neutral-300);
}
.ui-card-manage > div, .ui-card-manage > div > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.ui-card-manage > div > div {
  gap: 8px;
}
.ui-card-manage .tit {
  font-size: var(--sizem);
  font-weight: 700;
  white-space: nowrap;
}
.ui-card-manage .desc {
  font-size: var(--sizexs);
  margin-top: 1px;
  line-height: 1.6;
}
@media (max-width: 1024px) {
  .ui-card-manage .tit {
    font-size: var(--sizexs2);
  }
}

.icon-mydelivery {
  border-radius: 1px solid var();
}

.ui-state {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-flex;
  height: 18px;
  border: 1px solid var(--neutral-400);
  border-radius: 30px;
  padding: 0 8px;
  font-size: var(--size3xs);
  color: var(--neutral-700);
  white-space: nowrap;
}
.ui-state.blue {
  border-color: var(--secondary);
  color: var(--secondary);
}
.ui-state.red {
  border-color: var(--primary);
  color: var(--primary);
}
.ui-state.green {
  border-color: #20af92;
  color: #20af92;
}
.ui-state.fill-red {
  border-color: var(--primary);
  color: var(--white);
  background-color: var(--primary);
}

.ui-call-center-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  margin-top: 60px;
  padding: 32px 40px;
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-100);
}
.ui-call-center-wrap .call-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  line-height: 1.4;
}
.ui-call-center-wrap .call-wrap .txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}
.ui-call-center-wrap .call-wrap .title {
  font-size: var(--size2xl);
}
.ui-call-center-wrap .call-wrap .call-number {
  font-size: var(--size3xl);
  font-weight: 700;
}
.ui-call-center-wrap .txt-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  margin-left: 32px;
}
@media (min-width: calc(1024px + 1px)) {
  .ui-call-center-wrap .txt-wrap {
    padding-left: 32px;
    border-left: 1px solid var(--neutral-200);
  }
}
.ui-call-center-wrap .txt-wrap .tit {
  font-size: var(--sizem);
}
.ui-call-center-wrap .txt-wrap .desc-wrap {
  font-size: var(--sizes);
  color: var(--neutral-700);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .ui-call-center-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 24px 36px;
  }
  .ui-call-center-wrap .call-wrap {
    white-space: nowrap;
  }
  .ui-call-center-wrap .call-wrap .title {
    font-size: var(--sizem);
  }
  .ui-call-center-wrap .call-wrap .call-number {
    font-size: var(--size2xl);
  }
  .ui-call-center-wrap .txt-wrap .tit {
    font-size: var(--sizexs2);
  }
  .ui-call-center-wrap .txt-wrap .desc-wrap {
    font-size: var(--sizexs);
  }
}
@media (max-width: 768px) {
  .ui-call-center-wrap {
    flex-direction: column;
    gap: 8px;
  }
  .ui-call-center-wrap .call-wrap {
    flex-direction: row;
    gap: 8px;
  }
  .ui-call-center-wrap .txt-wrap {
    margin-left: 0;
  }
}

.ui-file-list-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0 0;
}
.ui-file-list-wrap .file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  padding: 0 8px 0 16px;
  height: 48px;
  background-color: var(--neutral-100);
  border-radius: 6px;
}
.ui-file-list-wrap .file .MuiButtonBase-root {
  width: 32px;
  height: 32px;
}
.ui-file-list-wrap .file .MuiButtonBase-root, .ui-file-list-wrap .file .MuiButtonBase-root:hover {
  background-color: transparent;
}
@media (max-width: 768px) {
  .ui-file-list-wrap .file {
    width: 100%;
  }
}

.ui-round-search-wrap {
  max-width: 400px;
  width: 100%;
  margin: 0 auto 30px;
}
.ui-round-search-wrap .MuiTextField-root {
  width: 100%;
  height: 100%;
}
.ui-round-search-wrap .MuiTextField-root input {
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: right calc(50% - 2px);
  background-image: url("/images/icons/search.svg");
  padding-right: 24px;
  font-size: var(--sizem) !important;
}
.ui-round-search-wrap .MuiTextField-root .MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--neutral-400) !important;
  border-radius: 28px;
}
@media (max-width: 1024px) {
  .ui-round-search-wrap .MuiInputBase-root {
    height: 40px;
  }
  .ui-round-search-wrap .MuiTextField-root input {
    background-position: right calc(50% - 1px);
    font-size: var(--sizes) !important;
  }
}

.ui-video-close {
  position: absolute;
  border: 1px solid var(--neutral-700);
  border-radius: 100% !important;
  background-color: var(--white);
}

.view-file {
  position: relative;
  background-color: #f8f8f8;
  padding: 17px 15px 17px 110px;
  min-height: 26px;
}
.view-file .view-file-tit {
  position: absolute;
  left: 15px;
  top: 14px;
  font-size: 12px;
  line-height: 24px;
  height: 26px;
  text-align: center;
  width: 70px;
  border: 1px solid #424242;
  border-radius: 3px;
  box-sizing: border-box;
}
.view-file .view-attach:hover {
  color: purple;
}

.caption {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0px 0px;
  position: relative;
}

.caption .icon-size {
  display: flex;
  width: 18px;
  height: 18px;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

.caption .alert-info {
  position: relative;
  flex: 1 1;
  align-self: stretch;
  flex-grow: 1;
}

.caption .label {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: -1px;
  color: var(--neutral-800);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ui-caution-small {
    padding-left: 16px;
  }
}

.sub-connect {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  margin-top: 24px;
}
@media (max-width: 768px) {
  .sub-connect {
    padding: 24px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
}
.sub-connect .child {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .sub-connect .child {
    height: auto;
    min-height: auto;
  }
}
.sub-connect .child .div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
}
.sub-connect .title {
  color: #212121;
  font-weight: 700;
}
@media (max-width: 768px) {
  .sub-connect .title {
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.sub-connect .label-text {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: -1px;
  font-weight: 400;
  color: var(--neutral-700);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.div-regist-btn {
  margin-top: 30px;
  text-align: center;
}
@media (max-width: 768px) {
  .div-regist-btn {
    margin-top: 24px;
  }
}

.nodata {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 0px;
  position: relative;
  background-color: var(--neutral-100);
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--neutral-300);
}
.nodata .text-wrapper {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 700;
  color: var(--neutral-900);
  font-size: var(--sizexs);
  text-align: center;
  letter-spacing: 0px;
  line-height: 18px;
  white-space: nowrap;
}
.nodata .frame {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 24px;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid;
  border-color: #000000;
}
.nodata .div {
  margin-top: -1px;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 700;
  color: var(--neutral-900);
  font-size: 13px;
  text-align: center;
  letter-spacing: 0px;
  line-height: 18px;
  white-space: nowrap;
}

.subscription-detail .info-list * {
  box-sizing: border-box;
}
.subscription-detail .info-list {
  border-style: solid;
  border-color: #9e9e9e;
  border-width: 1px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.subscription-detail .info-list .tr {
  border-style: solid;
  border-color: #eeeeee;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.subscription-detail .info-list .list-th {
  background: #fafafa;
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 100px;
  position: relative;
}
.subscription-detail .info-list .title {
  color: #212121;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-detail .info-list .td {
  background: #ffffff;
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  align-self: stretch;
  flex: 1 1;
  position: relative;
  flex-wrap: wrap;
}
.subscription-detail .info-list .input-text-outlined-adaptive {
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  position: relative;
}
.subscription-detail .info-list .label {
  color: #616161;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
}

.mypage-subscription-delivery-list .div,
.mypage-subscription-delivery-list .div * {
  box-sizing: border-box;
}
.mypage-subscription-delivery-list .div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.mypage-subscription-delivery-list .info-list {
  border-style: solid;
  border-color: #9e9e9e;
  border-width: 1px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.mypage-subscription-delivery-list .tr {
  border-style: solid;
  border-color: #eeeeee;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.mypage-subscription-delivery-list .td {
  background: #ffffff;
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 1 1;
  position: relative;
}
.mypage-subscription-delivery-list .data {
  color: #616161;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mypage-subscription-delivery-list .data2 {
  color: #006ad4;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mypage-subscription-delivery-list .tr2 {
  background: #fafafa;
  border-style: solid;
  border-color: #eeeeee;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.mypage-subscription-delivery-list .td2 {
  background: #fafafa;
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 1 1;
  position: relative;
}

.mypage-subscription .btn-group {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.mypage-subscription .button-neutral,
.mypage-subscription .button-neutral * {
  cursor: pointer;
  box-sizing: border-box;
}
.mypage-subscription .button-neutral {
  background: #ffffff;
  border-radius: 4px;
  border-style: solid;
  border-color: #e0e0e0;
  border-width: 1px;
  padding: 0px 8px 0px 8px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 32px;
  position: relative;
  overflow: hidden;
}
.mypage-subscription .div {
  color: #424242;
  text-align: center;
  font-size: 13px;
  line-height: 140%;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage-subscription .state-div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.mypage-subscription .state-div .label {
  background: #ffffff;
  border-radius: 18px;
  border-style: solid;
  border-color: #eeeeee;
  border-width: 1px;
  padding: 0px 8px 0px 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.mypage-subscription .state-div .label .text {
  color: #616161;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage-subscription .state-div.blue .label {
  border-color: #e7f0fb;
}
.mypage-subscription .state-div.blue .label .text {
  color: #006ad4;
}
.mypage-subscription .state-div.red .label {
  border-color: #fff2f4;
}
.mypage-subscription .state-div.red .label .text {
  color: #ff3e66;
}

.subscription-table .chk,
.subscription-table .chk * {
  box-sizing: border-box;
}
.subscription-table .chk {
  padding: 0px 0px 16px 0px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.subscription-table .chk .chk2 {
  border-radius: 20.5px;
  border-style: solid;
  border-color: #e0e0e0;
  border-width: 1px;
  padding: 10px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.subscription-table .chk .chk2 .div {
  color: #757575;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  position: relative;
}
.subscription-table .chk-on {
  background: #ff3e66;
  border-radius: 20.5px;
  padding: 10px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.subscription-table .chk-on .div {
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  font-weight: 800;
  position: relative;
}
.subscription-table .table-head,
.subscription-table .table-head * {
  box-sizing: border-box;
}
.subscription-table .table-head {
  border-style: solid;
  border-color: #9e9e9e;
  border-width: 1px 0px 0px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 58px;
  position: relative;
  overflow: hidden;
}
.subscription-table .table-head .th {
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #eeeeee;
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 100px;
  position: relative;
}
@media (max-width: 768px) {
  .subscription-table .table-head .th {
    width: 80px;
  }
}
.subscription-table .table-head .div {
  color: #212121;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-table .table-head .th2 {
  border-style: solid;
  border-color: #eeeeee;
  border-width: 0px 0px 1px 0px;
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1 1;
  position: relative;
}
@media (max-width: 1024px) {
  .subscription-table .table-head .th2 {
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .subscription-table .table-head .th2 {
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
  }
}
.subscription-table .table-head .div2 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1;
  position: relative;
}
@media (max-width: 768px) {
  .subscription-table .table-head .div2 {
    flex: 0 1;
  }
}
@media (max-width: 1024px) {
  .subscription-table .table-head .div2 {
    flex: 0 0 auto;
  }
}
.subscription-table .table-head .div3 {
  color: #212121;
  text-align: left;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.subscription-table .table-head .div4 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 768px) {
  .subscription-table .table-head .div4 {
    justify-content: flex-start;
  }
}
.subscription-table .table-head .div5 {
  color: #212121;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  position: relative;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-table .table-head .th3 {
  border-style: solid;
  border-color: #eeeeee;
  border-width: 0px 0px 1px 0px;
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 80px;
  position: relative;
}
.subscription-table .table-head .div6 {
  color: #212121;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  position: relative;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-table .tr,
.subscription-table .tr * {
  box-sizing: border-box;
}
.subscription-table .tr {
  border-style: solid;
  border-color: #eeeeee;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.subscription-table .tr .td {
  padding: 16px 0px 16px 0px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 100px;
  position: relative;
}
@media (max-width: 768px) {
  .subscription-table .tr .td {
    width: 80px;
  }
}
.subscription-table .tr .div {
  color: #212121;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: underline;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .subscription-table .tr .div {
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
  }
}
.subscription-table .tr .td2 {
  padding: 16px 0px 16px 0px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  row-gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex: 1 1;
  position: relative;
}
@media (max-width: 768px) {
  .subscription-table .tr .td2 {
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
  }
}
.subscription-table .tr .div2 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1;
  position: relative;
}
@media (max-width: 1024px) {
  .subscription-table .tr .div2 {
    flex: 0 0 auto;
  }
}
@media (max-width: 768px) {
  .subscription-table .tr .div2 {
    flex: 0 0 auto;
  }
}
.subscription-table .tr .div3 {
  color: #212121;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .subscription-table .tr .div3 {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
  }
}
.subscription-table .tr .div4 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  row-gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  flex-shrink: 0;
  position: relative;
}
.subscription-table .tr .div5 {
  color: #616161;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .subscription-table .tr .div5 {
    width: auto;
  }
}
@media (max-width: 768px) {
  .subscription-table .tr .div5 {
    width: auto;
  }
}
.subscription-table .tr .td3 {
  padding: 16px 0px 16px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.subscription-table .tr .div6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 80px;
  position: relative;
}

@media (max-width: 1024px) {
  .child-title {
    display: none;
  }
}

@media (max-width: 768px) {
  .child-common .table {
    border-style: solid;
    border-color: #9e9e9e;
    border-width: 1px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
}
.child-common .tr,
.child-common .tr * {
  box-sizing: border-box;
}
.child-common .tr {
  border-style: solid;
  border-color: #eeeeee;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .tr {
    border-style: solid;
    border-color: #eeeeee;
    border-width: 0px 0px 1px 0px;
    padding: 8px 0px 8px 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .child-common .tr.row {
    flex-direction: row;
  }
}
.child-common .frame-34 {
  padding: 16px 0px 16px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 1024px) {
  .child-common .frame-34 {
    padding: 8px 4px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: 220px;
  }
}
@media (max-width: 768px) {
  .child-common .frame-34 {
    width: 130px;
  }
}
.child-common .frame-34 .td1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-34 .td1 {
    padding: 2px 0px 2px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1 1;
    position: relative;
  }
}
.child-common .div {
  color: #616161;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .div {
    font-size: 12px;
    line-height: 20px;
  }
}
.child-common .td2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 160px;
  position: relative;
}
.child-common .frame-36 {
  padding: 16px 0px 16px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1 1;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-36 {
    padding: 8px 4px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    flex: 1 1;
    position: relative;
  }
}
.child-common .frame-37 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1 1;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-37 {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
}
.child-common .td3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  position: relative;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}
.child-common .div2 {
  color: #212121;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
}
.child-common .frame-35 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.child-common .td4 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 90px;
  position: relative;
}
.child-common .label {
  background: var(--white);
  border-radius: 18px;
  border-style: solid;
  border-color: var(--primary);
  border-width: 1px;
  padding: 1px 8px 1px 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.child-common .div3 {
  color: #ff3e66;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.child-common .label2 {
  background: #ffffff;
  border-radius: 18px;
  border-style: solid;
  border-color: #bdbdbd;
  border-width: 1px;
  padding: 1px 8px 1px 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.child-common .div4 {
  color: #616161;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.child-common .frame-38 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-38 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
}
.child-common .frame-38 .td {
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 120px;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-38 .td {
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 1 1;
    position: relative;
  }
}
.child-common .frame-38 .div3 {
  color: #424242;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
}
.child-common .frame-38 .td2 {
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 200px;
  position: relative;
}
.child-common .frame-43 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1 1;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-43 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1;
    position: relative;
  }
}
.child-common .frame-43 .td3 {
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-43 .td3 {
    padding: 8px 0px 8px 0px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
}
.child-common .frame-43 .td4 {
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 1 1;
  position: relative;
}
@media (max-width: 768px) {
  .child-common .frame-43 .td4 {
    padding: 8px 0px 8px 0px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
}
.child-common .frame-43 .div4 {
  color: #424242;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child-wrapper {
  display: flex;
  gap: 10px;
  flex-direction: row;
}
.child-wrapper .btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
@media (max-width: 1024px) {
  .child-wrapper {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
  }
  .child-wrapper .btn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  .child-wrapper .btn button {
    flex: 1 1;
    flex-grow: 1;
  }
}

.ui-space {
  padding: 20px 0;
}

.ui-space-border {
  padding: 20px 0;
  border-bottom: 1px solid var(--neutral-200);
}
@media (max-width: 1024px) {
  .ui-space-border {
    padding: 10px 0;
  }
}

.ui-nums-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.ui-nums-wrap .price {
  font-size: var(--sizel);
  font-weight: 700;
}
@media (max-width: 1024px) {
  .ui-nums-wrap .price {
    font-size: var(--sizem);
  }
}

.ui-num-input {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 8px;
}
.ui-num-input .MuiButton-root {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--neutral-200);
}
.ui-num-input .MuiInputBase-root {
  padding: 0;
}
.ui-num-input .MuiTextField-root {
  max-width: 38px;
  height: 32px !important;
  background-color: var(--white);
}
.ui-num-input .MuiTextField-root .MuiInputBase-root {
  min-width: auto;
  max-width: 100%;
}
.ui-num-input .MuiTextField-root .MuiInputBase-input {
  max-width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
}
.ui-num-input .MuiTextField-root .MuiOutlinedInput-notchedOutline {
  border: 0 !important;
}
@media (max-width: 1024px) {
  .ui-num-input {
    font-size: var(--sizem);
  }
}
@media (max-width: 768px) {
  .ui-num-input {
    font-size: var(--sizes);
  }
}

.payment-benefit-wrap {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.payment-benefit-wrap img {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.payment-benefit-wrap span {
  color: var(--neutral-neutral-900, #212121);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}
.payment-benefit-wrap p {
  color: var(--neutral-neutral-900, #212121);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
  margin-left: 10px;
  position: relative;
}
.payment-benefit-wrap p img {
  vertical-align: text-top;
}
.payment-benefit-wrap p:hover img + .active {
  display: block;
}
.payment-benefit-wrap .active {
  display: none;
  border-radius: 6px;
  border: 1px solid var(--neutral-neutral-300, #e0e0e0);
  background: var(--white, #fff);
  color: var(--neutral-neutral-500, #9e9e9e);
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 145.455% */
  padding: 10px;
  position: absolute;
  top: 31px;
  left: 50px;
  width: 270px;
}
@media (max-width: 1024px) {
  .payment-benefit-wrap {
    padding: 10px 0;
  }
  .payment-benefit-wrap span {
    font-size: 14px;
  }
  .payment-benefit-wrap p {
    font-size: 12px;
  }
}

.price-total-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 20px 0;
  font-weight: bold;
}
@media (max-width: 1024px) {
  .price-total-wrap {
    padding: 10px 0;
  }
}
.price-total-wrap .price_tit {
  font-size: var(--sizexl);
}
.price-total-wrap .price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  color: var(--primary);
  font-size: var(--size3xl);
}
.price-total-wrap .price small {
  font-size: var(--size2xl);
}
@media (max-width: 1024px) {
  .price-total-wrap .tit {
    font-size: var(--sizem);
  }
  .price-total-wrap .price {
    font-size: 24px;
  }
  .price-total-wrap .price small {
    font-size: var(--sizel);
  }
}

.btn-buy-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 10px;
}

.group-price-quick {
  max-width: 300px;
}
.group-price-quick .product-title {
  padding: 20px 0;
  border-bottom: 1px solid var(--neutral-200);
  padding-top: 16px;
  font-size: var(--sizel);
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .group-price-quick .product-title {
    padding: 10px 0;
  }
}

.group-keyword-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
  gap: 10px;
  color: var(--neutral-600);
}
.group-keyword-wrap .keyword-cont {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 4px;
  font-size: var(--sizes);
}
.group-keyword-wrap .keyword-cont .MuiButtonBase-root {
  line-height: 24px;
}
.group-keyword-wrap .keyword-tit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-flex;
  height: 24px;
  padding: 0 10px;
  border-radius: 30px;
  border: 1px solid var(--neutral-300);
  color: var(--neutral-700);
  font-size: var(--sizexs);
}

.share-bubble {
  position: relative;
  width: 48px;
  margin-top: 18px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.share-bubble::after {
  content: "";
  height: 11px;
  width: 11px;
  position: absolute;
  background-color: white;
  top: -2px;
  left: 50%;
  border-top: var(--neutral-200) solid 1px;
  border-left: var(--neutral-200) solid 1px;
  transform: rotate(45deg) translateX(-50%);
}
.share-bubble .inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 8px;
  background-color: #fff;
}

[data-popper-placement=top] .share-bubble {
  margin-bottom: 18px;
}
[data-popper-placement=top] .share-bubble::after {
  top: initial;
  bottom: -10px;
  transform: rotate(45deg) translateX(-50%);
  border: 0;
  border-bottom: var(--neutral-200) solid 1px;
  border-right: var(--neutral-200) solid 1px;
}

.group-location-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.group-location-wrap .group-location {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizes);
}
.group-location-wrap .group-location .link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.group-location-wrap .group-location .link::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/lo_arrow.svg");
  -webkit-mask-position: center center;
  content: "";
  width: 5px;
  height: 8px;
  background-color: var(--neutral-900);
  margin: 0 8px;
  flex: none;
}

.group-title-wrap {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-200);
}
.group-title-wrap .group-title {
  margin: 8px 0;
}
.group-title-wrap .group-title .tit,
.group-title-wrap .group-title .desc {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: break-spaces;
  word-break: break-all;
}
.group-title-wrap .group-title .tit {
  font-size: var(--size3xl);
  line-height: 1.4;
}
.group-title-wrap .group-title .desc {
  margin-top: 8px;
  color: var(--neutral-600);
  font-size: var(--sizel);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .group-title-wrap .group-title .desc {
    font-size: var(--sizes);
  }
}
@media (max-width: 1024px) {
  .group-title-wrap .group-title .tit {
    font-size: var(--size2xl);
    padding-right: 40px;
  }
  .group-title-wrap .group-title .desc {
    font-size: var(--sizes);
  }
}
.group-title-wrap .group-icons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  .group-title-wrap .group-icons {
    margin-top: 24px;
  }
}
.group-title-wrap .group-price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  margin-top: 10px;
  font-size: var(--size3xl);
  font-weight: bold;
  line-height: 1.4;
}
.group-title-wrap .group-price .num-percent {
  color: var(--primary);
}
.group-title-wrap .group-price .num-price,
.group-title-wrap .group-price .num-discount {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.group-title-wrap .group-price .num-price small {
  font-size: var(--size2xl);
}
.group-title-wrap .group-price .num-discount {
  font-weight: normal;
  text-decoration: line-through;
  color: var(--neutral-600);
  font-size: var(--sizel);
}
@media (max-width: 1024px) {
  .group-title-wrap .group-price {
    font-size: var(--sizexl);
  }
  .group-title-wrap .group-price .num-price small {
    font-size: var(--sizem);
  }
  .group-title-wrap .group-price .num-discount {
    font-size: var(--sizexs);
  }
}

.select-wrap {
  border-bottom: 1px solid #eee;
  position: relative;
}
.select-wrap .select-box {
  position: relative;
}
.select-wrap .select-box::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  background: url("/images/icons/select_arrow.svg") no-repeat center center;
  pointer-events: none;
}
.select-wrap .select {
  width: 100%;
  height: 48px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 6px;
  padding: 16px 12px;
  border: 1px solid var(--neutral-neutral-300, #E0E0E0);
  background: var(--white, #FFF);
  color: #aba3a3;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
}
.select-wrap .select::-ms-expand {
  display: none;
}
.select-wrap .select::placeholder {
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}

.group-delivery-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--neutral-200);
}
@media (max-width: 1024px) {
  .group-delivery-title {
    padding: 8px 0;
  }
}
.group-delivery-title .tit,
.group-delivery-title .desc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.group-delivery-title .tit {
  gap: 6px;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.group-delivery-title .desc {
  gap: 2px;
  color: var(--neutral-500);
}
.group-delivery-title .desc span {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.info-bubble .inner {
  position: relative;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--neutral-300);
  background-color: var(--white);
  color: var(--neutral-500);
  line-height: 1.4;
  font-size: var(--sizexs);
}
.info-bubble .inner::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/bubble_arrow.svg");
  transform: translateX(-50%);
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 1;
  width: 12px;
  height: 8px;
}

[data-popper-placement=top] .info-bubble {
  margin-bottom: 10px;
}
[data-popper-placement=top] .info-bubble .inner::after {
  transform: translateX(-50%) rotate(180deg);
  position: absolute;
  left: 50%;
  top: initial;
  bottom: -8px;
}

[data-popper-placement=bottom] .info-bubble {
  margin-top: 10px;
}

.group-benefit-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--neutral-200);
}
@media (max-width: 1024px) {
  .group-benefit-wrap {
    padding: 10px 0;
  }
}

.group-benefit-title:not(.has-desc-full) {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 6px;
}
.group-benefit-title .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  flex: none;
  font-weight: 600;
  line-height: 1.5;
}
.group-benefit-title .tit.top {
  align-items: flex-start;
}
.group-benefit-title .tit span {
  font-weight: normal;
}
@media (max-width: 768px) {
  .group-benefit-title .tit {
    font-size: var(--sizes);
    line-height: 1.7;
  }
}
.group-benefit-title .tit-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 6px;
}
.group-benefit-title .desc {
  line-height: 1.55;
}
@media (max-width: 768px) {
  .group-benefit-title .desc {
    line-height: 2;
  }
}
.group-benefit-title .desc-full {
  margin: 4px 0 0 28px;
}

.group-select-wrap .label-has {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
}
.group-select-wrap .label-has .label {
  font-size: var(--sizel);
  font-weight: 700;
}
@media (max-width: 1024px) {
  .group-select-wrap .label-has .label {
    font-size: var(--sizexs2);
  }
}

.group-select-inputs {
  padding: 20px 0;
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 1024px) {
  .group-select-inputs {
    padding: 10px 0;
  }
}

.main-option-wrap {
  display: flex;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
}
.main-option-wrap .main-name {
  font-size: var(--sizel);
  font-weight: 700;
}

.group-selected-options {
  padding: 20px 0;
  border-bottom: 1px solid var(--neutral-200);
}
@media (max-width: 1024px) {
  .group-selected-options {
    padding: 10px 0;
  }
}
.group-selected-options.-ADD {
  padding: 0 0 !important;
}
.group-selected-options,
.group-selected-options .selected-options {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
}
.group-selected-options .main-name {
  font-size: var(--sizel);
  font-weight: 700;
}
.group-selected-options .selected-options {
  padding: 16px;
  border-radius: 6px;
  background: var(--neutral-100);
}
.group-selected-options .selected-options.main-option {
  background: none !important;
  padding: 20px 0px !important;
}
@media (max-width: 1024px) {
  .group-selected-options .selected-options.main-option {
    padding: 0px !important;
  }
}
.group-selected-options .selected-options .product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
@media (max-width: 1024px) {
  .group-selected-options .selected-options .product {
    font-size: var(--sizes);
  }
}
@media (max-width: 1024px) {
  .group-selected-options {
    border-bottom: 0;
  }
}

.slick-product-items .slick-track {
  display: flex;
}
.slick-product-items .slick-items-inner .product-item {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 16px;
}
.slick-product-items .slick-items-inner .product-item:not(.full) {
  width: 360px;
}
.slick-product-items .slick-items-inner .product-item:hover {
  color: var(--neutral-900);
}
@media (max-width: 1024px) {
  .slick-product-items .slick-items-inner .product-item {
    width: 324px;
    gap: 10px;
  }
}
.slick-product-items .slick-items-inner .product-item .thumb {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 6px;
  flex: none;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .slick-product-items .slick-items-inner .product-item .thumb {
    width: 100px;
    height: 100px;
  }
}
.slick-product-items .slick-items-inner .product-item .txt {
  min-width: 0;
  padding-right: 60px;
}
@media (max-width: 1024px) {
  .slick-product-items .slick-items-inner .product-item .txt {
    padding-right: 24px;
  }
}
.slick-product-items .slick-items-inner .product-item .txt .desc {
  font-size: var(--sizexs);
  color: var(--neutral-800);
  line-height: 1.6;
}
.slick-product-items .slick-items-inner .product-item .txt .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .slick-product-items .slick-items-inner .product-item .txt .tit {
    font-size: var(--sizexs2);
  }
}
.slick-product-items .slick-items-inner .product-item .txt .sale {
  font-size: var(--size2xs);
  text-decoration: line-through;
  color: var(--neutral-500);
  margin-top: 4px;
}
.slick-product-items .slick-items-inner .product-item .txt .price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizem);
}
.slick-product-items .slick-items-inner .product-item .txt .price .nums {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.slick-product-items .slick-items-inner .product-item .txt .price .MuiButtonBase-root {
  margin-right: 8px;
}
.slick-product-items .slick-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: flex !important;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 100%;
  position: absolute;
  top: 50%;
}
.slick-product-items .slick-arrow::before {
  content: "";
  width: 24px;
  height: 24px;
}
.slick-product-items .slick-arrow.slick-prev {
  left: -26px;
}
@media (max-width: 1304px) {
  .slick-product-items .slick-arrow.slick-prev {
    left: calc(var(--page-space) * -1);
  }
}
.slick-product-items .slick-arrow.slick-prev::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_prev.svg");
}
.slick-product-items .slick-arrow.slick-next {
  right: -26px;
}
@media (max-width: 1304px) {
  .slick-product-items .slick-arrow.slick-next {
    right: calc(var(--page-space) * -1);
  }
}
.slick-product-items .slick-arrow.slick-next::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_next.svg");
}

.slick-product-review .slick-track {
  display: flex;
}
.slick-product-review .slick-review-inner .product-review {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 16px;
  width: 90px;
  height: 80px;
}
.slick-product-review .slick-review-inner .product-review .thumb {
  position: relative;
  width: 80px;
  height: 100%;
  border-radius: 6px;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
  background: var(--neutral-200);
}
.slick-product-review .slick-review-inner .product-review .thumb img {
  object-fit: contain;
}
.slick-product-review .slick-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: flex !important;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  position: absolute;
  top: 50%;
}
.slick-product-review .slick-arrow::before {
  content: "";
  width: 18px;
  height: 18px;
}
.slick-product-review .slick-arrow.slick-prev {
  left: -44px;
}
.slick-product-review .slick-arrow.slick-prev::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_prev.svg");
}
.slick-product-review .slick-arrow.slick-next {
  right: -44px;
}
.slick-product-review .slick-arrow.slick-next::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_next.svg");
}

.order-title-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 60px 0 40px;
}
.order-title-page > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.order-title-page .title-page {
  font-weight: bold;
  gap: 10px;
}
.order-title-page .title-page .tit {
  font-size: var(--size3xl);
}
.order-title-page .title-page small {
  color: var(--primary);
  font-size: 28px;
}
.order-title-page .steps > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizes);
}
.order-title-page .steps > div:not(:last-child):after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images//icons/steps_arrow.svg");
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 10px;
}
.order-title-page .steps > div.active {
  color: var(--primary);
  font-size: var(--sizem);
  font-weight: 700;
}

.order-list-cart {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid var(--neutral-300);
}
@media (max-width: 1024px) {
  .order-list-cart {
    align-items: flex-start;
  }
}
.order-list-cart .cart-thumb-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  padding: 16px 0;
}
.order-list-cart .check-init {
  margin-left: 16px;
}
@media (max-width: 1024px) {
  .order-list-cart .check-init {
    margin-left: 0 8px;
  }
}
.order-list-cart .cart-thumb {
  flex: none;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 16px;
  border-radius: 6px;
  overflow: hidden;
}
.order-list-cart .cart-thumb a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 1024px) {
  .order-list-cart .cart-thumb {
    margin: 0 8px;
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 360px) {
  .order-list-cart .cart-thumb {
    width: 50px;
    height: 50px;
  }
}
.order-list-cart .cart-thumb .soldout {
  background: rgba(50, 70, 80, 0.7);
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
}
.order-list-cart .cart-thumb .soldout .soldout-label {
  color: #FFFFFF;
  margin: 0 auto;
  display: inline-block;
  font-size: 1.3em;
}
.order-list-cart .cart-info-wrap {
  flex: 1 1;
  align-self: center;
}
.order-list-cart .cart-info-wrap .cart-info-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  position: relative;
  flex: 1 1;
  padding: 16px 0;
}
.order-list-cart .cart-info-wrap .cart-info-inner:not(:first-child) {
  border-top: 1px solid var(--neutral-300);
}
.order-list-cart .cart-info-wrap .cart-info-inner .MuiButtonBase-root .small {
  width: 12px;
  height: 12px;
}
@media (max-width: 768px) {
  .order-list-cart .cart-info-wrap .cart-info-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 32px;
  }
}
.order-list-cart .cart-info-wrap .cart-info-contents {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1;
}
.order-list-cart .cart-info-wrap .cart-info-contents .inner {
  flex: 1 1;
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .kind {
  color: var(--neutral-500);
  font-size: var(--sizexs);
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .title {
  font-size: var(--sizem);
  line-height: 1.4;
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .desc {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 4px;
  color: var(--neutral-500);
  font-size: var(--sizexs);
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .desc .tit {
  flex: none;
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .desc.desc2 {
  color: var(--neutral-600);
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .option {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 4px;
  align-items: flex-start;
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .option .txt {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 4px;
  color: var(--neutral-700);
  font-size: var(--sizes);
  line-height: 20px;
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .option .txt .tit {
  flex: none;
}
.order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .option .MuiButtonBase-root {
  flex: none;
}
@media (max-width: 1024px) {
  .order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .kind {
    font-size: var(--size2xs);
  }
  .order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .title {
    font-size: var(--sizes);
  }
  .order-list-cart .cart-info-wrap .cart-info-contents .txt-wrap .option .txt {
    font-size: var(--sizexs);
  }
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  display: inline-flex;
  gap: 8px;
  margin-top: 6px;
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background-color: rgb(255, 242, 244);
  border-radius: 6px;
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items2 .tit {
  font-size: var(--sizexs);
  color: var(--neutral-700);
}
@media (max-width: 768px) {
  .order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items2 .tit {
    font-size: var(--size2xs);
  }
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items2 .tit-bold-pink {
  font-size: var(--sizexs);
  font-weight: 500;
  color: rgb(255, 62, 102);
}
@media (max-width: 768px) {
  .order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items2 .tit-bold-pink {
    font-size: var(--size2xs);
  }
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  border-radius: 6px;
  padding: 8px;
  background-color: var(--neutral-100);
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items .tit {
  font-size: var(--sizexs);
  color: var(--neutral-700);
}
@media (max-width: 768px) {
  .order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items .tit {
    font-size: var(--size2xs);
  }
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip .items .select-init {
  flex: none;
}
.order-list-cart .cart-info-wrap .cart-info-contents .cart-subscrip.row {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .order-list-cart .cart-info-wrap .cart-info-contents {
    flex-direction: column;
    align-items: flex-start;
  }
  .order-list-cart .cart-info-wrap .cart-info-contents .ui-nums-wrap {
    margin-top: 8px;
  }
}
.order-list-cart .ui-nums-wrap .MuiTextField-root {
  max-width: 24px;
}
.order-list-cart .ui-nums-wrap .price {
  text-align: right;
  flex: 1 1;
  font-size: var(--sizem);
}
@media (min-width: calc(1024px + 1px)) {
  .order-list-cart .ui-nums-wrap .price {
    min-width: 120px;
  }
}
.order-list-cart .ui-nums-wrap .num {
  font-size: var(--sizes);
}
@media (max-width: 1024px) {
  .order-list-cart .ui-nums-wrap {
    display: inline-flex;
    gap: 8px;
  }
}
@media (max-width: 768px) {
  .order-list-cart .ui-nums-wrap {
    width: 200px;
  }
  .order-list-cart .ui-nums-wrap .price {
    font-size: var(--sizes);
  }
}
@media (max-width: 360px) {
  .order-list-cart .ui-nums-wrap {
    width: 100%;
  }
}
@media (max-width: 340px) {
  .order-list-cart .ui-nums-wrap {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .order-list-cart .ui-nums-wrap .price {
    min-width: 100%;
    text-align: left;
  }
}
.order-list-cart .cart-Shipping {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  padding: 0 5px;
  text-align: center;
}
@media (min-width: calc(1024px + 1px)) {
  .order-list-cart .cart-Shipping {
    min-width: 90px;
  }
}
@media (max-width: 1024px) {
  .order-list-cart .cart-Shipping {
    margin-top: 8px;
  }
}
.order-list-cart .cart-Shipping .txt-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
}
.order-list-cart .cart-Shipping .txt-wrap .kind {
  font-size: var(--sizes);
}
.order-list-cart .cart-Shipping .txt-wrap .number {
  color: var(--neutral-500);
  font-size: var(--size2xs);
}
.order-list-cart .cart-Shipping .btns {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
@media (max-width: 768px) {
  .order-list-cart .cart-Shipping {
    padding: 0;
  }
  .order-list-cart .cart-Shipping .txt-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 4px;
  }
  .order-list-cart .cart-Shipping .txt-wrap .kind {
    font-size: var(--sizexs);
  }
  .order-list-cart .cart-Shipping .txt-wrap .number {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    margin-top: 1px;
    gap: 4px;
    font-size: var(--size2xs);
  }
  .order-list-cart .cart-Shipping .btns {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: row;
  }
}
.order-list-cart .close.MuiButtonBase-root {
  flex: none;
  width: 32px;
  height: 32px;
}
@media (max-width: 768px) {
  .order-list-cart .close {
    position: absolute;
    right: 0;
    top: 16px;
  }
}

.order-payment-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  padding: 16px 4px;
  background-color: var(--neutral-100);
  text-align: center;
  white-space: nowrap;
}
.order-payment-info > div {
  flex: 1 1;
}
.order-payment-info .kind {
  font-size: var(--sizes);
  color: var(--neutral-700);
  line-height: 1.7;
}
.order-payment-info .price {
  font-size: var(--sizel);
  font-weight: 700;
  line-height: 1.4;
}
.order-payment-info .price-sum {
  font-size: var(--size2xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary);
}
@media (max-width: 768px) {
  .order-payment-info {
    padding: 8px 4px;
  }
  .order-payment-info .kind {
    font-size: var(--size2xs);
  }
  .order-payment-info .price {
    font-size: var(--sizexs2);
  }
  .order-payment-info .price-sum {
    font-size: var(--sizexs2);
  }
  .order-payment-info [class*=icons-] {
    width: 12px;
    height: 12px;
  }
}

.order-all-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding-bottom: 16px;
  color: var(--neutral-700);
}
.order-all-control .btns {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 8px;
}
@media (max-width: 1024px) {
  .order-all-control {
    padding-bottom: 24px;
  }
}

.order-list-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 48px;
  padding: 0 8px;
  border-top: 1px solid var(--neutral-500);
  border-bottom: 1px solid var(--neutral-300);
}
@media (min-width: calc(1024px + 1px)) {
  .order-list-control {
    height: 60px;
  }
}
.order-list-control .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 16px;
}
@media (max-width: 1024px) {
  .order-list-control .tit {
    gap: 8px;
  }
}
.order-list-control .tit .txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}
.order-list-control .tit .txt strong {
  font-size: var(--sizes);
}
@media (min-width: calc(1024px + 1px)) {
  .order-list-control .tit .txt strong {
    font-size: var(--sizem);
  }
}
.order-list-control .tit .txt [class*=icons-] {
  margin-top: -1px;
}
@media (max-width: 1024px) {
  .order-list-control .tit .txt [class*=icons-] {
    width: 14px;
    height: 14px;
  }
}
.order-list-control small {
  font-size: var(--sizexs);
  color: var(--neutral-700);
}
@media (min-width: calc(1024px + 1px)) {
  .order-list-control small {
    font-size: var(--sizes);
  }
}
.order-list-control .tit {
  font-size: var(--sizem);
}
.order-list-control .desc {
  font-size: var(--sizes);
}

.auto-payment-desc {
  background-color: #FFF2F4;
  padding: 8px;
  color: var(--primary-primary-normal, #FF3E66);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
.auto-payment-desc img {
  margin-right: 4px;
  vertical-align: middle;
}

.order-payment-all {
  padding: 32px;
  border-radius: 12px;
  border: 1px solid var(--neutral-500);
}
.order-payment-all .payment-title {
  font-size: var(--sizel);
  font-weight: 700;
  margin-bottom: 20px;
}
.order-payment-all .payment-list {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--neutral-400);
}
.order-payment-all .payment-list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  line-height: 1.4;
}
.order-payment-all .payment-list .tit {
  font-size: var(--sizem);
}
.order-payment-all .payment-list .price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  font-weight: 700;
  font-size: var(--sizel);
}
.order-payment-all .payment-list .price.sale {
  color: var(--primary);
}
.order-payment-all .payment-list .price .unit {
  display: inline-block;
  width: 1em;
  text-align: left;
}
@media (max-width: 1024px) {
  .order-payment-all .payment-list {
    gap: 8px;
  }
}
.order-payment-all .payment-agree {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-neutral-300, #bdbdbd);
}
.order-payment-all .payment-agree .order-list-title {
  color: var(--neutral-neutral-900, #212121);
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 144.444% */
}
.order-payment-all .payment-agree .order-agree {
  border-top: none;
}
.order-payment-all .payment-agree .order-agree label {
  padding: 0;
  border-bottom: none;
}
.order-payment-all .payment-sum {
  padding-top: 20px;
}
.order-payment-all .payment-sum .tit {
  font-weight: 700;
  font-size: var(--sizel);
  margin-bottom: 4px;
}
.order-payment-all .payment-sum .price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-weight: 700;
  color: var(--primary);
}
.order-payment-all .payment-sum .price strong {
  font-size: var(--size3xl);
}
.order-payment-all .payment-sum .price small {
  font-size: var(--size2xl);
}
.order-payment-all .payment-sum .price .unit {
  display: inline-block;
  width: 1.2em;
  text-align: left;
}
.order-payment-all .payment-sum .btns {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  font-size: var(--sizel);
  font-weight: 700;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .order-payment-all .payment-sum .btns {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .order-payment-all .payment-sum .btns .fill {
    min-width: 100%;
  }
  .order-payment-all .payment-sum .btns .outline {
    flex: 1 1;
  }
}
@media (max-width: 1024px) {
  .order-payment-all .payment-sum .btns {
    gap: 10px;
  }
}

.order-payment-caution dt {
  padding: 14px 16px;
  font-size: var(--sizem);
  font-weight: 700;
}
.order-payment-caution dd {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  font-size: var(--sizexs);
  color: var(--neutral-600);
  line-height: 1.6;
  padding: 0 16px;
}
.order-payment-caution dd::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  margin-top: 8px;
  background-color: var(--neutral-600);
  margin-right: 8px;
}
@media (max-width: 1024px) {
  .order-payment-caution dt {
    padding: 8px 16px;
  }
  .order-payment-caution dd {
    padding: 0 10px;
  }
}

.order-list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  min-height: 48px;
  padding-bottom: 16px;
}
.order-list-title .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  font-size: var(--size2xl);
}
.order-list-title .tit strong {
  flex: none;
}
.order-list-title .tit small {
  font-size: var(--sizexs);
  color: var(--neutral-600);
}
@media (max-width: 1024px) {
  .order-list-title {
    min-height: auto;
  }
  .order-list-title .tit {
    font-size: var(--sizem);
  }
  .order-list-title .tit small {
    font-size: var(--size2xs);
  }
}

.order-payments-type .tabs-init.MuiTabs-root {
  padding-bottom: 20px;
}
@media (max-width: 1024px) {
  .order-payments-type .tabs-init.MuiTabs-root {
    padding-bottom: 16px;
  }
}
.order-payments-type .tabs-init.MuiTabs-root,
.order-payments-type .tabs-init.MuiTabs-root .MuiTabs-scroller {
  overflow: visible !important;
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTabs-flexContainer {
  gap: 20px;
  overflow: visible;
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root {
  height: 80px;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--neutral-400);
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root.kakaopay-tab {
  box-shadow: none;
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root .payment {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 6px;
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root .payment .tit {
  font-size: var(--sizem);
  font-weight: 700;
  color: var(--neutral-900);
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root .payment .desc {
  color: var(--neutral-700);
  font-weight: normal;
  font-size: var(--sizexs);
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root.Mui-selected {
  box-shadow: 0 0 0 2px var(--primary);
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root.Mui-selected,
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root.Mui-selected .tit,
.order-payments-type .tabs-init.MuiTabs-root .MuiTab-root.Mui-selected .desc {
  color: var(--primary);
}
.order-payments-type .tabs-init.MuiTabs-root .MuiTabs-indicator {
  display: none;
}
@media (max-width: 768px) {
  .order-payments-type .tabs-init.MuiTabs-root .MuiTabs-flexContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    gap: 10px;
  }
}

.payment-simple-wrap {
  padding: 8px;
  border: 1px solid var(--neutral-200);
  border-width: 1px 0;
  background-color: var(--neutral-100);
}
.payment-simple-wrap > div {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 16px;
  padding: 8px;
}
.payment-simple-wrap > div > .tit {
  align-self: center;
}
.payment-simple-wrap .num {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
@media (min-width: calc(1024px + 1px)) {
  .payment-simple-wrap .num {
    height: 48px;
  }
}
@media (max-width: 1024px) {
  .payment-simple-wrap .num {
    height: 24px;
  }
}
.payment-simple-wrap .num i {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--sizem);
  font-weight: 700;
}
.payment-simple-wrap .payment-simple-contents {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 16px;
  flex: 1 1;
}
.payment-simple-wrap .payment-simple-contents.half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.payment-simple-wrap .payment-simple-contents.half .span {
  grid-column: 1/span 2;
}
@media (max-width: 768px) {
  .payment-simple-wrap .payment-simple-contents.half {
    grid-template-columns: repeat(1, 1fr);
  }
  .payment-simple-wrap .payment-simple-contents.half .span {
    grid-column: 1;
  }
}
.payment-simple-wrap .payment-simple-contents > div {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 6px;
}
.payment-simple-wrap .payment-simple-contents .btn {
  flex: none;
}
@media (max-width: 1024px) {
  .payment-simple-wrap .payment-simple-contents {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
  }
  .payment-simple-wrap .payment-simple-contents .flex {
    flex-direction: column;
    gap: 16px;
  }
  .payment-simple-wrap .payment-simple-contents .flex .MuiFormControl-root {
    flex: 1 1;
  }
}
.payment-simple-wrap .tit {
  font-size: var(--sizexs2);
  font-weight: 700;
}
.payment-simple-wrap .file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  max-width: 45%;
  min-width: 0;
}

.order-list-table.detail {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 40px;
}
.order-list-table .order-list-thead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  border-top: 1px solid var(--neutral-500);
  border-bottom: 1px solid var(--neutral-300);
  height: 58px;
  font-size: var(--sizexs2);
  font-weight: 700;
}
.order-list-table .order-list-thead .th {
  text-align: center;
}
.order-list-table .order-list-thead .th:nth-child(1) {
  width: 120px;
  flex: none;
}
.order-list-table .order-list-thead .th:nth-child(2) {
  flex: 1 1;
}
.order-list-table .order-list-thead .th:nth-child(3) {
  width: 100px;
}
.order-list-table .order-list-thead .th:nth-child(4) {
  width: 120px;
}
.order-list-table .order-list-thead .th:nth-child(5) {
  width: 90px;
}
@media (max-width: 1304px) {
  .order-list-table .order-list-thead .th:nth-child(1) {
    width: 90px;
  }
  .order-list-table .order-list-thead .th:nth-child(3), .order-list-table .order-list-thead .th:nth-child(5) {
    width: 60px;
  }
}
.order-list-table .ui-nums-wrap {
  text-align: center;
}
.order-list-table .ui-nums-wrap .num {
  width: 100px;
}
.order-list-table .ui-nums-wrap .price {
  text-align: center;
}
.order-list-table:not(.detail) .ui-nums-wrap .order-state {
  width: 90px;
}

.order-list-table .ui-nums-wrap .order-state .state {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-flex;
  height: 20px;
  border-radius: 18px;
  padding: 0 8px;
  border: 1px solid var(--neutral-200);
  background-color: var(--white);
  color: var(--neutral-700);
  font-size: var(--sizexs);
  white-space: nowrap;
  letter-spacing: -0.5px;
}
.order-list-table .ui-nums-wrap .order-state .state.blue {
  color: #006ad4;
}
.order-list-table .ui-nums-wrap .order-state .state.red {
  color: var(--primary);
}
.order-list-table .ui-nums-wrap .order-state .state.green {
  color: #20af92;
}
@media (max-width: 1024px) {
  .order-list-table .ui-nums-wrap .order-state .state {
    height: 18px;
    font-size: var(--size3xs);
  }
}
.order-list-table .ui-nums-wrap .order-state .state-delivery {
  font-size: var(--size2xs);
  color: var(--neutral-500);
  line-height: 1.3;
  margin: 4px 0 8px;
}
.order-list-table .ui-nums-wrap .order-state .state-btns {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  margin-top: 8px;
}
.order-list-table .ui-nums-wrap .order-state .state-btns .MuiButtonBase-root {
  color: var(--neutral-800);
}
@media (max-width: 1024px) {
  .order-list-table .ui-nums-wrap .order-state .state-btns {
    align-items: flex-start;
  }
}
@media (max-width: 1304px) {
  .order-list-table .order-td .ui-nums-wrap .num,
  .order-list-table .order-td .ui-nums-wrap .order-state {
    width: 60px;
  }
}

@media (max-width: 1024px) {
  .order-list-table .ui-nums-wrap {
    flex-wrap: wrap;
  }
  .order-list-table .ui-nums-wrap,
  .order-list-table .ui-nums-wrap .price {
    text-align: left;
  }
  .order-list-table .ui-nums-wrap .num {
    width: auto;
  }
  .order-list-table .ui-nums-wrap .order-state {
    min-width: 100%;
    width: 100%;
  }
}
.order-list-table .order-list-tr {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
}
@media (max-width: 1024px) {
  .order-list-table .order-list-tr {
    display: block;
    margin-bottom: 24px;
  }
}
.order-list-table .order-th {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 120px;
  font-size: var(--sizexs);
  line-height: 1.3;
  text-align: center;
  border-bottom: 1px solid var(--neutral-200);
}
.order-list-table .order-th .order-num {
  color: var(--neutral-500);
}
@media (max-width: 1304px) {
  .order-list-table .order-th {
    width: 90px;
  }
}
@media (max-width: 1024px) {
  .order-list-table .order-th {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
    border-top: 1px solid var(--neutral-500);
    padding: 8px 0;
  }
  .order-list-table .order-th .txt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }
}
.order-list-table .order-td {
  flex: 1 1;
}

.order-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  min-height: 240px;
  padding: 60px 0px;
  background-color: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-300);
  font-size: var(--sizexs2);
  font-weight: 700;
  line-height: 1.4;
}

.order-list-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 20px;
}
.order-list-info .txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 20px;
  color: var(--neutral-700);
  font-size: var(--sizem);
}
.order-list-info .txt .b {
  color: var(--neutral-900);
}
.order-list-info .btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
@media (max-width: 1024px) {
  .order-list-info {
    margin: 24px 0 16px;
  }
  .order-list-info .txt {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    gap: 2px;
    font-size: var(--sizexs2);
  }
  .order-list-info .btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }
}

.skeleton-row {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  background: #DDDBDD;
}
.skeleton-row::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 100%);
  animation: shimmer 2s infinite;
  content: "";
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.header-backdrop {
  z-index: 1001;
}
.header-backdrop.on {
  z-index: 1020;
}

.header-top {
  background-color: #f5f5f5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1010;
}
.header-top-mo {
  /* layout container */
  /* family site (renew) */
  /* inner (renew) */
  /* member area */
  /* small link (utility links) */
}
.header-top-mo .layout-contents {
  position: inherit;
}
.header-top-mo .family-site-wrap-mo {
  justify-content: flex-end;
  width: 100%;
}
.header-top-mo .family-site-wrap-mo div {
  /* first depth containers (ex: wrapper around sites) */
  display: inline-flex;
  gap: 8px;
  position: relative;
  /* each site button container */
}
@media (max-width: 355px) {
  .header-top-mo .family-site-wrap-mo div {
    gap: 4px;
  }
}
.header-top-mo .family-site-wrap-mo div.header-wrap {
  width: 100%;
}
.header-top-mo .family-site-wrap-mo div .pos {
  position: absolute;
  width: 5px;
  height: 3px;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}
.header-top-mo .family-site-wrap-mo div .pos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #42acbb;
  -webkit-clip-path: polygon(12.07% 0%, 87.93% 0%, 50% 92.93%);
          clip-path: polygon(12.07% 0%, 87.93% 0%, 50% 92.93%);
}
.header-top-mo .family-site-wrap-mo div div {
  height: 56px; /* renewed: 56px vs 40px */
  align-items: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
}
.header-top-mo .family-site-wrap-mo div div.top-logo-mobile {
  display: inline-flex;
  position: absolute;
  gap: 8px;
  right: 0;
}
.header-top-mo .family-site-wrap-mo div div.top-logo-mobile .logo-pop {
  padding: 5px 0px;
  width: 24px;
  height: 24px;
}
.header-top-mo .family-site-wrap-mo div div.top-logo-mobile .logo-jisatam {
  padding: 5px;
  width: 24px;
  height: 24px;
}
.header-top-mo .family-site-wrap-mo div div span {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  color: #bdbdbd;
  font-size: 18px;
  white-space: nowrap;
  font-family: Pretendard;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 133.333% */
}
@media (max-width: 768px) {
  .header-top-mo .family-site-wrap-mo div div span {
    font-family: Pretendard;
    font-style: normal;
  }
}
.header-top-mo .family-site-wrap-mo div div span.selected {
  font-weight: 800;
  margin: 0 4px 0 0;
}
.header-top-mo .family-site-wrap-mo div div span.news {
  color: #304ffe;
}
.header-top-mo .family-site-wrap-mo div div span.dLibrary {
  background: var(--gradient_dl, linear-gradient(90deg, #13b2d4 0%, #17cae3 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-top-mo .family-site-wrap-mo div div span.dsstore {
  background: var(--gradient_store, linear-gradient(90deg, #ff345e 0%, #ff5c7e 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-top-mo .family-site-wrap-mo div div span.ai {
  color: #5328df;
}
.header-top-mo .family-site-wrap-mo::after {
  content: "";
  width: 80px;
  height: 40px;
}
@media (max-width: 768px) {
  .header-top-mo .family-site-wrap-mo::after {
    width: 0;
    height: 1.625rem;
  }
}
.header-top-mo .header-top-inner-mo {
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
@media (max-width: 768px) {
  .header-top-mo .header-top-inner-mo {
    height: auto;
  }
}
.header-top-mo .header-top-member-mo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.header-top-mo .header-top-member-mo .member-wrap-mo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  font-size: var(--sizes);
}
.header-top-mo .small-link-mo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  height: 48px;
}
.header-top-mo .small-link-mo .item-mo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizes);
}
.header-top .video-banner-btn {
  position: absolute;
  right: var(--page-space);
  top: calc(100% + 104px);
  z-index: 1;
}
.header-top .video-banner-btn .banner-btn {
  width: 120px;
  height: 100px;
  border-radius: 0px 0px 8px 8px !important;
  overflow: hidden;
  /* elevation4 */
  box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.08), 0px 6px 12px -6px rgba(0, 0, 0, 0.12);
}
.header-top .video-banner-btn .ui-video-close {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 24px;
  height: 24px;
}
.header-top.on {
  z-index: 1020;
}
.header-top.scroll {
  /* elevation1 */
  box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.02), 0px 1px 2px -2px rgba(0, 0, 0, 0.04);
}
@media (min-width: calc(1024px + 1px)) {
  .header-top.scroll .video-banner-btn {
    top: calc(100% + 50px);
  }
}
@media (max-width: 1380px) {
  .header-top.scroll .video-banner-btn {
    position: fixed;
    top: 90px;
    right: 68px;
  }
}
@media (max-width: 1024px) {
  .header-top {
    z-index: 1001;
  }
  .header-top .video-banner-btn, .header-top.scroll .video-banner-btn, .header-top.on .video-banner-btn {
    position: fixed;
    right: initial;
    left: 10px;
    top: initial;
    bottom: 130px;
  }
  .header-top .video-banner-btn .banner-btn, .header-top.scroll .video-banner-btn .banner-btn, .header-top.on .video-banner-btn .banner-btn {
    width: 120px;
    height: 48px;
  }
}
.header-top .layout-contents {
  position: relative;
}
.header-top .family-site-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
@media (max-width: 768px) {
  .header-top .family-site-wrap {
    justify-content: flex-end;
    margin-right: -15px;
    width: 100%;
  }
  .header-top .family-site-wrap > div {
    width: 100%;
  }
}
.header-top .family-site-wrap div {
  display: inline-flex;
  gap: 16px;
  position: relative;
}
.header-top .family-site-wrap div .pos {
  position: absolute;
  width: 5px;
  height: 3px;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}
.header-top .family-site-wrap div div {
  height: 40px;
  align-items: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
}
.header-top .family-site-wrap div div.rectangle div {
  position: relative;
  width: 1px;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 1px;
}
@media (max-width: 768px) {
  .header-top .family-site-wrap div div.rectangle {
    display: none;
  }
}
@media (min-width: calc(1024px + 1px)) {
  .header-top .family-site-wrap div div.top-logo-pc {
    display: inline-flex;
  }
}
@media (max-width: 768px) {
  .header-top .family-site-wrap div div.top-logo-pc {
    display: none;
  }
}
@media (min-width: calc(1024px + 1px)) {
  .header-top .family-site-wrap div div.top-logo-mobile {
    display: none;
  }
}
@media (max-width: 1024px) {
  .header-top .family-site-wrap div div.top-logo-mobile {
    display: none;
  }
}
@media (max-width: 768px) {
  .header-top .family-site-wrap div div.top-logo-mobile {
    display: inline-flex;
    margin-right: 0;
    position: absolute;
    right: 0;
  }
}
.header-top .family-site-wrap div div span {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 500;
  color: #424242;
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 32px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .header-top .family-site-wrap div div span {
    font-family: Pretendard;
    font-style: normal;
    letter-spacing: -0.24px;
  }
}
.header-top .family-site-wrap div div span.dLibrary {
  font-weight: 700;
  color: #42acbb;
}
.header-top .family-site-wrap div div span.store {
  font-weight: 700;
  color: #ff3e66;
}
.header-top .family-site-wrap::after {
  content: "";
  width: 80px;
  height: 40px;
}
@media (max-width: 768px) {
  .header-top .family-site-wrap::after {
    width: 0;
    height: 1.625rem;
  }
}
.header-top .family-site-wrap .link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transition: 0.2s;
  font-size: 0;
  width: 150px;
  height: 40px;
  margin-right: -34px;
  padding-right: 20px;
}
@media (max-width: 768px) {
  .header-top .family-site-wrap .link {
    width: 8.75rem;
    height: 1.625rem;
    margin-right: -3.5rem;
  }
}
.header-top .header-top-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 40px;
}
@media (max-width: 768px) {
  .header-top .header-top-inner {
    height: auto;
    width: 100%;
  }
}
.header-top .header-top-member {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.header-top .header-top-member .member-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  font-size: var(--sizes);
}
.header-top .small-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  height: 48px;
}
.header-top .small-link .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizes);
}
.header-top .small-link .item .icons-auth {
  margin-top: 1px;
}
.header-top .small-link .item::before {
  content: "";
  width: 1px;
  height: 10px;
  margin: 0 10px;
  background-color: var(--neutral-200);
}

@media (max-width: 1024px) {
  .header-top.scroll + .header-outer .header-gnb-wrap {
    position: fixed;
    top: 0;
    background-color: #fff;
    width: 100%;
    margin: 0 -8px;
    padding: 0 8px;
    box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.02), 0px 1px 2px -2px rgba(0, 0, 0, 0.04);
  }
  .header-top-mo.scroll + .header-outer:not(.show-product-detail) {
    position: fixed;
    top: 55px;
    background-color: #fff;
    width: 100% !important;
  }
}
.header-outer {
  position: relative;
  background-color: #fff;
  z-index: 1001;
}
.header-outer.on {
  z-index: 1020;
}
@media (min-width: calc(1024px + 1px)) {
  .header-outer {
    margin-top: -50px;
  }
}
@media (min-width: calc(1024px + 1px)) {
  .header-outer .header-wrap {
    border-bottom: 1px solid var(--neutral-300);
  }
}
@media (max-width: 1024px) {
  .header-outer .header-wrap {
    /* elevation1 */
    box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.02), 0px 1px 2px -2px rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid #ff5c7e;
  }
}
.header-outer .header-inner {
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
}
@media (max-width: 1024px) {
  .header-outer .header-inner {
    padding: 0 8px;
  }
}
.header-outer .page-logo {
  text-align: center;
  text-indent: -999em;
}
@media (min-width: calc(1024px + 1px)) {
  .header-outer .page-logo {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    background-image: url("/images/logo-subtitle.svg");
    width: 148px;
    height: 48px;
    overflow: hidden;
  }
}
@media (max-width: 1024px) {
  .header-outer .page-logo {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
  }
}
.header-outer .page-logo:not(.detail) .link {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 1024px) {
  .header-outer .page-logo:not(.detail) {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    background-image: url("/images/logo-subtitle.svg");
    width: 100px;
    height: 30px;
    background-position: center center;
  }
}
.header-outer .page-logo.detail .link {
  display: none;
}
.header-outer .page-logo .detail-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  text-indent: 0;
  font-size: var(--sizem);
  font-weight: 700;
}
.header-outer .header-contents {
  position: relative;
}
.header-outer .header-contents .page-back {
  order: 1;
  margin-right: auto;
}
@media (min-width: calc(1024px + 1px)) {
  .header-outer .header-contents {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    padding-top: 16px;
  }
}
@media (min-width: calc(1024px + 1px)) {
  .header-outer .header-search {
    justify-self: center;
    max-width: 400px;
    width: 100%;
    height: 49px;
    border-bottom: 2px solid var(--neutral-900);
  }
}
.header-outer .header-search .header-search-inner {
  position: relative;
}
.header-outer .header-search input {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 12px 40px 12px 8px;
  font-size: var(--sizexl);
}
.header-outer .header-search .search-btn-pc {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: transparent;
}
@media (max-width: 1024px) {
  .header-outer .header-search .search-btn-pc {
    display: none;
  }
}
.header-outer .header-search .search-btn-pc [class*=icons-] {
  width: 36px;
  height: 36px;
}
.header-outer .header-search .search-btn {
  z-index: 1001;
}
.header-outer .header-menu {
  justify-self: end;
}
.header-outer .header-menu .menu {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 12px;
}
.header-outer .header-menu .link {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.header-outer .header-gnb-wrap {
  position: relative;
}
@media (min-width: calc(1024px + 1px)) {
  .header-outer .header-gnb-wrap {
    margin-top: 32px;
    padding: 0 56px;
  }
}
.header-outer .header-gnb-wrap .gnb-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 0;
}
.header-outer .header-gnb-wrap .gnb-btn::before {
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: left center;
  background-image: url("/images/icons/nav_menu.svg");
  content: "";
  width: 32px;
  height: 32px;
}
.header-outer .header-gnb-wrap .gnb-btn.on {
  background: #000;
}
.header-outer .header-gnb-wrap .gnb-btn.on::before {
  display: none;
}
.header-outer .header-gnb-wrap .gnb-btn.on::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto;
  -webkit-mask-image: url("/images/icons/close.svg");
  -webkit-mask-position: center center;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #eee;
}
.header-outer .header-gnb-wrap .gnb-menu {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  max-width: 740px;
  width: 100%;
  height: 56px;
  margin: 0 auto;
}
.header-outer .header-gnb-wrap .gnb-menu .item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  max-width: 167px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  padding: 0 8px;
  cursor: default;
}
.header-outer .header-gnb-wrap .gnb-menu .link {
  position: relative;
  color: #212121;
  font-family: "Noto Sans KR";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 133.333% */
  letter-spacing: -0.54px;
}
@media (max-width: 768px) {
  .header-outer .header-gnb-wrap .gnb-menu .link {
    font-size: 13px !important;
  }
}
.header-outer .header-gnb-wrap .gnb-menu .link:hover {
  color: #ff3e66;
}
.header-outer .header-gnb-wrap .gnb-menu .link.on {
  font-weight: 700;
  color: #ff3e66;
}
.header-outer .gnb-all-wrap {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background-color: var(--white);
}
.header-outer .gnb-all-wrap .inner {
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
}
.header-outer .gnb-all-wrap .gnb-all-menu {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 60px;
  padding: 20px 60px 30px;
}
.header-outer .gnb-all-wrap .gnb-all-menu .items {
  flex: 1 1;
}
.header-outer .gnb-all-wrap .gnb-all-menu dt,
.header-outer .gnb-all-wrap .gnb-all-menu dd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.header-outer .gnb-all-wrap .gnb-all-menu dt {
  height: 56px;
  font-size: 19px;
  font-weight: 700;
  color: var(--black);
  border-bottom: 1px solid var(--neutral-400);
  margin-bottom: 8px;
}
.header-outer .gnb-all-wrap .gnb-all-menu dd {
  height: 40px;
  font-size: var(--sizel);
  color: var(--neutral-600);
}
@media (max-width: 1024px) {
  .header-outer.on .header-menu {
    margin-right: 20px;
  }
  .header-outer .header-contents {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    min-height: 40px;
  }
  .header-outer .header-contents.new-header {
    flex-direction: row !important;
  }
  .header-outer .header-search {
    width: auto;
    margin-left: 8px;
  }
  .header-outer .header-search .header-search-inner {
    transition: 0.3s;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  }
  .header-outer .header-search .header-search-inner input {
    background: var(--white);
    border-bottom: 1px solid var(--neutral-900);
  }
  .header-outer .header-search .header-search-inner .search-open .ui-popper-collapse {
    width: 100%;
    left: 0;
  }
  .header-outer .header-search .header-search-inner .search-open .ui-popper-inner {
    box-shadow: none;
    margin: 0;
    padding: 24px;
  }
  .header-outer .header-search.on .search-btn {
    position: fixed;
    right: 8px;
    top: 14px;
  }
  .header-outer .header-search.on .header-search-inner {
    pointer-events: auto;
    opacity: 1;
  }
  .header-outer .header-gnb-wrap .gnb-menu {
    height: 40px;
  }
  .header-outer .header-gnb-wrap .gnb-menu .link {
    font-size: var(--sizes);
  }
}
@media (max-width: 1024px) and (max-width: 387px) {
  .header-outer .header-gnb-wrap .gnb-menu .link {
    font-size: var(--sizexs);
  }
}

.gnb-mobile-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  background-color: var(--white);
}
.gnb-mobile-wrap .gnb-mobile-member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 12px 20px;
  background-color: var(--neutral-900);
  color: var(--white);
  font-size: var(--sizes);
}
.gnb-mobile-wrap .gnb-mobile-member .member {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.gnb-mobile-wrap .gnb-mobile-member .name {
  line-height: 1.7;
}
.gnb-mobile-wrap .gnb-mobile-member .name:not(.line-none)::after {
  content: "|";
  color: var(--neutral-600);
  margin: 0 6px 0 10px;
}
.gnb-mobile-wrap .gnb-mobile-member .name .icons-lo_arrow2 {
  width: 20px;
  height: 20px;
}
.gnb-mobile-wrap .gnb-mobile-member .log-btn {
  line-height: 2;
  padding: 0 4px;
  font-size: var(--sizexs);
}
.gnb-mobile-wrap .gnb-mobile-member .log-btn, .gnb-mobile-wrap .gnb-mobile-member .log-btn:hover {
  color: var(--neutral-500);
}
.gnb-mobile-wrap .close {
  margin-top: -3px;
}
.gnb-mobile-wrap .family-site-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 14px;
  background-color: #f5f5f5;
  padding: 24px 0px 16px 0px;
}
.gnb-mobile-wrap .family-site-mobile .link {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  font-weight: 500;
  color: var(--neutral-800);
  font-size: var(--sizexs);
  text-align: center;
}
.gnb-mobile-wrap .family-site-mobile .link .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background: var(--white);
  /* elevation1 */
  box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.02), 0px 1px 2px -2px rgba(0, 0, 0, 0.04);
}
.gnb-mobile-wrap .member-link {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  position: relative;
  padding: 8px 20px;
  border: 1px solid var(--neutral-200);
  border-width: 1px 0;
  z-index: 1;
  /* elevation1 */
  box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.02), 0px 1px 2px -2px rgba(0, 0, 0, 0.04);
}
.gnb-mobile-wrap .member-link .ts {
  flex: 1 1;
  color: var(--neutral-900);
  font-weight: 600;
  font-size: var(--sizexs2);
  line-height: 1.8;
}
.gnb-mobile-wrap .member-link .ts a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}
.gnb-mobile-wrap .member-link .ts [class*=icons-] {
  background-color: var(--neutral-900);
}
.gnb-mobile-wrap .member-link .ts .icons-member_thick {
  width: 18px;
  height: 18px;
}
.gnb-mobile-wrap .member-link .ts .icons-cs {
  width: 20px;
  height: 20px;
}
.gnb-mobile-wrap .gnb-mobile-menu {
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  background-color: var(--neutral-100);
  font-size: var(--sizes);
}
.gnb-mobile-wrap .gnb-mobile-menu a,
.gnb-mobile-wrap .gnb-mobile-menu .link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 40px;
  border-right: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
}
.gnb-mobile-wrap .gnb-all-menu {
  padding-right: 4px;
  overflow: hidden;
  overflow-y: auto;
}
@media only screen and (min-device-width: 1024px) {
  .gnb-mobile-wrap .gnb-all-menu::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  .gnb-mobile-wrap .gnb-all-menu::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  .gnb-mobile-wrap .gnb-all-menu::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
.gnb-mobile-wrap .gnb-all-menu .inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 8px 24px;
  grid-gap: 20px 25px;
  gap: 20px 25px;
}
.gnb-mobile-wrap .gnb-all-menu dt,
.gnb-mobile-wrap .gnb-all-menu dd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.gnb-mobile-wrap .gnb-all-menu dt {
  height: 56px;
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  border-bottom: 1px solid var(--neutral-400);
  margin-bottom: 8px;
}
.gnb-mobile-wrap .gnb-all-menu dd {
  height: 40px;
  font-size: 15px;
  color: var(--neutral-600);
}

.floating-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1001;
  width: 100%;
  background-color: var(--white);
  /* elevation_up */
  box-shadow: 0px -8px 16px -2px rgba(0, 0, 0, 0.04), 0px -4px 8px -2px rgba(0, 0, 0, 0.07);
}
.floating-wrap .floating-inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  width: 100%;
}
.floating-wrap .floating-inner .item,
.floating-wrap .floating-inner a {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1;
  height: 56px;
  font-size: var(--sizes);
  border-radius: 0;
  white-space: nowrap;
}
.floating-wrap .floating-inner .item.active, .floating-wrap .floating-inner .item:hover, .floating-wrap .floating-inner .item:active,
.floating-wrap .floating-inner a.active,
.floating-wrap .floating-inner a:hover,
.floating-wrap .floating-inner a:active {
  color: var(--primary);
}
.floating-wrap .floating-inner .item.active [class*=icons-], .floating-wrap .floating-inner .item:hover [class*=icons-], .floating-wrap .floating-inner .item:active [class*=icons-],
.floating-wrap .floating-inner a.active [class*=icons-],
.floating-wrap .floating-inner a:hover [class*=icons-],
.floating-wrap .floating-inner a:active [class*=icons-] {
  background-color: var(--primary);
}
@media (max-width: 768px) {
  .floating-wrap .floating-inner .item,
  .floating-wrap .floating-inner a {
    font-size: var(--size3xs);
  }
}

@media (max-width: 1024px) {
  .header-outer:not(.header-not-sticky, .header-menu-show) .header-gnb-wrap {
    display: none;
  }
}
@media (max-width: 1024px) {
  .header-outer:not(.header-not-sticky, .header-menu-show) .header-search {
    display: none;
  }
}

.floating-recent-wrap {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
}
.floating-recent-wrap .recent-inner {
  position: relative;
  height: 136px;
  padding-top: 30px;
}
.floating-recent-wrap .recent-inner .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 30px;
  padding: 2px 6px 0px 6px;
  border-radius: 12px 12px 0px 0px;
  background-color: #f8f8f8;
}
.floating-recent-wrap .inner {
  height: 106px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f8f8f8;
  /* elevation_up */
  box-shadow: 0px -8px 16px -2px rgba(0, 0, 0, 0.04), 0px -4px 8px -2px rgba(0, 0, 0, 0.07);
}
.floating-recent-wrap .slick-slide {
  padding-right: 10px;
}
.floating-recent-wrap .product-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--white);
  width: 58px;
  height: 58px;
}

.footer-wrap {
  position: relative;
  z-index: 1000;
  border-top: 1px solid var(--neutral-300);
  background-color: var(--neutral-100);
  padding: 16px 0;
}
@media (min-width: calc(1024px + 1px)) {
  .footer-wrap {
    padding: 60px 0;
  }
}

.footer-inner {
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  align-items: initial;
}
@media (max-width: 1024px) {
  .footer-inner {
    text-align: center;
    padding-bottom: 100px;
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    align-items: center;
  }
}
.footer-inner .footer-logo {
  font-weight: bold;
  font-size: var(--sizexs2);
}
@media (min-width: calc(1024px + 1px)) {
  .footer-inner .footer-logo {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url("/images/logo._footer.svg");
    width: 120px;
    height: 24px;
    font-size: 0;
  }
}
@media (max-width: 1024px) {
  .footer-inner .footer-logo {
    order: 2;
    margin-top: 10px;
  }
}
@media (max-width: 1024px) {
  .footer-inner .footer-info-wrap {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
    width: 100%;
  }
}
.footer-inner .footer-info-wrap .footer-link {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 16px;
  row-gap: 4px;
  flex-wrap: wrap;
  font-size: 15px;
}
@media (min-width: calc(1024px + 1px)) {
  .footer-inner .footer-info-wrap .footer-link {
    gap: 24px;
    margin-top: 24px;
  }
}
@media (max-width: 1024px) {
  .footer-inner .footer-info-wrap .footer-link {
    font-size: 12px;
    justify-content: center;
    order: 1;
  }
}
.footer-inner .footer-info-wrap .footer-info {
  margin-top: 10px;
}
@media (max-width: 1024px) {
  .footer-inner .footer-info-wrap .footer-info {
    order: 3;
    margin-top: 6px;
    font-size: var(--sizexs);
  }
}
.footer-inner .footer-info-wrap .footer-info .footer-info-inner {
  text-align: left;
  color: var(--neutral-600);
  line-height: 1.7;
  font-size: var(--sizes);
}
@media (max-width: 1024px) {
  .footer-inner .footer-info-wrap .footer-info .footer-info-inner {
    margin-top: 6px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--neutral-200);
    background-color: var(--white);
    font-size: var(--size2xs);
    line-height: 1.6;
  }
}
.footer-inner .footer-info-wrap .footer-info .footer-info-inner span {
  color: var(--neutral-400);
}
.footer-inner .footer-info-wrap .footer-copy {
  margin-top: 10px;
  color: var(--neutral-500);
}
@media (max-width: 1024px) {
  .footer-inner .footer-info-wrap .footer-copy {
    font-size: var(--size2xs);
  }
}

.footer-escrow {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/escrow.png");
  width: 90px;
  height: 90px;
}
@media (max-width: 1024px) {
  .footer-escrow {
    margin-top: 6px;
  }
}

.modal-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}
.modal-wrap .modal-inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  pointer-events: auto;
  box-sizing: border-box;
  position: relative;
  min-width: 0;
  min-height: 100px;
  max-height: 95%;
  padding: 30px 24px;
  border-radius: 12px;
  background-color: var(--white);
  /* elevation4 */
  box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.08), 0px 6px 12px -6px rgba(0, 0, 0, 0.12);
}
@media (max-width: 1024px) {
  .modal-wrap .modal-inner {
    padding: 40px 16px 24px;
  }
  .modal-wrap .modal-inner.force-mobile-style {
    padding-right: 16px !important;
  }
  .modal-wrap .modal-inner.force-mobile-style .apply-contents .txt {
    font-size: 14px !important;
  }
  .modal-wrap .modal-inner.force-mobile-style .list-contents {
    max-height: unset !important;
  }
  .modal-wrap .modal-inner.force-pt-16px {
    padding-top: 16px !important;
  }
}
@media (max-width: 768px) {
  .modal-wrap .modal-inner {
    padding-right: 4px;
    overflow: hidden;
    overflow-y: auto;
  }
}
@media only screen and (max-width: 768px) and (min-device-width: 1024px) {
  .modal-wrap .modal-inner::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  .modal-wrap .modal-inner::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  .modal-wrap .modal-inner::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
.modal-wrap .modal-inner.ts {
  background-color: transparent;
  box-shadow: none;
}
.modal-wrap .modal-inner.space-none {
  padding: 0;
}
.modal-wrap .modal-close {
  position: absolute;
  right: 6px;
  top: 6px;
  padding: 8px;
}
.modal-wrap .modal-close.large [class*=icons-] {
  width: 36px;
  height: 36px;
}
@media (max-width: 1024px) {
  .modal-wrap .modal-close.large [class*=icons-] {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 360px) {
  .modal-wrap .modal-close.large [class*=icons-] {
    width: 20px;
    height: 20px;
  }
}
.modal-wrap .modal-alert {
  min-width: 280px;
  text-align: center;
}
@media (max-width: 360px) {
  .modal-wrap .modal-alert {
    min-width: 260px;
  }
}
.modal-wrap .modal-alert .txt {
  margin-top: 10px;
  line-height: 1.6;
}
.modal-wrap .modal-apply .apply-tit {
  margin-bottom: 20px;
  font-size: var(--sizel);
  font-weight: 700;
}
.modal-wrap .modal-apply .apply-tit.space {
  margin-bottom: 16px;
}
.modal-wrap .modal-apply .apply-tit.space .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 16px;
}
.modal-wrap .modal-apply .apply-tit .txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.modal-wrap .modal-apply .apply-tit small {
  font-weight: normal;
  font-size: var(--size2xs);
  color: var(--neutral-600);
}
.modal-wrap .modal-apply .apply-contents .thumb {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
}
.modal-wrap .modal-apply .apply-contents .txt {
  font-size: var(--sizem);
  line-height: 1.6;
}
.modal-wrap .modal-apply .apply-caution {
  margin-top: 20px;
  font-size: var(--sizexs);
  color: var(--neutral-500);
}
@media (max-width: 1024px) {
  .modal-wrap .modal-apply .ui-table-wrap th {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
  }
  .modal-wrap .modal-apply .ui-table-wrap th .res-th .tit span {
    display: block;
  }
  .modal-wrap .modal-apply .ui-table-wrap td {
    padding: 10px;
  }
  .modal-wrap .modal-apply .ui-table-wrap .MuiInputBase-root {
    min-width: auto;
  }
}
@media (max-width: 768px) {
  .modal-wrap .modal-apply .ui-table-wrap:not(.th-show) table th {
    display: none;
  }
  .modal-wrap .modal-apply .ui-table-wrap:not(.th-show) table td {
    padding-left: 0;
    padding-right: 0;
  }
  .modal-wrap .modal-apply .ui-table-wrap:not(.th-show) table .res {
    border: 0;
    padding-bottom: 0;
  }
}
.modal-wrap .apply-caution-list {
  color: var(--neutral-500);
  font-size: var(--sizexs);
  line-height: 1.5;
  padding-bottom: 10px;
}
.modal-wrap .apply-caution-list:not(.border-none) {
  border-bottom: 1px solid var(--neutral-200);
  margin-bottom: 20px;
}
.modal-wrap .modal-rating-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.modal-wrap .modal-rating-wrap .rating-box {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--neutral-100);
}
.modal-wrap .modal-rating-wrap .thumb-wrap .inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 10px;
}
.modal-wrap .modal-rating-wrap .thumb-wrap .inner .btn {
  flex: none;
  width: 80px;
  height: 80px;
  border: 1px solid var(--neutral-400);
  border-radius: 6px;
  overflow: hidden;
}
.modal-wrap .modal-rating-wrap .thumb-wrap .inner .btn .MuiButton-root {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.modal-wrap .modal-rating-wrap .thumb-wrap .inner .list-thumb {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  overflow-x: auto;
}
@media (max-width: 768px) {
  .modal-wrap .modal-rating-wrap .thumb-wrap .inner .btn {
    width: 56px;
    height: 56px;
  }
  .modal-wrap .modal-rating-wrap .thumb-wrap .inner .product-review {
    width: 56px;
    height: 56px;
  }
}
.modal-wrap .modal-rating-wrap .apply-caution {
  margin-top: 8px;
}
.modal-wrap .modal-review-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 20px;
  height: 100%;
}
.modal-wrap .modal-review-wrap .review-thumb {
  position: relative;
  width: 440px;
  flex: none;
  min-width: 0;
}
.modal-wrap .modal-review-wrap .review-thumb .slick-slider {
  border-radius: 6px;
  overflow: hidden;
}
.modal-wrap .modal-review-wrap .product-list-item {
  min-width: 0;
  padding: 0;
  border: 0;
  height: 100%;
  overflow: hidden;
}
.modal-wrap .modal-review-wrap .list-contents {
  padding-right: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--neutral-300);
  overflow: hidden;
  overflow-y: auto;
  max-height: 400px;
}
@media only screen and (min-device-width: 1024px) {
  .modal-wrap .modal-review-wrap .list-contents::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  .modal-wrap .modal-review-wrap .list-contents::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  .modal-wrap .modal-review-wrap .list-contents::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
.modal-wrap .modal-review-wrap .arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -28px;
  width: 48px;
  height: 48px;
  border-radius: 100%;
}
.modal-wrap .modal-review-wrap .arrows.next {
  left: initial;
  right: -28px;
}
.modal-wrap .modal-review-wrap .arrows [class*=icons-] {
  background-color: var(--neutral-700);
}
@media (max-width: 1024px) {
  .modal-wrap .modal-review-wrap {
    flex-direction: column;
  }
  .modal-wrap .modal-review-wrap .review-thumb {
    width: 100%;
    min-width: 0;
  }
  .modal-wrap .modal-review-wrap .review-thumb img {
    max-height: 280px;
  }
  .modal-wrap .modal-review-wrap .list-contents {
    padding: 10px 10px 10px 0;
    border-top: 0;
    max-height: 240px;
  }
}
.modal-wrap .modal-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  margin: 20px 0 0;
}
.modal-wrap .modal-btns.border {
  border-top: 1px solid var(--neutral-200);
  padding-top: 20px;
}
.modal-wrap .modal-btns .MuiButton-root {
  min-width: 80px;
}
@media (max-width: 768px) {
  .modal-wrap.modal-videos-wrap {
    width: 100%;
  }
}
.modal-wrap.modal-videos-wrap .modal-inner {
  padding: 0;
  background-color: var(--neutral-900);
  border-radius: 0;
  width: 100vw;
  aspect-ratio: 1/0.581;
  overflow: visible;
}
.modal-wrap.modal-videos-wrap .modal-videos-inner {
  position: relative;
  height: 100%;
}
.modal-wrap.modal-videos-wrap .modal-videos-inner iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.modal-wrap.modal-videos-wrap .ui-video-close {
  width: 32px;
  height: 32px;
  right: 0;
  top: -42px;
  background-color: transparent !important;
  border-width: 2px;
  border-color: var(--white);
}
.modal-wrap.modal-videos-wrap .ui-video-close [class*=icons-] {
  background-color: var(--white);
}
@media (max-width: 768px) {
  .modal-wrap.modal-videos-wrap .ui-video-close {
    right: 10px;
  }
}

.my-shipping-list {
  border-top: 1px solid var(--neutral-500);
}
.my-shipping-list .MuiFormControlLabel-root {
  padding: 16px 0;
  border-bottom: 1px solid var(--neutral-200);
}
.my-shipping-list .MuiFormControlLabel-root .MuiRadio-root {
  margin: 0 10px;
}
.my-shipping-list .my-shipping {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  font-size: var(--sizexs);
}
.my-shipping-list .my-shipping .inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .my-shipping-list .my-shipping .inner {
    max-width: 215px;
    gap: 2px;
  }
}
.my-shipping-list .my-shipping .title {
  width: 100px;
  flex: none;
}
.my-shipping-list .my-shipping .title .name {
  font-weight: 700;
  font-size: var(--sizexs2);
}
@media (max-width: 1024px) {
  .my-shipping-list .my-shipping .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    flex: 1 1;
  }
  .my-shipping-list .my-shipping .title .name {
    margin-top: 1px;
  }
}
.my-shipping-list .my-shipping .address {
  text-align: left;
}
.my-shipping-list .my-shipping .btn {
  flex: none;
}
.my-shipping-list .my-shipping .btn .MuiButton-root {
  border-radius: 0;
  height: 24px;
  border-bottom: 1px solid var(--neutral-900);
}
@media (min-width: calc(1024px + 1px)) {
  .my-shipping-list .my-shipping {
    text-align: left;
  }
  .my-shipping-list .my-shipping .address {
    width: 350px;
  }
  .my-shipping-list .my-shipping .hp {
    width: 100px;
  }
  .my-shipping-list .my-shipping .btn {
    width: 40px;
  }
}
@media (max-width: 1024px) {
  .my-shipping-list .my-shipping {
    text-align: left;
  }
  .my-shipping-list .my-shipping .address {
    width: 100%;
  }
  .my-shipping-list .my-shipping .hp {
    width: 100px;
  }
  .my-shipping-list .my-shipping .btn {
    width: 40px;
  }
}
@media (max-width: 768px) {
  .my-shipping-list .my-shipping {
    text-align: left;
  }
  .my-shipping-list .my-shipping .address {
    text-align: left;
    width: 100%;
  }
  .my-shipping-list .my-shipping .hp {
    width: 100px;
  }
  .my-shipping-list .my-shipping .btn {
    width: 40px;
  }
}

.coupon-list-outer {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}
.coupon-list-outer .coupon-list-sum {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-weight: 700;
}
.coupon-list-outer .coupon-list-sum .inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
.coupon-list-outer .coupon-list-sum .txt {
  color: var(--black);
  font-size: var(--sizem);
}
.coupon-list-outer .coupon-list-sum .price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  color: var(--primary);
}
.coupon-list-outer .coupon-list-sum .price strong {
  font-size: var(--size3xl);
}
.coupon-list-outer .coupon-list-sum .price small {
  font-size: var(--size2xl);
}

.coupon-list-wrap .radio-init.MuiFormGroup-row {
  gap: 8px;
}
.coupon-list-wrap .MuiFormControlLabel-root {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background-color: var(--white);
}
.coupon-list-wrap .MuiFormControlLabel-root .MuiRadio-root {
  margin-right: 8px;
}
.coupon-list-wrap .MuiFormControlLabel-root .Mui-checked + .MuiFormControlLabel-label::after {
  content: "";
  pointer-events: none;
  border: 1px solid var(--primary);
  border-radius: 8px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 1024px) {
  .coupon-list-wrap .MuiFormControlLabel-root {
    padding: 16px;
  }
}
.coupon-list-wrap .title {
  font-weight: 700;
  font-size: var(--sizexs2);
  margin-bottom: 10px;
}
.coupon-list-wrap .list {
  padding-right: 4px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 166px;
  margin-right: -6px;
  padding-right: 12px;
}
@media only screen and (min-device-width: 1024px) {
  .coupon-list-wrap .list::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  .coupon-list-wrap .list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  .coupon-list-wrap .list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
@media only screen and (min-device-width: 1024px) {
  .coupon-list-wrap .list {
    margin-right: 4px;
    padding-right: 6px;
  }
}
.coupon-list-wrap .coupon-items {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}
.coupon-list-wrap .coupon-items .price {
  width: 100px;
  color: var(--primary);
  font-size: var(--sizel);
}
.coupon-list-wrap .coupon-items .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  min-width: 0;
  width: 250px;
  font-size: var(--sizes);
}
.coupon-list-wrap .coupon-items .date {
  font-size: var(--sizexs);
  color: var(--neutral-700);
}
@media (max-width: 1024px) {
  .coupon-list-wrap .coupon-items {
    gap: 0;
  }
  .coupon-list-wrap .coupon-items .price {
    flex: 1 1;
  }
  .coupon-list-wrap .coupon-items .price strong {
    font-size: var(--size3xl);
  }
  .coupon-list-wrap .coupon-items .price small {
    font-size: var(--size2xl);
  }
  .coupon-list-wrap .coupon-items .txt {
    width: 210px;
  }
}
.coupon-list-wrap .check {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  max-height: 98px;
}
.coupon-list-wrap .check .check-init {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  background-color: var(--white);
}
.coupon-list-wrap .check .check-init .MuiCheckbox-root {
  margin-right: 8px;
}
.coupon-list-wrap .check .check-init .Mui-checked + .MuiFormControlLabel-label::after {
  border: 1px solid var(--secondary);
}
.coupon-list-wrap .check .price {
  color: var(--secondary);
}
@media (max-width: 1024px) {
  .coupon-list-wrap .list {
    max-height: 240px;
  }
  .coupon-list-wrap .check {
    max-height: 200px;
  }
}

.modal-slick-outer {
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--white);
  border: 1px solid var(--neutral-300);
}
.modal-slick-outer .btns-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 50px;
  padding: 0 16px;
}
.modal-slick-outer .btns-area .close {
  padding: 2px 8px;
  color: var(--neutral-800);
  font-size: var(--sizem);
}
@media (max-width: 768px) {
  .modal-slick-outer {
    border-radius: 24px 24px 0 0;
  }
}

.modal-slick {
  position: relative;
}
.modal-slick .slick-arrow {
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}
.modal-slick .slick-arrow::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/arrow_modal.svg");
  width: 40px;
  height: 40px;
}
.modal-slick .slick-arrow.slick-prev {
  left: 4px;
}
.modal-slick .slick-arrow.slick-next {
  transform: translateY(-50%) rotate(180deg);
  left: initial;
  right: 4px;
}
@media (max-width: 1024px) {
  .modal-slick .slick-arrow {
    display: none !important;
  }
}
.modal-slick .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  z-index: 1;
}
.modal-slick .slick-slide .item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

@media (max-width: 768px) {
  .modal-res-bottom {
    width: 100%;
  }
  .modal-res-bottom .modal-inner {
    transform: translateX(-50%);
    position: absolute;
    bottom: 0;
    max-width: 100% !important;
    border-radius: 0;
  }
}

@media (max-width: 1024px) {
  .mobile-modal-content {
    max-height: 526px;
    overflow-y: auto;
  }
}
.main-top-banner {
  --space-h: 16px;
  --space-v: 10px;
  position: relative;
}
@media (max-width: 1024px) {
  .main-top-banner {
    --space-h: 12px;
    --space-v: 6px;
  }
}
@media (max-width: 768px) {
  .main-top-banner {
    --space-h: 16px;
    --space-v: 0;
  }
}
.main-top-banner .slick-banner {
  position: relative;
}
.main-top-banner .slick-banner .slick-arrow {
  width: 0;
  height: 0;
  overflow: hidden;
}
.main-top-banner .slick-banner .slick-slide {
  transition: 0.2s;
  width: 872px;
  height: 400px;
}
.main-top-banner .slick-banner .slick-slide > div,
.main-top-banner .slick-banner .slick-slide .items,
.main-top-banner .slick-banner .slick-slide .inner {
  width: 100%;
  height: 100%;
}
.main-top-banner .slick-banner .slick-slide .items .inner {
  transition: 0.3s;
  position: relative;
  padding: var(--space-v) var(--space-h);
}
.main-top-banner .slick-banner .slick-slide .items .inner::after {
  transition: opacity 0.3s;
  content: "";
  position: absolute;
  left: var(--space-h);
  right: var(--space-h);
  top: var(--space-v);
  bottom: var(--space-v);
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}
.main-top-banner .slick-banner .slick-slide .items .link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .main-top-banner .slick-banner .slick-slide .items .link {
    border-radius: 10px;
  }
}
.main-top-banner .slick-banner .slick-center .items .inner {
  padding: 0 var(--space-h);
}
.main-top-banner .slick-banner .slick-center .items .inner::after {
  pointer-events: none;
  opacity: 0;
}
@media (max-width: 1304px) {
  .main-top-banner .slick-banner .slick-slide {
    width: 632px;
    height: 285px;
  }
}
@media (max-width: 1024px) {
  .main-top-banner .slick-banner .slick-slide {
    width: 524px;
    height: 266px;
  }
}
@media (max-width: 768px) {
  .main-top-banner .slick-banner .slick-track {
    display: flex;
  }
  .main-top-banner .slick-banner .slick-slide {
    transition: none;
    width: auto;
    height: auto;
  }
  .main-top-banner .slick-banner .slick-slide .items .inner .link {
    transition: none;
    padding-bottom: 46.8%;
  }
  .main-top-banner .slick-banner .slick-slide .items .inner::after {
    display: none;
  }
  .main-top-banner .slick-banner .slick-center {
    width: auto;
  }
}
.main-top-banner .main-banner-control {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
  height: 28px;
  margin: 20px 0 10px;
}
@media (max-width: 1304px) {
  .main-top-banner .main-banner-control {
    gap: 16px;
  }
}
.main-top-banner .main-banner-control .banner-list-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.main-top-banner .main-banner-control .banner-gh {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  width: 155px;
  height: 2px;
  background-color: #d9d9d9;
}
.main-top-banner .main-banner-control .banner-gh span {
  transition: 0.3s;
  height: 100%;
  background-color: var(--neutral-800);
}
.main-top-banner .main-banner-control .banner-nums {
  font-size: 17px;
  font-weight: 500;
}
.main-top-banner .main-banner-control .banner-nums > span {
  display: inline-block;
  min-width: 24px;
}
.main-top-banner .main-banner-control .banner-nums .length {
  color: var(--neutral-500);
}
.main-top-banner .main-banner-control .banner-ar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
.main-top-banner .main-banner-control .banner-ar .MuiButtonBase-root,
.main-top-banner .main-banner-control .banner-ar .MuiButtonBase-root [class*=icons-] {
  width: 20px;
  height: 20px;
}
@media (max-width: 1024px) {
  .main-top-banner .main-banner-control {
    flex-direction: row-reverse;
    transform: translateX(-50%);
    position: absolute;
    left: calc(50% + 190px);
    bottom: 16px;
    padding: 5px 10px;
    gap: 5px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    min-width: 74px;
    height: 24px;
    margin: 0;
  }
  .main-top-banner .main-banner-control .banner-gh,
  .main-top-banner .main-banner-control .banner-ar {
    display: none;
  }
  .main-top-banner .main-banner-control .banner-list-btn [class*=icons-] {
    width: 14px;
    height: 14px;
    background-color: var(--white) !important;
  }
  .main-top-banner .main-banner-control .banner-nums {
    font-size: var(--sizexs);
  }
  .main-top-banner .main-banner-control .banner-nums > span {
    min-width: 18px;
  }
  .main-top-banner .main-banner-control .banner-nums,
  .main-top-banner .main-banner-control .banner-nums .length {
    color: var(--neutral-300);
  }
}
@media (max-width: 768px) {
  .main-top-banner .main-banner-control {
    transform: none;
    left: initial;
    right: 26px;
    bottom: 10px;
  }
}

.banner-all-box {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 16px;
  max-height: 696px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
  transform: translateZ(0);
  contain: layout paint;
}
@media (max-width: 1024px) {
  .banner-all-box {
    padding: 0;
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .banner-all-box {
    gap: 16px;
  }
}
@media only screen and (min-device-width: 1024px) and (max-width: 1024px) {
  .banner-all-box {
    padding-right: 4px;
  }
}
@media only screen and (min-device-width: 1024px) {
  .banner-all-box::-webkit-scrollbar-track {
    background-color: var(--neutral-700);
  }
  .banner-all-box::-webkit-scrollbar {
    width: 7px;
    background-color: var(--neutral-700);
  }
  .banner-all-box::-webkit-scrollbar-thumb {
    background-color: #000;
  }
}
.banner-all-box .link {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 8px);
  max-width: calc(50% - 8px);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 25/12;
  transform: translateZ(0);
  will-change: transform;
}
@media (max-width: 768px) {
  .banner-all-box .link {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.main-top-tabs .inner {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 32px;
}
.main-top-tabs .inner .tab-contents {
  flex: 1 1;
  min-width: 0;
}
@media (max-width: 1024px) {
  .main-top-tabs .inner {
    flex-direction: column;
    gap: 20px;
  }
}
.main-top-tabs .tabs-init {
  flex: none;
}
.main-top-tabs .tabs-init .MuiTabs-flexContainer {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 12px;
}
.main-top-tabs .tabs-init .MuiTabs-flexContainer .MuiTab-root {
  white-space: nowrap;
  min-width: 166px;
}
@media (max-width: 1024px) {
  .main-top-tabs .tabs-init .MuiTabs-flexContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }
  .main-top-tabs .tabs-init .MuiTabs-flexContainer .MuiTab-root {
    width: auto;
    min-width: auto;
    flex: none;
    height: auto;
    padding: 6px 16px;
    height: 30px;
    font-size: var(--sizexs2);
  }
}
@media (max-width: 360px) {
  .main-top-tabs .tabs-init .MuiTabs-flexContainer {
    gap: 2%;
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .main-top-tabs .slick-banner .thumb-card-wrap.cont-has,
  .main-top-tabs .indiana-scroll-container .thumb-card-wrap.cont-has {
    width: 37vw;
    flex: none;
  }
}

.main-tabs .tabs-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 32px;
}
@media (max-width: 1024px) {
  .main-tabs .tabs-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-bottom: 20px;
  }
}
.main-tabs .thumb-scroll-wrap > .indiana-scroll-container {
  gap: 40px;
}
@media (max-width: 1304px) {
  .main-tabs .thumb-scroll-wrap > .indiana-scroll-container {
    gap: 32px;
  }
}

.main-gravi-wrap {
  background-image: linear-gradient(to bottom, #ffffff 0px, #ffffff 6%, #f1f3f8 6%, #f1f3f8 100%);
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media (max-width: 1304px) {
  .main-gravi-wrap {
    background-image: linear-gradient(to bottom, #ffffff 0px, #ffffff 12%, #f1f3f8 12%, #f1f3f8 100%);
  }
}
.main-gravi-wrap .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 16px;
  max-width: var(--contents-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-space);
  padding-bottom: 40px;
}
@media (max-width: 1024px) {
  .main-gravi-wrap .inner {
    flex-direction: column-reverse;
    gap: 26px;
  }
}
.main-gravi-wrap .gravi-contents {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 35px;
  align-self: flex-end;
  max-width: 650px;
  width: 100%;
  min-width: 0;
}
@media (max-width: 1304px) {
  .main-gravi-wrap .gravi-contents {
    gap: 30px;
  }
}
.main-gravi-wrap .gravi-contents .txt-info {
  font-size: var(--sizel);
  line-height: 1.6;
  color: var(--neutral-800);
  letter-spacing: -0.36px;
}
@media (max-width: 1304px) {
  .main-gravi-wrap .gravi-contents .txt-info {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    white-space: break-spaces;
    word-break: break-all;
    padding-right: 30px;
  }
}
.main-gravi-wrap .gravi-contents .btns .indiana-scroll-container {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  justify-content: space-between;
  gap: 13px;
  padding-bottom: 8px;
}
@media only screen and (min-device-width: 1024px) {
  .main-gravi-wrap .gravi-contents .btns .indiana-scroll-container::-webkit-scrollbar-track {
    border: 0;
    border-radius: 0;
    background-color: var(--neutral-200);
  }
  .main-gravi-wrap .gravi-contents .btns .indiana-scroll-container::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: var(--neutral-200);
  }
  .main-gravi-wrap .gravi-contents .btns .indiana-scroll-container::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: var(--neutral-800);
  }
}
.main-gravi-wrap .gravi-contents .btns .link {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  position: relative;
}
.main-gravi-wrap .gravi-contents .btns .link .thumb {
  position: relative;
}
.main-gravi-wrap .gravi-contents .btns .link img {
  border-radius: 100%;
  overflow: hidden;
}
.main-gravi-wrap .gravi-contents .btns .link .overlay {
  transition: opacity 0.3s;
  text-align: center;
}
@media (min-width: calc(1024px + 1px)) {
  .main-gravi-wrap .gravi-contents .btns .link .overlay {
    border-radius: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 24% 10% 0;
    background-color: rgba(0, 0, 0, 0.65);
    color: var(--white);
    opacity: 0;
  }
}
.main-gravi-wrap .gravi-contents .btns .link .overlay .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  word-break: keep-all;
  letter-spacing: -0.2px;
  font-weight: 500;
}
@media (min-width: calc(1024px + 1px)) {
  .main-gravi-wrap .gravi-contents .btns .link .overlay .tit {
    font-weight: 700;
  }
}
.main-gravi-wrap .gravi-contents .btns .link .overlay .price-wrap {
  padding-top: 8%;
}
.main-gravi-wrap .gravi-contents .btns .link .overlay .price-wrap .sale {
  line-height: 1.7;
  font-size: var(--sizexs);
  text-decoration: line-through;
  color: var(--neutral-400);
}
@media (max-width: 1304px) {
  .main-gravi-wrap .gravi-contents .btns .link .overlay .tit {
    font-size: var(--sizexs2);
  }
  .main-gravi-wrap .gravi-contents .btns .link .overlay .price-wrap {
    font-size: var(--sizes);
  }
  .main-gravi-wrap .gravi-contents .btns .link .overlay .price-wrap .sale {
    font-size: var(--size3xs);
  }
}
@media (max-width: 1024px) {
  .main-gravi-wrap .gravi-contents .btns .link .overlay {
    margin-top: 14px;
  }
  .main-gravi-wrap .gravi-contents .btns .link .overlay .tit {
    font-size: 15px;
  }
  .main-gravi-wrap .gravi-contents .btns .link .overlay .price-wrap {
    padding-top: 6px;
    font-size: 15px;
  }
  .main-gravi-wrap .gravi-contents .btns .link .overlay .price-wrap .sale {
    font-size: var(--sizexs);
  }
}
.main-gravi-wrap .gravi-contents .btns .link:hover .overlay {
  opacity: 1;
}
@media (max-width: 1024px) {
  .main-gravi-wrap .gravi-contents {
    align-self: center;
    text-align: center;
    max-width: 100%;
    gap: 0;
  }
  .main-gravi-wrap .gravi-contents .logo {
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .main-gravi-wrap .gravi-contents .txt-info {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 32px;
    padding: 0;
  }
  .main-gravi-wrap .gravi-contents .btns .indiana-scroll-container {
    gap: 32px;
  }
  .main-gravi-wrap .gravi-contents .btns .link img {
    min-width: 200px;
  }
}
@media (max-width: 1024px) {
  .main-gravi-wrap .gravi-contents .txt-info {
    font-size: var(--sizes);
    margin-bottom: 20px;
  }
  .main-gravi-wrap .gravi-contents .btns .indiana-scroll-container {
    gap: 14px;
  }
  .main-gravi-wrap .gravi-contents .btns .link {
    width: 100%;
  }
  .main-gravi-wrap .gravi-contents .btns .link img {
    min-width: 134px;
  }
}
.main-gravi-wrap .big-thumb {
  max-width: 530px;
  aspect-ratio: 1/1;
  width: 100%;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  align-self: flex-start;
}
@media (max-width: 1024px) {
  .main-gravi-wrap .big-thumb {
    align-self: center;
    max-width: 40%;
    min-width: 290px;
  }
}

.slick-visual-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 6%;
  position: relative;
}
@media (max-width: 1024px) {
  .slick-visual-wrap {
    gap: 3%;
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap {
    flex-direction: column;
    gap: 16px;
  }
}
.slick-visual-wrap .slick-visual {
  position: relative;
  width: 75%;
  min-width: 0;
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-visual {
    width: calc(250px + 20%);
  }
}
.slick-visual-wrap .slick-visual .slick-slide .items {
  padding-right: 10%;
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-visual .slick-slide .items {
    padding: 0 10%;
  }
}
.slick-visual-wrap .slick-visual .visual {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  margin-bottom: 40px;
}
.slick-visual-wrap .slick-visual .visual img {
  border-radius: 40px 40px 160px 40px;
  object-fit: cover;
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-visual .visual img {
    border-radius: 20px 20px 100px 20px;
  }
}
@media (max-width: 1024px) {
  .slick-visual-wrap .slick-visual .visual {
    margin-bottom: 30px;
  }
  .slick-visual-wrap .slick-visual .visual img {
    border-radius: 30px;
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-visual .visual {
    margin-bottom: 20px;
  }
}
.slick-visual-wrap .slick-visual .visual-txt-info {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 90%;
  padding: 28px 30px;
  border-radius: 45px 45px 45px 8px;
  background-color: rgba(106, 73, 238, 0.9);
  color: var(--white);
}
.slick-visual-wrap .slick-visual .visual-txt-info.type1 {
  background-color: rgba(135, 67, 221, 0.9);
}
.slick-visual-wrap .slick-visual .visual-txt-info.type2 {
  background-color: rgba(71, 88, 232, 0.9);
}
.slick-visual-wrap .slick-visual .visual-txt-info .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  color: #fff170;
  font-size: var(--sizes);
  font-weight: 700;
  letter-spacing: -0.28px;
}
.slick-visual-wrap .slick-visual .visual-txt-info .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}
.slick-visual-wrap .slick-visual .visual-txt-info .detail {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  white-space: initial;
  font-size: var(--sizes);
  line-height: 1.4;
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-visual .visual-txt-info {
    border-radius: 30px 30px 30px 8px;
  }
}
@media (max-width: 1024px) {
  .slick-visual-wrap .slick-visual .visual-txt-info {
    background-color: #6a49ee;
    gap: 6px;
    border-radius: 20px 20px 20px 5px;
    padding: 16px 18px;
  }
  .slick-visual-wrap .slick-visual .visual-txt-info .desc {
    font-size: var(--sizexs);
  }
  .slick-visual-wrap .slick-visual .visual-txt-info .tit {
    font-size: 15px;
  }
  .slick-visual-wrap .slick-visual .visual-txt-info .detail {
    font-size: var(--size2xs);
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-visual .visual-txt-info {
    left: 20%;
    width: 80%;
  }
}
.slick-visual-wrap .slick-contents {
  width: 100%;
  max-width: 698px;
  min-width: 0;
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-contents {
    max-width: 100%;
  }
}
.slick-visual-wrap .slick-contents .slick-banner {
  margin: 0 -16px;
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-contents .slick-banner {
    margin: 0 -6px;
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-contents .slick-banner {
    margin: 0 calc(var(--page-space) * -1);
  }
}
.slick-visual-wrap .slick-contents .slick-slider {
  position: static;
}
.slick-visual-wrap .slick-contents .slick-track {
  display: flex;
  width: max-content;
}
.slick-visual-wrap .slick-contents .slick-slider .slick-arrow {
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}
.slick-visual-wrap .slick-contents .slick-slider .slick-arrow::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/arrow_visual.svg");
  width: 80px;
  height: 80px;
}
.slick-visual-wrap .slick-contents .slick-slider .slick-arrow.slick-prev {
  left: -80px;
}
.slick-visual-wrap .slick-contents .slick-slider .slick-arrow.slick-next {
  right: -80px;
}
.slick-visual-wrap .slick-contents .slick-slider .slick-arrow.slick-next::before {
  transform: rotate(180deg);
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-contents .slick-slider .slick-arrow {
    display: none !important;
  }
}
.slick-visual-wrap .slick-contents .slick-dots {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  bottom: -20px;
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-contents .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-top: 20px;
    position: relative;
    bottom: 0;
  }
  .slick-visual-wrap .slick-contents .slick-dots li {
    flex: none;
  }
}
.slick-visual-wrap .slick-contents .slick-dots .slick-active button {
  background-color: #6549db;
}
.slick-visual-wrap .slick-contents .slick-slide .items .inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-contents .slick-slide .items .inner {
    gap: 10px;
    padding: 0 var(--page-space);
  }
}
.slick-visual-wrap .slick-contents .slick-slide .item {
  width: 100%;
  padding: 0 16px;
}
.slick-visual-wrap .slick-contents .slick-slide .item, .slick-visual-wrap .slick-contents .slick-slide .item > a {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-contents .slick-slide .item, .slick-visual-wrap .slick-contents .slick-slide .item > a {
    gap: 12px;
  }
}
@media (max-width: 1024px) {
  .slick-visual-wrap .slick-contents .slick-slide .item, .slick-visual-wrap .slick-contents .slick-slide .item > a {
    gap: 10px;
  }
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-contents .slick-slide .item {
    padding: 0 12px;
  }
}
@media (max-width: 1024px) {
  .slick-visual-wrap .slick-contents .slick-slide .item {
    padding: 0 6px;
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-contents .slick-slide .item {
    padding: 0;
  }
}
.slick-visual-wrap .slick-contents .slick-slide .thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-contents .slick-slide .thumb {
    border-radius: 10px;
  }
}
.slick-visual-wrap .slick-contents .slick-slide .thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slick-visual-wrap .slick-contents .slick-slide .txt-info {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  overflow: hidden;
}
.slick-visual-wrap .slick-contents .slick-slide .txt-info .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  color: #6549db;
  font-size: var(--sizes);
  letter-spacing: -0.28px;
}
.slick-visual-wrap .slick-contents .slick-slide .txt-info .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  font-size: var(--sizel);
  font-weight: 600;
}
@media (max-width: 1304px) {
  .slick-visual-wrap .slick-contents .slick-slide .txt-info {
    gap: 4px;
  }
  .slick-visual-wrap .slick-contents .slick-slide .txt-info .desc {
    font-size: var(--sizexs);
  }
  .slick-visual-wrap .slick-contents .slick-slide .txt-info .tit {
    font-size: 15px;
  }
}
@media (max-width: 1024px) {
  .slick-visual-wrap .slick-contents .slick-slide .txt-info .desc {
    font-size: var(--sizexs2);
  }
  .slick-visual-wrap .slick-contents .slick-slide .txt-info .tit {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap .slick-contents .slick-slide .txt-info .desc {
    font-size: var(--size2xs);
  }
  .slick-visual-wrap .slick-contents .slick-slide .txt-info .tit {
    font-size: var(--sizexs2);
  }
}
.slick-visual-wrap.full {
  display: block;
  gap: 0;
}
@media (max-width: 768px) {
  .slick-visual-wrap.full {
    padding: 0;
  }
}
.slick-visual-wrap.full .slick-visual {
  width: 100%;
}
.slick-visual-wrap.full .slick-visual .slick-banner {
  margin: 0 -20px;
}
@media (max-width: 1024px) {
  .slick-visual-wrap.full .slick-visual .slick-banner {
    margin: 0 calc(var(--page-space) * -1);
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap.full .slick-visual .slick-banner {
    margin: 0 -16px;
  }
}
.slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow {
  transform: translateY(-50%);
  position: absolute;
  top: calc(50% - 20px);
}
.slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("/images/icons/arrow_visual.svg");
  -webkit-mask-position: 0 0;
  background-image: none;
  width: 80px;
  height: 80px;
  background-color: var(--neutral-800);
}
.slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow.slick-prev {
  left: -60px;
}
.slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow.slick-next {
  right: -60px;
}
.slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow.slick-next::before {
  transform: rotate(180deg);
}
@media (max-width: 1304px) {
  .slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow {
    display: block !important;
  }
}
@media (max-width: 1024px) {
  .slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow::before {
    width: 50px;
    height: 50px;
    background-color: var(--neutral-500);
  }
  .slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow.slick-prev {
    left: 0;
  }
  .slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow.slick-next {
    right: 0;
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow.slick-prev {
    left: 0;
  }
  .slick-visual-wrap.full .slick-visual .slick-banner .slick-arrow.slick-next {
    right: 0;
  }
}
.slick-visual-wrap.full .slick-visual .slick-dots {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  bottom: -24px;
}
@media (max-width: 768px) {
  .slick-visual-wrap.full .slick-visual .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    position: relative;
  }
  .slick-visual-wrap.full .slick-visual .slick-dots li {
    flex: none;
  }
}
.slick-visual-wrap.full .slick-visual .slick-dots .slick-active button {
  background-color: #6549db;
}
.slick-visual-wrap.full .slick-visual .slick-slide {
  padding: 0 20px;
}
@media (max-width: 768px) {
  .slick-visual-wrap.full .slick-visual .slick-slide {
    padding: 0 16px;
  }
}
.slick-visual-wrap.full .slick-visual .items {
  position: relative;
  padding-right: 30px;
}
.slick-visual-wrap.full .slick-visual .items .visual-txt-info {
  border-radius: 40px 40px 40px 8px;
  padding: 26px;
}
@media (max-width: 1024px) {
  .slick-visual-wrap.full .slick-visual .items .visual-txt-info {
    border-radius: 20px 20px 20px 5px;
    padding: 16px 18px;
  }
}
@media (max-width: 768px) {
  .slick-visual-wrap.full .slick-visual .items .inner {
    max-width: 360px;
    margin: 0 auto;
    position: relative;
  }
  .slick-visual-wrap.full .slick-visual .items .inner .visual-txt-info {
    left: inherit;
    right: -30px;
    bottom: -16px;
  }
}

.main-ad-banner {
  --space-h: 20px;
  position: relative;
}
@media (max-width: 1024px) {
  .main-ad-banner {
    --space-h: 8px;
  }
}
@media (max-width: 768px) {
  .main-ad-banner {
    --space-h: 16px;
  }
}
.main-ad-banner .slick-banner {
  position: relative;
}
.main-ad-banner .slick-banner .slick-arrow {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.17);
  border-radius: 100%;
}
.main-ad-banner .slick-banner .slick-arrow::before,
.main-ad-banner .slick-banner .slick-arrow ::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/slick_arrow3.svg");
  width: 10px;
  height: 20px;
  margin: 0 auto;
}
.main-ad-banner .slick-banner .slick-arrow.slick-prev {
  left: calc(50% - 368px);
}
.main-ad-banner .slick-banner .slick-arrow.slick-next {
  transform: translate(-50%, -50%) rotate(180deg);
  left: calc(50% + 368px);
}
@media (max-width: 1024px) {
  .main-ad-banner .slick-banner .slick-arrow {
    display: none !important;
  }
}
.main-ad-banner .slick-banner .slick-track {
  display: flex;
}
.main-ad-banner .slick-banner .slick-slide {
  transition: 0.2s;
  position: relative;
  width: calc(730px + var(--space-h) + var(--space-h));
  height: 262px;
  padding: 0 var(--space-h);
}
@media (max-width: 1024px) {
  .main-ad-banner .slick-banner .slick-slide {
    width: calc(480px + var(--space-h) + var(--space-h));
    height: 172px;
  }
}
@media (max-width: 768px) {
  .main-ad-banner .slick-banner .slick-slide {
    width: 100%;
    height: auto;
  }
}
.main-ad-banner .slick-banner .slick-slide > div,
.main-ad-banner .slick-banner .slick-slide .items,
.main-ad-banner .slick-banner .slick-slide .inner {
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .main-ad-banner .slick-banner .slick-slide > div,
  .main-ad-banner .slick-banner .slick-slide .items,
  .main-ad-banner .slick-banner .slick-slide .inner {
    height: auto;
  }
}
.main-ad-banner .slick-banner .slick-slide .items .inner {
  transition: 0.3s;
  position: relative;
}
.main-ad-banner .slick-banner .slick-slide .items .inner::after {
  transition: opacity 0.3s;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .main-ad-banner .slick-banner .slick-slide .items .inner::after {
    border-radius: 12px;
  }
}
@media (max-width: 768px) {
  .main-ad-banner .slick-banner .slick-slide .items .inner::after {
    border-radius: 8px;
    display: none;
  }
}
@media (max-width: 768px) {
  .main-ad-banner .slick-banner .slick-slide .items .inner {
    padding-bottom: 34%;
    min-height: 118px;
  }
  .main-ad-banner .slick-banner .slick-slide .items .inner .link {
    position: absolute !important;
    border-radius: 8px;
    left: 0;
    top: 0;
  }
}
.main-ad-banner .slick-banner .slick-slide .items .link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .main-ad-banner .slick-banner .slick-slide .items .link {
    border-radius: 12px;
  }
}
.main-ad-banner .slick-banner .slick-center .items .inner::after {
  pointer-events: none;
  opacity: 0;
}

.main-review-slider-wrap {
  margin: 0 -5px;
}
@media (max-width: 1304px) {
  .main-review-slider-wrap {
    margin: 0 -6px;
  }
}
@media (max-width: 1024px) {
  .main-review-slider-wrap {
    margin: 0 calc(var(--page-space) * -1);
  }
}
.main-review-slider-wrap .slick-banner .slick-slide {
  padding: 0 10px;
}
@media (max-width: 1304px) {
  .main-review-slider-wrap .slick-banner .slick-slide {
    padding: 0 12px;
  }
}
@media (max-width: 1024px) {
  .main-review-slider-wrap .slick-banner .slick-slide {
    padding: 0;
    padding-left: var(--page-space);
  }
}
.main-review-slider-wrap .slick-arrow {
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}
.main-review-slider-wrap .slick-arrow::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/icons/arrow_visual.svg");
  width: 80px;
  height: 80px;
}
.main-review-slider-wrap .slick-arrow.slick-prev {
  left: -70px;
}
.main-review-slider-wrap .slick-arrow.slick-next {
  right: -70px;
}
.main-review-slider-wrap .slick-arrow.slick-next::before {
  transform: rotate(180deg);
}
@media (max-width: 1304px) {
  .main-review-slider-wrap .slick-arrow {
    display: none !important;
  }
}

.review-card-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
}
@media (max-width: 1024px) {
  .review-card-wrap {
    width: 186px;
    border-radius: 10px;
  }
}
@media (max-width: 768px) {
  .review-card-wrap {
    width: 175px;
  }
}
.review-card-wrap .item .thumb-wrap {
  position: relative;
  aspect-ratio: 1/0.8;
}
.review-card-wrap .item .thumb-wrap .product {
  position: absolute;
  left: 20px;
  bottom: -30px;
  width: 80px;
  height: 80px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--white);
  border-radius: 8px;
}
@media (max-width: 1024px) {
  .review-card-wrap .item .thumb-wrap .product {
    left: 10px;
    bottom: -12px;
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }
}
@media (max-width: 768px) {
  .review-card-wrap .item .thumb-wrap .product {
    bottom: -10px;
    width: 45px;
    height: 45px;
  }
}
.review-card-wrap .item .review-contents {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 18px;
  padding: 48px 22px 30px 22px;
  background-color: var(--white);
}
@media (max-width: 1024px) {
  .review-card-wrap .item .review-contents {
    gap: 8px;
    padding: 16px 12px 20px 12px;
  }
}
.review-card-wrap .item .review-contents .review-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  line-height: 0;
}
.review-card-wrap .item .review-contents .review-area .num {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: row;
  gap: 4px;
  font-size: var(--sizem);
}
@media (max-width: 1024px) {
  .review-card-wrap .item .review-contents .review-area .MuiRating-icon {
    width: 16px;
    height: 16px;
  }
  .review-card-wrap .item .review-contents .review-area .num {
    font-size: var(--sizexs);
  }
}
.review-card-wrap .item .review-contents .txt-info {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 6px;
}
.review-card-wrap .item .review-contents .txt-info .tit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  font-weight: var(--sizel);
  font-weight: 700;
  line-height: 1.4;
}
.review-card-wrap .item .review-contents .txt-info .detail {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  word-break: break-all;
  font-weight: var(--sizes);
  line-height: 1.3;
  letter-spacing: -0.28px;
  color: var(--neutral-800);
}
@media (max-width: 1024px) {
  .review-card-wrap .item .review-contents .txt-info {
    gap: 4px;
  }
  .review-card-wrap .item .review-contents .txt-info .tit {
    font-size: var(--sizes);
  }
  .review-card-wrap .item .review-contents .txt-info .detail {
    font-size: var(--size2xs);
  }
}
.review-card-wrap .item .review-contents .info-wrap {
  display: flex;
  justify-content: initial;
  align-items: initial;
  flex-direction: column;
  gap: 8px;
  font-size: var(--sizexs);
  color: var(--neutral-500);
}
.review-card-wrap .item .review-contents .info-wrap .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}
@media (max-width: 1024px) {
  .review-card-wrap .item .review-contents .info-wrap {
    gap: 4px;
    font-size: var(--size2xs);
  }
  .review-card-wrap .item .review-contents .info-wrap .info {
    display: flex;
    justify-content: initial;
    align-items: initial;
    flex-direction: column;
  }
}
.review-card-wrap .overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transition: opacity 0.3s;
  font-size: var(--sizexl);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 20px 24px;
  background-color: rgba(0, 0, 0, 0.68);
  color: var(--white);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
}
@media (max-width: 1024px) {
  .review-card-wrap .overlay {
    font-size: var(--sizem);
    display: none;
  }
}
@media (max-width: 768px) {
  .review-card-wrap .overlay {
    font-size: var(--sizes);
  }
}
.review-card-wrap:hover .overlay {
  opacity: 1;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./src/asset/styles/guide.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.bgc-primary {
  background-color: #ff3e66;
}

.txt-primary {
  color: #ff3e66;
}

.bgc-secondary {
  background-color: #006ad4;
}

.txt-secondary {
  color: #006ad4;
}

.bgc-black {
  background-color: #000;
}

.txt-black {
  color: #000;
}

.bgc-white {
  background-color: #fff;
}

.txt-white {
  color: #fff;
}

.bgc-neutral-900 {
  background-color: #212121;
}

.txt-neutral-900 {
  color: #212121;
}

.bgc-neutral-800 {
  background-color: #424242;
}

.txt-neutral-800 {
  color: #424242;
}

.bgc-neutral-700 {
  background-color: #616161;
}

.txt-neutral-700 {
  color: #616161;
}

.bgc-neutral-600 {
  background-color: #757575;
}

.txt-neutral-600 {
  color: #757575;
}

.bgc-neutral-500 {
  background-color: #9e9e9e;
}

.txt-neutral-500 {
  color: #9e9e9e;
}

.bgc-neutral-400 {
  background-color: #bdbdbd;
}

.txt-neutral-400 {
  color: #bdbdbd;
}

.bgc-neutral-300 {
  background-color: #e0e0e0;
}

.txt-neutral-300 {
  color: #e0e0e0;
}

.bgc-neutral-200 {
  background-color: #eee;
}

.txt-neutral-200 {
  color: #eee;
}

.bgc-neutral-100 {
  background-color: #fafafa;
}

.txt-neutral-100 {
  color: #fafafa;
}

.size3xl {
  font-size: 32px;
}

@media (max-width: 1024px) {
  .t-size3xl {
    font-size: 32px;
  }
}
.size2xl {
  font-size: 22px;
}

@media (max-width: 1024px) {
  .t-size2xl {
    font-size: 22px;
  }
}
.sizexl {
  font-size: 20px;
}

@media (max-width: 1024px) {
  .t-sizexl {
    font-size: 20px;
  }
}
.sizel {
  font-size: 18px;
}

@media (max-width: 1024px) {
  .t-sizel {
    font-size: 18px;
  }
}
.sizem {
  font-size: 16px;
}

@media (max-width: 1024px) {
  .t-sizem {
    font-size: 16px;
  }
}
.sizes {
  font-size: 14px;
}

@media (max-width: 1024px) {
  .t-sizes {
    font-size: 14px;
  }
}
.sizexs {
  font-size: 12px;
}

@media (max-width: 1024px) {
  .t-sizexs {
    font-size: 12px;
  }
}
.sizexs2 {
  font-size: 13px;
}

@media (max-width: 1024px) {
  .t-sizexs2 {
    font-size: 13px;
  }
}
.size2xs {
  font-size: 11px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .t-size2xs {
    font-size: 11px;
  }
}
.size3xs {
  font-size: 10px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .t-size3xs {
    font-size: 10px;
  }
}
:root {
  --contents-width: 1304px;
  --tablet-width: 1024px;
  --mobile-width: 768px;
  --header-height-detail: 48px;
  --input-height: 48px;
  --floating-bottom: 56px;
  --product-detail-bottom: 104px;
  --product-detail-no-option-bottom: 194px;
  --page-space: 32px;
  --mobile-space: 16px;
  --radius: 8px;
  --primary: #ff3e66;
  --secondary: #006ad4;
  --black: #000;
  --white: #fff;
  --neutral-900: #212121;
  --neutral-800: #424242;
  --neutral-700: #616161;
  --neutral-600: #757575;
  --neutral-500: #9e9e9e;
  --neutral-400: #bdbdbd;
  --neutral-300: #e0e0e0;
  --neutral-200: #eee;
  --neutral-100: #fafafa;
  --size3xl: 32px;
  --size2xl: 22px;
  --sizexl: 20px;
  --sizel: 18px;
  --sizem: 16px;
  --sizes: 14px;
  --sizexs: 12px;
  --sizexs2: 13px;
  --size2xs: 11px;
  --size3xs: 10px;
}

@media (max-width: 1304px) {
  :root {
    --page-space: 24px;
  }
}
@media (max-width: 768px) {
  :root {
    --page-space: 16px;
  }
}
.sp-mt-1 {
  margin-top: 1px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-1 {
    margin-top: 1px !important;
  }
}
.sp-mt-2 {
  margin-top: 2px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-2 {
    margin-top: 2px !important;
  }
}
.sp-mt-3 {
  margin-top: 3px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-3 {
    margin-top: 3px !important;
  }
}
.sp-mt-4 {
  margin-top: 4px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-4 {
    margin-top: 4px !important;
  }
}
.sp-mt-5 {
  margin-top: 5px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-5 {
    margin-top: 5px !important;
  }
}
.sp-mt-6 {
  margin-top: 6px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-6 {
    margin-top: 6px !important;
  }
}
.sp-mt-7 {
  margin-top: 7px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-7 {
    margin-top: 7px !important;
  }
}
.sp-mt-8 {
  margin-top: 8px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-8 {
    margin-top: 8px !important;
  }
}
.sp-mt-9 {
  margin-top: 9px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-9 {
    margin-top: 9px !important;
  }
}
.sp-mt-10 {
  margin-top: 10px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-10 {
    margin-top: 10px !important;
  }
}
.sp-mt-11 {
  margin-top: 11px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-11 {
    margin-top: 11px !important;
  }
}
.sp-mt-12 {
  margin-top: 12px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-12 {
    margin-top: 12px !important;
  }
}
.sp-mt-13 {
  margin-top: 13px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-13 {
    margin-top: 13px !important;
  }
}
.sp-mt-14 {
  margin-top: 14px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-14 {
    margin-top: 14px !important;
  }
}
.sp-mt-15 {
  margin-top: 15px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-15 {
    margin-top: 15px !important;
  }
}
.sp-mt-16 {
  margin-top: 16px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-16 {
    margin-top: 16px !important;
  }
}
.sp-mt-17 {
  margin-top: 17px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-17 {
    margin-top: 17px !important;
  }
}
.sp-mt-18 {
  margin-top: 18px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-18 {
    margin-top: 18px !important;
  }
}
.sp-mt-19 {
  margin-top: 19px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-19 {
    margin-top: 19px !important;
  }
}
.sp-mt-20 {
  margin-top: 20px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-20 {
    margin-top: 20px !important;
  }
}
.sp-mt-21 {
  margin-top: 21px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-21 {
    margin-top: 21px !important;
  }
}
.sp-mt-22 {
  margin-top: 22px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-22 {
    margin-top: 22px !important;
  }
}
.sp-mt-23 {
  margin-top: 23px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-23 {
    margin-top: 23px !important;
  }
}
.sp-mt-24 {
  margin-top: 24px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-24 {
    margin-top: 24px !important;
  }
}
.sp-mt-25 {
  margin-top: 25px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-25 {
    margin-top: 25px !important;
  }
}
.sp-mt-26 {
  margin-top: 26px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-26 {
    margin-top: 26px !important;
  }
}
.sp-mt-27 {
  margin-top: 27px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-27 {
    margin-top: 27px !important;
  }
}
.sp-mt-28 {
  margin-top: 28px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-28 {
    margin-top: 28px !important;
  }
}
.sp-mt-29 {
  margin-top: 29px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-29 {
    margin-top: 29px !important;
  }
}
.sp-mt-30 {
  margin-top: 30px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-30 {
    margin-top: 30px !important;
  }
}
.sp-mt-31 {
  margin-top: 31px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-31 {
    margin-top: 31px !important;
  }
}
.sp-mt-32 {
  margin-top: 32px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-32 {
    margin-top: 32px !important;
  }
}
.sp-mt-33 {
  margin-top: 33px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-33 {
    margin-top: 33px !important;
  }
}
.sp-mt-34 {
  margin-top: 34px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-34 {
    margin-top: 34px !important;
  }
}
.sp-mt-35 {
  margin-top: 35px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-35 {
    margin-top: 35px !important;
  }
}
.sp-mt-36 {
  margin-top: 36px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-36 {
    margin-top: 36px !important;
  }
}
.sp-mt-37 {
  margin-top: 37px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-37 {
    margin-top: 37px !important;
  }
}
.sp-mt-38 {
  margin-top: 38px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-38 {
    margin-top: 38px !important;
  }
}
.sp-mt-39 {
  margin-top: 39px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-39 {
    margin-top: 39px !important;
  }
}
.sp-mt-40 {
  margin-top: 40px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-40 {
    margin-top: 40px !important;
  }
}
.sp-mt-41 {
  margin-top: 41px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-41 {
    margin-top: 41px !important;
  }
}
.sp-mt-42 {
  margin-top: 42px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-42 {
    margin-top: 42px !important;
  }
}
.sp-mt-43 {
  margin-top: 43px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-43 {
    margin-top: 43px !important;
  }
}
.sp-mt-44 {
  margin-top: 44px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-44 {
    margin-top: 44px !important;
  }
}
.sp-mt-45 {
  margin-top: 45px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-45 {
    margin-top: 45px !important;
  }
}
.sp-mt-46 {
  margin-top: 46px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-46 {
    margin-top: 46px !important;
  }
}
.sp-mt-47 {
  margin-top: 47px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-47 {
    margin-top: 47px !important;
  }
}
.sp-mt-48 {
  margin-top: 48px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-48 {
    margin-top: 48px !important;
  }
}
.sp-mt-49 {
  margin-top: 49px !important;
}

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

@media (max-width: 1024px) {
  .res-mt-49 {
    margin-top: 49px !important;
  }
}
/**
    * 마이페이지 베타 아이콘
 */
.member-icon-beta {
  background-image: url("/images/icons/member.svg") !important;
  background-size: contain;
  height: 32px;
  width: 32px;
}
.member-icon-beta.member-icon-24 {
  width: 24px;
  height: 24px;
}
.member-icon-beta.member-icon-20 {
  width: 20px;
  height: 20px;
}
.member-icon-beta.member-icon-16 {
  width: 16px;
  height: 16px;
}

html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

i {
  font-style: normal;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}
a:hover:not(.init) {
  color: var(--primary);
}
a:hover:not(.init) [class*=icons-].hover {
  background-color: var(--primary) !important;
}

strong {
  font-weight: inherit;
}
strong.m {
  font-weight: 500;
}
strong.sb {
  font-weight: 600;
}
strong.b {
  font-weight: 700;
}
strong.eb {
  font-weight: 800;
}

img {
  max-width: 100%;
}

button {
  all: unset;
  cursor: pointer;
}

* {
  box-sizing: border-box;
}
*:focus-visible {
  outline: 0;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("/fonts/pretendard/Pretendard-ExtraBold.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("/fonts/pretendard/Pretendard-Bold.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("/fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("/fonts/pretendard/Pretendard-Medium.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("/fonts/pretendard/Pretendard-Regular.woff2") format("woff2"), url("/fonts/pretendard/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "VITRO-CORE-TTF";
  font-weight: 400;
  font-display: swap;
  src: local("VITRO-CORE-TTF"), url("/fonts/vitro/VITRO-CORE-TTF.woff2") format("woff2"), url("/fonts/vitro/VITRO-CORE-TTF.woff") format("woff");
}
html,
body {
  font-family: "Pretendard", arial, sans-serif;
}

body {
  font-size: var(--sizem);
  padding-right: 4px;
  padding-right: 0;
}
@media only screen and (min-device-width: 1024px) {
  body::-webkit-scrollbar-track {
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
  }
  body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
  }
  body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bdbdbd;
  }
}
@media (max-width: 768px) {
  body {
    font-size: var(--sizexs);
  }
}
body .verdana {
  font-family: Verdana;
}
body .txt-center {
  text-align: center;
}
body .ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
body .no-wrap {
  white-space: nowrap;
}

.guide-wrap small {
  font-size: var(--sizes);
}
.guide-wrap .guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  color: #fff;
  padding: 20px 38px;
}
.guide-wrap .guide-header:not(.border) {
  background-color: var(--primary);
}
.guide-wrap .guide-header.border {
  border-bottom: 2px solid var(--primary);
  padding: 20px 38px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.guide-wrap .guide-header .logo {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/images/logo.svg");
  display: inline-block;
  width: 148px;
  height: 30px;
}
.guide-wrap .guide-contents {
  padding: 38px 24px;
}
@media (max-width: 768px) {
  .guide-wrap .guide-contents {
    padding: 24px var(--mobile-space);
  }
}
.guide-wrap .guide-contents .size-logo {
  font-size: 24px;
}
.guide-wrap .guide-contents > dl {
  margin: 20px;
}
@media (max-width: 768px) {
  .guide-wrap .guide-contents > dl {
    margin: 20px 0;
  }
}
.guide-wrap .guide-contents > dl.guide-space {
  margin-top: 60px;
}
.guide-wrap .guide-contents > dl > dt {
  margin-bottom: 20px;
  font-size: 20px;
}
.guide-wrap .guide-contents > dl > dt.line {
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}
.guide-wrap .guide-contents > dl > dt.line:first-letter {
  color: var(--primary);
  text-transform: uppercase;
}
.guide-wrap .guide-contents > dl > dd {
  margin-bottom: 10px;
}
.guide-wrap .guide-line {
  border: 1px solid var(--primary);
  height: 1px;
  margin: 60px 0;
  opacity: 0.5;
}

.guide-demo-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 500px;
  background-color: var(--grayf8);
  margin: 20px 0;
}
.guide-demo-img::before {
  content: "이미지 영역";
  color: var(--graya);
}