*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
article,
aside,
details,
figcaption,
figure,
header,
hgroup,
menu,
div,
nav,
section,
header,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
audio,
video,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.5;
  background: transparent;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
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,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  vertical-align: baseline;
}

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

ul,
ol,
li,
dl,
dt,
dd,
i {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

caption,
legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

select,
input,
textarea {
  color: var(--color-black, #000000);
  font-family: inherit;
}

select,
input {
  vertical-align: middle;
}

address,
em,
i {
  font-style: normal;
}

label {
  margin: 0;
  padding: 0;
}

hr {
  margin: 0;
  border: none;
  padding: 0;
  display: block;
}

form,
figure,
figcaption {
  padding: 0;
  margin: 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}

strong,
b {
  font-weight: 700;
}

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

select {
  font-family: inherit;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 0px);
}

body {
  font-family: var(--font-ko, Pretendard Variable), var(--font-en, AvantGarde LT), "Pretendard", "Noto Sans KR", "Century Gothic", -apple-system, "Apple SD Gothic Neo", sans-serif;
  margin: 0;
  font-size: 14px;
  color: var(--color-black, #000000);
  line-height: 157.143%;
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: none;
}

:root {
  --safe-bottom: env(safe-area-inset-bottom);
}

body.android {
  --safe-bottom: 0px;
}

@font-face {
  font-family: "Pretendard Variable";
  src: url("./fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+3130-318F, U+AC00-D7A3;
}
@font-face {
  font-family: "AvantGarde LT";
  src: url("./fonts/AvantGarde-Medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AvantGarde LT";
  src: url("./fonts/AvantGarde-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.wrap {
  padding-top: var(--header-height, 0px);
}

.wrap.main-wrap,
.wrap.pdp-wrap {
  padding-top: var(--notice-height, 0px);
}

.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: var(--z-loading, 9999);
  padding: 12px 16px;
  background: var(--color-black, #000000);
  color: var(--color-white, #ffffff);
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.skip-nav:focus {
  top: 0;
}

.notice {
  display: grid;
  grid-template-rows: 1fr;
  background: var(--color-black, #000000);
  color: var(--color-white, #ffffff);
}
.notice.is-scrolled {
  grid-template-rows: 0fr;
}
.notice > div {
  min-height: 0;
  overflow: hidden;
}
.notice i[class^=ico-], .notice i[class*=" ico-"] {
  background-color: var(--color-white, #ffffff);
}
.notice .notice-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  position: relative;
}
.notice .notice-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.notice .notice-swiper .swiper-wrapper {
  height: 100%;
}
.notice .notice-swiper .swiper-slide {
  height: 100%;
  display: flex;
  align-items: center;
}
.notice .notice-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 12px 32px 12px 12px;
}
.notice .notice-content.is-col {
  flex-direction: column;
  gap: 2px;
}
.notice .notice-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.notice .notice-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.notice .notice-text {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-white, #ffffff);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notice .notice-link {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-white, #ffffff);
  text-decoration: underline;
  white-space: nowrap;
}
.notice .notice-link-row {
  display: flex;
  align-items: center;
  gap: 32px;
}
.notice .notice-close {
  position: absolute;
  z-index: 100;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header, 200);
}

.header {
  --hc: var(--color-black, #000000);
  --hbg: var(--color-white, #ffffff);
  --hcReverse: var(--color-white, #ffffff);
  padding: 12px var(--mobile-gap, 12px) 6px;
  background: var(--hbg);
}
.header .header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .logo {
  width: 104px;
  height: 44px;
  transition: width 0.3s ease, height 0.3s ease;
}
.header.is-menu-open .logo {
  transition: none;
}
.header .logo-link {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask: url("../images/logo/img-maje-logo.svg") center center/contain no-repeat;
  mask: url("../images/logo/img-maje-logo.svg") center center/contain no-repeat;
  background-color: var(--hc);
}
.header .header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header .header-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
}
.header .header-menu-btn i[class^=ico-], .header .header-menu-btn i[class*=" ico-"] {
  background-color: var(--hc);
}
.header .header-menu-btn .ico-menu {
  display: flex;
}
.header .header-menu-btn .ico-close,
.header .header-menu-btn .ico-menu-close {
  display: none;
}
.header.is-menu-open .ico-menu {
  display: none;
}
.header.is-menu-open .ico-close,
.header.is-menu-open .ico-menu-close {
  display: flex;
}
.header .header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.header:not(.is-top) {
  padding-bottom: 6px;
}
.header:not(.is-top) .header-search-btn {
  display: none;
}
.header.is-top .header-search, .header.is-menu-open .header-search {
  display: none;
}
.header .header-search {
  margin-top: 10px;
  padding: 0;
}
.header .header-search-bar {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: var(--line-width, 1px) solid var(--hc, var(--color-black, #000000));
  border-radius: var(--radius-full, 999px);
}
.header .header-search-bar-label {
  font-size: 12px;
  line-height: 1;
  color: var(--color-gray300, #bbbbbb);
}

.header .icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.header .icon-btn.icon-btn-login.is-login::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle, 50%);
  background-color: var(--color-point-secondary, #f396f5);
}
.header .icon-btn .icon-count {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 18px;
  height: 18px;
  padding-inline: 3px;
  background: var(--color-gray30, #f6f6f6);
  color: var(--hc);
  font-size: 9px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  border-radius: var(--radius-circle, 50%);
  white-space: nowrap;
  pointer-events: none;
}
.header .icon-btn.has-count .icon-count {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-point-secondary, #f396f5);
}
.header.is-menu-open .icon-btn .icon-count {
  display: none;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 199;
  width: 100%;
  height: 100%;
  padding-top: var(--header-height);
  background: var(--color-white, #ffffff);
  display: none;
}
.menu.is-open {
  display: flex;
  flex-direction: column;
}
.menu .menu-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 32px;
}
.menu .menu-body {
  padding: 32px var(--mobile-gap, 12px) 0;
  min-height: 100%;
}
.menu .menu-gnb-list {
  padding: 0;
  padding-bottom: 16px;
}
.menu .menu-gnb-item {
  display: flex;
  align-items: center;
}
.menu .menu-gnb-link {
  width: 100%;
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-black, #000000);
  letter-spacing: 1px;
}
.menu .menu-gnb-link:active {
  text-decoration: underline;
  text-underline-position: from-font;
}
.menu .menu-gnb-link::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 16px;
  height: 16px;
  -webkit-mask: url("../images/ico/ico-chev-right.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-right.svg") center/contain no-repeat;
  background-color: var(--color-black, #000000);
}
.menu .menu-service {
  margin: 16px 0 0;
}
.menu .menu-service .menu-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.menu .menu-sub-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
.menu .menu-sub-link {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.menu .depth2-panel {
  display: none;
}
.menu .depth2-panel.is-open {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: calc(var(--header-height) + 24px);
  overflow-y: auto;
  background: var(--color-white, #ffffff);
  z-index: 1;
}
.menu .depth2-back-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
}
.menu .depth2-back-btn::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  -webkit-mask: url("../images/ico/ico-chev-left.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-left.svg") center/contain no-repeat;
  background-color: var(--color-black, #000000);
}
.menu .depth2-body {
  padding-bottom: 32px;
}
.menu .depth2-back-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-black, #000000);
}
.menu .depth2-groups {
  padding: 0 var(--mobile-gap, 12px) 32px;
}
.menu .depth2-group-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.menu .depth2-group {
  margin-bottom: 0;
}
.menu .depth2-title {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 0 0 24px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-black, #000000);
}
.menu .depth2-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-black, #000000);
  min-width: 1px;
}
.menu .depth2-list {
  padding-left: 24px;
}
.menu .depth2-link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  height: 38px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.menu .depth2-link-unerline {
  text-decoration: underline;
}
.menu .depth2-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--color-black, #000000);
  vertical-align: baseline;
  position: relative;
  top: -4px;
}
.menu .depth2-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 12px 32px;
}
.menu .depth2-product-link {
  display: block;
  color: var(--color-black, #000000);
}
.menu .depth2-product-img picture {
  display: block;
  width: 100%;
}
.menu .depth2-product-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.menu .depth2-product-name {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
}
.menu .depth2-banner-wrap {
  display: grid;
  padding: 0 var(--mobile-gap, 12px);
}
.menu .depth2-swiper {
  width: 100%;
}
.menu .depth2-swiper .swiper-pagination {
  position: absolute;
  bottom: 12px;
  padding: 2px 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}
.menu .depth2-swiper .swiper-pagination:empty {
  display: none;
}
.menu .depth2-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle, 50%);
  background: transparent;
  border: var(--line-width, 1px) solid var(--color-white, #ffffff);
  opacity: 1;
  margin: 0 !important;
}
.menu .depth2-swiper .swiper-pagination-bullet-active {
  background: var(--color-white, #ffffff);
}
.menu .depth2-banner-slide {
  display: block;
  position: relative;
  overflow: hidden;
}
.menu .depth2-banner-slide picture {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.menu .depth2-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menu .depth2-banner-text {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  display: grid;
  align-items: center;
  gap: 8px;
  color: var(--color-white, #ffffff);
  text-align: center;
}
.menu .depth2-banner-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--mobile-gap, 12px);
}
.menu .depth2-banner-title {
  font-size: 13px;
  line-height: 20px;
  text-decoration: underline;
}

.main-wrap .header {
  --hbg: transparent;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.main-wrap .header.is-top {
  --hc: var(--color-white, #ffffff);
  --hcReverse: var(--color-black, #000000);
}
.main-wrap .header.is-top.is-menu-open {
  --hbg: var(--color-white, #ffffff);
  background-color: var(--color-white, #ffffff);
  --hc: var(--color-black, #000000);
  --hcReverse: var(--color-white, #ffffff);
}
.main-wrap .header:not(.is-top) {
  --hbg: var(--color-white, #ffffff);
  background-color: var(--color-white, #ffffff);
}
.main-wrap .header .header-actions .icon-btn i[class^=ico-], .main-wrap .header .header-actions .icon-btn i[class*=" ico-"],
.main-wrap .header .header-actions .header-search-btn i[class^=ico-],
.main-wrap .header .header-actions .header-search-btn i[class*=" ico-"] {
  background-color: var(--hc);
  transition: background-color 0.3s ease;
}
.main-wrap .header.is-top .logo {
  width: 171px;
  height: 65px;
}

.plp-wrap .header .header-search-btn {
  display: none;
}
.plp-wrap .header.is-top .header-search {
  display: block;
}

.search-plp-wrap .header {
  padding-bottom: 6px;
}
.search-plp-wrap .header .header-search-btn {
  display: none;
}
.search-plp-wrap .header.is-top .header-search {
  display: block;
}

.pdp-wrap .header {
  --hbg: transparent;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.pdp-wrap .header:not(.is-top), .pdp-wrap .header.is-menu-open {
  --hbg: var(--color-white, #ffffff);
  background-color: var(--color-white, #ffffff);
}

.order-wrap .header .header-actions,
.order-wrap .header .header-search {
  display: none;
}
.order-wrap .header:not(.is-top) {
  padding-bottom: 6px;
}

.member-wrap .header:not(.is-top),
.error-wrap .header:not(.is-top),
.mypage-wrap .header:not(.is-top),
.special-wrap .header:not(.is-top),
.brand-wrap .header:not(.is-top) {
  padding-bottom: 6px;
}
.member-wrap .header:not(.is-top) .header-search-btn,
.error-wrap .header:not(.is-top) .header-search-btn,
.mypage-wrap .header:not(.is-top) .header-search-btn,
.special-wrap .header:not(.is-top) .header-search-btn,
.brand-wrap .header:not(.is-top) .header-search-btn {
  display: flex;
}
.member-wrap .header:not(.is-top) .header-search,
.error-wrap .header:not(.is-top) .header-search,
.mypage-wrap .header:not(.is-top) .header-search,
.special-wrap .header:not(.is-top) .header-search,
.brand-wrap .header:not(.is-top) .header-search {
  display: none;
}

.wrap.mypage-wrap.plp-wrap .header .header-search {
  display: none;
}
.wrap.mypage-wrap.plp-wrap .header .header-search-btn {
  display: flex;
}

.wrap:is(.main-wrap, .plp-wrap:has(.pdp-breadcrumbs), .pdp-wrap, .special-wrap) .footer {
  margin-top: 0;
}

.footer {
  background-color: var(--color-white, #ffffff);
  margin-top: 80px;
}
.footer .footer-top {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  z-index: var(--z-top-btn, 50);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.footer .footer-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.footer .btn-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-white, #ffffff);
  border: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  border-radius: var(--radius-lg, 8px);
}
.footer .btn-top:before {
  content: "";
  display: flex;
  width: 16px;
  height: 16px;
  -webkit-mask: url("../images/ico/ico-chev-up.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-up.svg") center/contain no-repeat;
  background-color: var(--color-black, #000000);
}
.footer .footer-info-bar {
  height: 56px;
  overflow: hidden;
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
}
.footer .footer-info-swiper {
  height: 100%;
}
.footer .footer-info-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.footer .footer-info-swiper .swiper-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-black, #000000);
  letter-spacing: 0.06em;
}
.footer .footer-menu {
  padding: 22px var(--mobile-gap, 12px);
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
}
.footer .footer-menu-item {
  padding: 10px 0;
}
.footer .footer-menu-item:not(:last-child) {
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
}
.footer .footer-menu-item.is-open .footer-menu-btn::after {
  transform: rotate(180deg);
}
.footer .footer-menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  padding: 10px 0;
  letter-spacing: 1px;
  color: var(--color-black, #000000);
}
.footer .footer-menu-btn::after {
  content: "";
  display: block;
  -webkit-mask: url("../images/ico/ico-chev-down.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-down.svg") center/contain no-repeat;
  background-color: var(--color-black, #000000);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.footer .footer-menu-list li a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}
.footer .footer-menu-list li a:hover {
  text-decoration: underline;
}
.footer .footer-menu-list li span {
  display: block;
  padding: 12px 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}
.footer .footer-corp {
  padding: 16px 12px;
}
.footer .footer-corp-name {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  margin-bottom: 8px;
}
.footer .footer-corp-detail {
  font-size: 12px;
  line-height: 18px;
}
.footer .footer-corp-detail:not(:last-child) {
  margin-top: 4px;
}
.footer .footer-corp-privacy {
  margin-top: 12px;
}
.footer .footer-corp-privacy a {
  display: flex;
  width: fit-content;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  text-decoration: underline;
}
.footer .footer-link-underline {
  text-decoration: underline;
}
.footer .footer-isms {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer .footer-isms-logo {
  width: 46px;
  flex: 0 0 46px;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.footer .footer-isms-info .divider {
  margin: 0 3px;
}
.footer .footer-isms-info div {
  font-size: 12px;
  line-height: 18px;
}
.footer .footer-copyright {
  margin-top: 16px;
  font-size: 12px;
  line-height: 18px;
}

.sub-page-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
  position: relative;
}
.sub-page-title-wrap .sub-page-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.sub-page-title-wrap .select-box.with-title .select-box-list {
  left: 12px;
  right: 12px;
  transform: none;
  min-width: unset;
  width: auto;
}
.sub-page-title-wrap .select-box:not(.with-title) .select-box-trigger {
  border-color: var(--color-black, #000000);
}
.sub-page-title-wrap .select-box:not(.with-title) .select-box-list {
  border-color: var(--color-black, #000000);
}
.sub-page-title-wrap.has-back {
  position: relative;
  justify-content: center;
  padding-inline: var(--mobile-gap, 12px);
}
.sub-page-title-wrap.has-back .btn-back {
  position: absolute;
  left: var(--mobile-gap, 12px);
  top: 50%;
  transform: translateY(-50%);
}
.sub-page-title-wrap.has-back .btn-back .ico-chev-left.ico-size-18 {
  width: 20px !important;
  height: 20px !important;
}

.page-result {
  padding: 0 var(--mobile-gap, 12px) 0;
}

.page-result-img {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.page-result-content {
  margin-bottom: 32px;
}

.page-result-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  text-align: center;
}

.page-result-desc {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
.page-result-desc > * + * {
  margin-top: 16px;
}

.page-result-sub-desc {
  font-size: 13px;
  line-height: 20px;
}

.page-result-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}
.page-result-actions .btn {
  flex: 1;
}
.page-result-actions .btn:only-child {
  flex: 0 0 auto;
  width: calc(4 * (100cqw - 24px - 20px) / var(--mo-grid-cols, 6) + 3 * var(--grid-gap, 4px));
}

.pickup-info {
  border: var(--line-width, 1px) solid var(--color-gray300, #bbbbbb);
  padding: 24px;
  margin-top: 40px;
  text-align: left;
}
.pickup-info h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.pickup-info .pickup-address {
  font-size: 13px;
  line-height: 20px;
  margin-top: 16px;
  word-break: break-all;
}
.pickup-info .pickup-address *:not(:first-child) {
  margin-top: 8px;
}
.pickup-info .pickup-address .pickup-address-name {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pickup-info .pickup-location {
  font-size: 13px;
  line-height: 20px;
  margin-top: 8px;
}
.pickup-info .pickup-location a {
  display: flex;
  width: fit-content;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
  text-decoration: underline;
  margin-top: 10px;
}

body.overflow-hidden {
  overflow: hidden;
}

.search-modal {
  display: none;
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal, 300);
  background-color: var(--color-white, #ffffff);
  overflow-y: auto;
}
.search-modal.is-search-open {
  display: block;
}
.search-modal .plp-card .plp-name {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: initial;
  white-space: normal;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px var(--mobile-gap, 12px) 0;
}
.search-bar form {
  flex: 1;
  min-width: 0;
}

.search-bar-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px 0 12px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-full, 999px);
}

.search-bar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-bar-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 12px;
  line-height: 1;
  color: var(--color-black, #000000);
}
.search-bar-input::placeholder {
  color: var(--color-gray300, #bbbbbb);
}
.search-bar-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.search-bar-btn-clear {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full, 999px);
  background-color: var(--color-gray50, #efefef);
}
.search-bar-btn-clear.is-active {
  display: flex;
}

.search-bar-btn-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.search-default {
  padding: 20px var(--mobile-gap, 12px) 40px;
}

.search-result-section {
  margin-top: 40px;
}

.search-section-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}

.search-category-section {
  margin-top: 40px;
}

.search-recent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.search-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.search-recent-nodata {
  padding: 80px 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  text-align: center;
}

.search-recent-link {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-recent-btn-del {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.search-input {
  padding: 20px var(--mobile-gap, 12px) 40px;
}

.search-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.search-suggest-link {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 12px;
  margin-top: 12px;
}

.search-result-name-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.search-result-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1px;
  color: var(--color-black, #000000);
}

.search-result-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.search-result-price .price-origin {
  text-decoration: line-through;
  color: var(--color-gray300, #bbbbbb);
}

.search-result-price-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.search-resultre {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.search-resultre .btn {
  width: calc(4 * (100cqw - 24px - 20px) / var(--mo-grid-cols, 6) + 3 * var(--grid-gap, 4px));
}

.search-result .search-nodata {
  padding: 20px var(--mobile-gap, 12px) 80px;
}
.search-result .search-nodata .search-nodata-msg {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-black, #000000);
  text-align: center;
}
.search-result .search-nodata .search-nodata-msg strong {
  font-weight: 700;
}
.search-result .search-category-section {
  margin-top: 0;
  padding: 0 var(--mobile-gap, 12px);
}

.search-nodata .search-category-section {
  margin-top: 80px;
}

.search-category-scroll {
  overflow-x: auto;
  margin: 0 -12px;
  padding: 0 var(--mobile-gap, 12px);
}
.search-category-scroll::-webkit-scrollbar {
  display: none;
}

.search-category-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.search-category-link {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  text-decoration: underline;
  white-space: nowrap;
}

.store-finder {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 var(--mobile-gap, 12px) 40px;
}
.store-finder .divider {
  background-color: var(--color-gray50, #efefef);
}
.store-finder .store-finder-filter {
  display: flex;
  gap: 8px;
}
.store-finder .store-finder-filter .select-box {
  flex: 1;
}
.store-finder .store-count-bar {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.store-finder .store-count-bar strong {
  font-weight: 700;
}
.store-finder .store-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.store-finder .store-list .store-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.store-finder .store-list .store-item .store-item-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.store-finder .store-list .store-item .store-item-info .store-name {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.store-finder .store-list .store-item .store-item-info .store-addr {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  word-break: break-all;
}
.store-finder .store-list .store-item .store-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.store-finder .store-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
}
.store-finder .store-meta .store-meta-label {
  color: var(--color-gray600, #444444);
}
.store-finder .store-meta .store-meta-value {
  color: var(--color-black, #000000);
}

.terms-of-use {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 var(--mobile-gap, 12px) 40px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray600, #444444);
}
.terms-of-use .terms-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.terms-of-use .terms-sec .terms-sec-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.terms-of-use .terms-sec .terms-sec-desc {
  line-height: 20px;
}
.terms-of-use .terms-sec .terms-sec-list {
  list-style: decimal;
  padding-left: 19px;
  line-height: 20px;
}

.privacy-policy {
  padding: 0 var(--mobile-gap, 12px) 40px;
}
.privacy-policy .privacy-policy-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.privacy-policy .privacy-policy-header {
  display: flex;
  flex-direction: column;
}
.privacy-policy .privacy-version-select {
  width: 100%;
}
.privacy-policy .privacy-policy-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.privacy-policy .privacy-policy-intro {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray600, #444444);
}
.privacy-policy .privacy-labeling {
  background-color: var(--color-gray30, #f6f6f6);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.privacy-policy .privacy-labeling .privacy-labeling-title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--color-gray600, #444444);
}
.privacy-policy .privacy-labeling .privacy-labeling-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.privacy-policy .privacy-labeling .privacy-labeling-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.privacy-policy .privacy-labeling .privacy-labeling-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.privacy-policy .privacy-labeling .privacy-labeling-icon {
  width: 100%;
  max-width: 90px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.privacy-policy .privacy-labeling .privacy-labeling-text {
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}
.privacy-policy .privacy-labeling .privacy-labeling-note {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray600, #444444);
}
.privacy-policy .privacy-toc {
  list-style: disc;
  padding-left: 19px;
}
.privacy-policy .privacy-toc li {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-gray600, #444444);
}
.privacy-policy .privacy-toc li a {
  text-decoration: none;
  color: inherit;
}

.privacy-policy-sections > p {
  font-size: 13px;
  line-height: 20px;
  line-height: 20px;
  color: var(--color-gray600, #444444);
  margin-top: 0;
}
.privacy-policy-sections .labeling {
  margin-top: 16px;
  padding: 20px var(--mobile-gap, 12px);
  background: var(--color-gray50, #efefef);
}
.privacy-policy-sections .labeling h3 {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-gray800, #0e0e0e);
}
.privacy-policy-sections .labeling ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 12px;
  margin: 16px 0 0;
}
.privacy-policy-sections .labeling ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.privacy-policy-sections .labeling ul li .thum {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-md, 5px);
}
.privacy-policy-sections .labeling ul li .thum img {
  width: 54px;
}
.privacy-policy-sections .labeling ul li .desc {
  font-size: 12px;
  line-height: 18px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-gray900, #030303);
  text-align: center;
  margin-top: 8px;
}
.privacy-policy-sections .labeling ul li .more {
  display: none;
}
.privacy-policy-sections .labeling .caption {
  font-size: 12px;
  line-height: 18px;
  line-height: 20px;
  color: var(--color-gray700, #222222);
  margin-top: 12px;
}
.privacy-policy-sections .agreementMenu {
  margin: 30px 0 20px;
  padding: 20px 0;
  border-top: 1px solid var(--color-gray200, #cccccc);
  border-bottom: 1px solid var(--color-gray200, #cccccc);
}
.privacy-policy-sections .agreementMenu ul {
  margin: 0;
}
.privacy-policy-sections .agreementMenu li {
  position: relative;
  padding-left: 10px;
  margin-top: 8px;
}
.privacy-policy-sections .agreementMenu li:first-child {
  margin-top: 0;
}
.privacy-policy-sections .agreementMenu li::after {
  position: absolute;
  top: 9px;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: var(--color-gray600, #444444);
  content: "";
}
.privacy-policy-sections .agreementMenu li a {
  font-size: 13px;
  line-height: 20px;
  line-height: 20px;
  color: var(--color-gray900, #030303);
}
.privacy-policy-sections .agreeContents {
  margin: 0;
  padding: 0;
}
.privacy-policy-sections .agreeContents h3.cntTlt {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-gray900, #030303);
  margin-top: 30px;
  margin-bottom: 8px;
}
.privacy-policy-sections .agreeContents p {
  font-size: 13px;
  line-height: 20px;
  line-height: 22px;
  color: var(--color-gray700, #222222);
}
.privacy-policy-sections .agreeContents .tblWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
}
.privacy-policy-sections .agreeContents .tblWrap .tbl_board {
  width: 100%;
  min-width: 560px;
  border: 1px solid var(--color-gray200, #cccccc);
  border-bottom: 1px solid var(--color-gray200, #cccccc);
}
.privacy-policy-sections .agreeContents .tblWrap .tbl_board thead {
  background: var(--color-gray30, #f6f6f6);
}
.privacy-policy-sections .agreeContents .tblWrap .tbl_board thead th {
  padding: 10px 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-gray600, #444444);
  border-top: 1px solid var(--color-gray200, #cccccc);
  text-align: center;
  line-height: 18px;
}
.privacy-policy-sections .agreeContents .tblWrap .tbl_board tbody tr th {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-align: left;
  color: var(--color-gray600, #444444);
  background: var(--color-gray30, #f6f6f6);
  border-top: 1px solid var(--color-gray200, #cccccc);
  padding: 8px;
  vertical-align: middle;
}
.privacy-policy-sections .agreeContents .tblWrap .tbl_board tbody tr td {
  padding: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray700, #222222);
  border-top: 1px solid var(--color-gray200, #cccccc);
  text-align: left;
  vertical-align: top;
  word-break: keep-all;
}
.privacy-policy-sections .box {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid var(--color-gray200, #cccccc) !important;
  background-color: var(--color-gray30, #f6f6f6);
}
.privacy-policy-sections .box h3 {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-gray900, #030303);
  line-height: 24px;
}
.privacy-policy-sections .box span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray900, #030303);
  line-height: 20px;
}
.privacy-policy-sections table td {
  border-right: 1px solid #d5d5d5;
}

.agreeContents h3,
.agreeContents .cntTlt {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-black, #000000);
  margin-top: 20px;
  margin-bottom: 8px;
}
.agreeContents h3:first-child,
.agreeContents .cntTlt:first-child {
  margin-top: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 11px;
  line-height: 1;
  width: fit-content;
  padding: 0 2px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  color: var(--color-black, #000000);
  letter-spacing: 0;
  min-height: 16px;
}
.badge.sale {
  background: var(--color-black, #000000);
  color: var(--color-white, #ffffff);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.badge.disabled {
  background: var(--color-gray300, #bbbbbb);
  color: var(--color-white, #ffffff);
  border-color: transparent;
}
.badge.outline {
  width: fit-content;
  padding: 0 4px;
  border-color: var(--color-gray300, #bbbbbb);
  color: var(--color-black, #000000);
}
.badge.sale-sandro {
  padding: 0;
  color: var(--color-point, #eb58ee);
  border-color: transparent;
  border-width: 0;
}
.badge.badge-txt {
  border: none;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  min-height: 10px;
  border-width: 0;
}

.badge-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.pdp-breadcrumbs {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
  justify-content: center;
  margin-top: 80px;
  padding: 16px var(--mobile-gap, 12px);
}
.pdp-breadcrumbs::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, #ffffff 48%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

.pdp-breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-breadcrumbs-list::-webkit-scrollbar {
  display: none;
}

.pdp-breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pdp-breadcrumbs-item:not(:last-child)::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background-color: var(--color-black, #000000);
  -webkit-mask: url("../images/ico/ico-chev-right.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-right.svg") center/contain no-repeat;
}
.pdp-breadcrumbs-item a,
.pdp-breadcrumbs-item span {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  white-space: nowrap;
}

.pdp-category-bar {
  width: 100%;
}
.plp-wrap .pdp-category-bar {
  padding-top: 48px;
}
.pdp-category-bar .pdp-category-bar-title {
  padding: 0 var(--mobile-gap, 12px) 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.pdp-category-bar .pdp-category-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-category-bar .pdp-category-scroll::-webkit-scrollbar {
  display: none;
}
.pdp-category-bar .pdp-category-list {
  display: flex;
  gap: 8px;
  padding: 0 var(--mobile-gap, 12px);
  width: max-content;
  min-width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 1px solid transparent;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
}
.btn.h48 {
  height: 48px;
  border-radius: var(--radius-none, 0);
  font-size: 14px;
  line-height: 1;
  padding: 0 12px;
}
.btn.h38 {
  height: 38px;
  border-radius: var(--radius-md, 5px);
  font-size: 12px;
  line-height: 1;
}
.btn.h34 {
  height: 34px;
  border-radius: var(--radius-md, 5px);
  font-size: 12px;
  line-height: 1;
}
.btn.h30 {
  height: 30px;
  border-radius: var(--radius-md, 5px);
  font-size: 12px;
  line-height: 1;
}
.btn.h28 {
  height: 28px;
  border-radius: var(--radius-md, 5px);
  font-size: 12px;
  line-height: 1;
  padding: 0 6px;
}
.btn.h28:has(i) {
  padding: 0 27px;
  gap: 7px;
}
.btn.h26 {
  height: 26px;
  border-radius: var(--radius-md, 5px);
  font-size: 12px;
  line-height: 1;
}
.btn.h22 {
  height: 22px;
  border-radius: var(--radius-md, 5px);
  font-size: 12px;
  line-height: 1;
  padding: 0 6px;
}
.btn.full {
  display: flex;
  width: 100%;
}
.btn.solid-black {
  background: var(--color-black, #000000);
  border-color: var(--color-black, #000000);
  color: var(--color-white, #ffffff);
}
.btn.solid-white {
  background: var(--color-white, #ffffff);
  border-color: var(--color-white, #ffffff);
  color: var(--color-black, #000000);
}
.btn.line-black {
  background: var(--color-white, #ffffff);
  border-color: var(--color-black, #000000);
  color: var(--color-black, #000000);
}
.btn.line-white {
  background: transparent;
  border-color: var(--color-white, #ffffff);
  color: var(--color-white, #ffffff);
}
.btn:disabled, .btn.disabled {
  background: var(--color-gray300, #bbbbbb);
  border-color: var(--color-gray300, #bbbbbb);
  color: var(--color-white, #ffffff);
  pointer-events: none;
}
.btn:disabled.line-black, .btn:disabled.solid-white, .btn.disabled.line-black, .btn.disabled.solid-white {
  background: var(--color-white, #ffffff);
  border-color: var(--color-gray200, #cccccc);
  color: var(--color-gray200, #cccccc);
}

.btn-group {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.btn-group.full > .btn {
  flex: 1;
}

.btn-section {
  margin-top: 40px;
}
.btn-section .btn-section-desc {
  margin-bottom: 32px;
  font-size: 13px;
  line-height: 20px;
}
.btn-section:has(.btn-section-desc) {
  margin-top: 48px;
}
.btn-section .btn-group > * {
  flex: 1;
}
.btn-section .chk-wrap {
  margin-top: 16px;
}

.btn-sticky {
  background: var(--color-white, #ffffff);
  padding: 20px 12px 24px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.14);
}

.btn-text {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
  text-decoration: underline;
}

.btn-wish {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--color-black, #000000);
  -webkit-mask: url("../images/ico/ico-heart.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-heart.svg") center/contain no-repeat;
}
.btn-wish.is-active {
  -webkit-mask: url("../images/ico/ico-heart-on.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-heart-on.svg") center/contain no-repeat;
}

.btn-accordion {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.btn-accordion i[class^=ico-], .btn-accordion i[class*=" ico-"] {
  transition: transform 0.2s;
}
.btn-accordion[aria-expanded=true] i[class^=ico-], .btn-accordion[aria-expanded=true] i[class*=" ico-"] {
  transform: rotate(180deg);
}
.btn-accordion .ico-chev-down.ico-size-14 {
  width: 16px !important;
  height: 16px !important;
}
.btn-accordion .ico-chev-up.ico-size-16 {
  width: 12px !important;
  height: 12px !important;
}

.form-section-wrap {
  padding: 32px var(--mobile-gap, 12px);
}
.form-section-wrap + .form-section-wrap {
  padding-top: 0;
}
.sub-page-title-wrap + .form-section-wrap {
  padding-top: 0;
}

.form-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-section-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-black, #000000);
}

.form-section-hd-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-section-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  word-break: break-all;
}
.form-section-hd + .form-section-body {
  margin-top: 16px;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.id-change-form .form-field-group {
  gap: 8px;
}

.form-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-summary dt {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-black, #000000);
}
.form-summary dd {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.form-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  background: var(--color-gray30, #f6f6f6);
}

.form-row {
  display: flex;
  gap: 8px;
}

.form-row-half .select-box {
  flex: 1;
}

.form-radio-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.form-terms-label {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.form-terms-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.form-terms-box {
  overflow-y: auto;
  padding: 16px;
  background: var(--color-gray30, #f6f6f6);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray600, #444444);
}

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

.form-labeled-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-labeled-row-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.form-pickup-group .notice-list {
  margin-top: 4px;
}

.form-pickup-store {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.form-pickup-store-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.form-pickup-store-link {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  text-decoration: underline;
}

.form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.form-submit .btn {
  width: 100%;
}

.form-submit-agree {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-black, #000000);
  text-align: center;
}

.inp-underline-wrap {
  position: relative;
}
.inp-underline-wrap .inp-underline-row {
  display: flex;
  column-gap: 12px;
  border-bottom: var(--line-width, 1px) solid var(--color-gray500, #666666);
  transition: border-color 0.2s;
}
.inp-underline-wrap .inp-underline-row:has(.inp-underline-actions) {
  border-bottom: none;
}
.inp-underline-wrap .inp-underline-row:has(.inp-underline-actions) .inp-underline-inner {
  border-bottom: var(--line-width, 1px) solid var(--color-gray500, #666666);
  transition: border-color 0.2s;
}
.inp-underline-wrap .inp-underline-inner {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.inp-underline-wrap .inp-underline-inner .inp-underline-suffix {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.inp-underline-wrap .inp-underline-inner .inp-underline-suffix .suffix-txt {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-alert, #ff0000);
}
.inp-underline-wrap .inp-underline-inner [disabled] ~ .inp-underline-suffix .suffix-txt,
.inp-underline-wrap .inp-underline-inner [readonly] ~ .inp-underline-suffix .suffix-txt {
  color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap .inp-underline-label {
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, line-height 0.2s, color 0.2s, font-weight 0.2s;
}
.inp-underline-wrap .inp-underline {
  flex: 1;
  min-width: 0;
  padding: 10px 0 9px;
  border: none;
  background: transparent;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.inp-underline-wrap .inp-underline::placeholder {
  color: transparent;
}
.inp-underline-wrap .inp-underline:focus {
  outline: none;
}
.inp-underline-wrap .inp-underline:-webkit-autofill, .inp-underline-wrap .inp-underline:-webkit-autofill:hover, .inp-underline-wrap .inp-underline:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white, #ffffff) inset;
  -webkit-text-fill-color: var(--color-black, #000000);
  transition: background-color 9999s ease-in-out 0s;
}
.inp-underline-wrap .inp-underline-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}
.inp-underline-wrap .inp-underline-actions.flex-1 {
  flex: 1;
  min-width: 0;
}
.inp-underline-wrap .inp-underline-icon {
  display: none;
  align-items: center;
  height: 100%;
}
.inp-underline-wrap:has(.inp-underline:not(:placeholder-shown)) .inp-underline-icon {
  display: flex;
}
.inp-underline-wrap .inp-underline-comment {
  display: flex;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  padding-top: 4px;
}
.inp-underline-wrap .inp-underline-comment:empty {
  padding-top: 0;
}
.inp-underline-wrap .inp-underline-desc {
  display: flex;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  margin-top: 8px;
}
.inp-underline-wrap .inp-underline-row:focus-within {
  border-bottom-color: var(--color-black, #000000);
}
.inp-underline-wrap .inp-underline-row:focus-within .inp-underline-label {
  top: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
}
.inp-underline-wrap .inp-underline-row:has(.inp-underline-actions):focus-within .inp-underline-inner {
  border-bottom-color: var(--color-black, #000000);
}
.inp-underline-wrap .inp-underline-row:has(.inp-underline:not(:placeholder-shown)) .inp-underline-label {
  top: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
}
.inp-underline-wrap:has(.inp-underline[readonly]) .inp-underline-row {
  border-bottom-color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap:has(.inp-underline[readonly]) .inp-underline-row:has(.inp-underline-actions) .inp-underline-inner {
  border-bottom-color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap:has(.inp-underline[readonly]) .inp-underline-label {
  color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap:has(.inp-underline[readonly]) .inp-underline {
  color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap:has(.inp-underline:disabled) .inp-underline-row {
  border-bottom-color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap:has(.inp-underline:disabled) .inp-underline-row:has(.inp-underline-actions) .inp-underline-inner {
  border-bottom-color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap:has(.inp-underline:disabled) .inp-underline-label {
  color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap:has(.inp-underline:disabled) .inp-underline {
  color: var(--color-gray300, #bbbbbb);
}
.inp-underline-wrap.color-black:has(.inp-underline[readonly]) .inp-underline,
.inp-underline-wrap.color-black:has(.inp-underline[readonly]) .inp-underline-label {
  color: var(--color-black, #000000);
}
.inp-underline-wrap.valid .inp-underline-comment::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  -webkit-mask: url("../images/ico/ico-valid.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-valid.svg") center/contain no-repeat;
  background-color: var(--color-black, #000000);
}
.inp-underline-wrap.invalid .inp-underline-row {
  border-bottom-color: var(--color-alert, #ff0000);
}
.inp-underline-wrap.invalid .inp-underline-row:has(.inp-underline-actions) .inp-underline-inner {
  border-bottom-color: var(--color-alert, #ff0000);
}
.inp-underline-wrap.invalid .inp-underline-comment {
  color: var(--color-alert, #ff0000);
}
.inp-underline-wrap.invalid .inp-underline-comment::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  -webkit-mask: url("../images/ico/ico-valid.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-valid.svg") center/contain no-repeat;
  background-color: var(--color-alert, #ff0000);
}

.inp-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.select-box {
  position: relative;
  width: 100%;
}
.select-box .select-box-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding: 0 12px;
  border: var(--line-width, 1px) solid var(--color-gray500, #666666);
  font-size: 12px;
  line-height: 18px;
  gap: 8px;
  color: var(--color-black, #000000);
  background: var(--color-white, #ffffff);
  text-align: left;
  border-radius: var(--radius-md, 5px);
  height: 38px;
}
.select-box .select-box-trigger .select-box-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.select-box .select-box-trigger .ico-chev-down {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.select-box .select-box-trigger:disabled {
  border-color: var(--color-gray300, #bbbbbb);
  color: var(--color-gray300, #bbbbbb);
}
.select-box .select-box-trigger:disabled .ico-chev-down {
  background-color: var(--color-gray300, #bbbbbb);
}
.select-box .select-box-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 191px;
  overflow-y: auto;
  background: var(--color-white, #ffffff);
  border-left: var(--line-width, 1px) solid var(--color-gray500, #666666);
  border-right: var(--line-width, 1px) solid var(--color-gray500, #666666);
  border-bottom: var(--line-width, 1px) solid var(--color-gray500, #666666);
  border-radius: var(--radius-none, 0) var(--radius-none, 0) var(--radius-md, 5px) var(--radius-md, 5px);
  border-radius: var(--radius-none, 0) var(--radius-none, 0) var(--radius-md, 5px) var(--radius-md, 5px);
}
.select-box .select-box-list li.is-selected .option-btn .option-text {
  font-weight: 700;
}
.select-box .select-box-list .option-btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  text-align: left;
  gap: 8px;
}
.select-box .select-box-list .option-btn .option-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.select-box .select-box-list .option-btn:active {
  background: var(--color-gray30, #f6f6f6);
}
.select-box .select-box-list .option-btn:disabled {
  color: var(--color-gray300, #bbbbbb);
}
.select-box .select-box-list .option-btn .soldout-label {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--color-gray300, #bbbbbb);
}
.select-box .select-box-list .option-btn .soldout-label.is-low {
  color: var(--color-alert, #ff0000);
}
.select-box.is-open .select-box-trigger {
  border-radius: var(--radius-md, 5px) var(--radius-md, 5px) var(--radius-none, 0) var(--radius-none, 0);
}
.select-box.is-open .select-box-list {
  display: block;
}
.select-box.is-open .ico-chev-down {
  transform: rotate(180deg);
}
.select-box.with-title {
  width: 100%;
  padding: 0 12px;
}
.select-box.with-title .select-box-trigger {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 0;
  gap: 8px;
  background: transparent;
  border-radius: var(--radius-none, 0);
}
.select-box.with-title .select-box-trigger .select-box-value {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.select-box.with-title .select-box-list {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: max-content;
  max-height: none;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-md, 5px);
  overflow: hidden;
}
.select-box.with-title .select-box-list li.is-selected .option-btn {
  background-color: var(--color-gray30, #f6f6f6);
}
.select-box.with-title .select-box-list .option-btn {
  font-size: 13px;
  line-height: 20px;
  height: 40px;
  font-weight: 400;
  white-space: nowrap;
}
.select-box.with-title.is-open .select-box-trigger {
  border-radius: var(--radius-none, 0);
}
.select-box.with-title.is-reversed.is-open .select-box-trigger {
  border-radius: var(--radius-none, 0);
}
.select-box.with-title.is-reversed.is-open .select-box-list {
  transform: translateX(-50%);
}
.select-box.is-reversed.is-open .select-box-trigger {
  border-radius: var(--radius-none, 0) var(--radius-none, 0) var(--radius-md, 5px) var(--radius-md, 5px);
}
.select-box.is-reversed.is-open .select-box-list {
  top: auto;
  bottom: 100%;
  border-top: var(--line-width, 1px) solid var(--color-gray500, #666666);
  border-bottom: none;
  border-radius: var(--radius-md, 5px) var(--radius-md, 5px) var(--radius-none, 0) var(--radius-none, 0);
}
.select-box.is-reversed.is-open .select-box-list li:first-child {
  border-top: none;
  border-radius: var(--radius-none, 0);
}
.select-box.is-reversed.is-open .select-box-list li:last-child {
  border-bottom: none;
  border-radius: var(--radius-none, 0);
}

.select-box.select-box-title.with-title.is-open .select-box-trigger .ico-tri-down {
  transform: rotate(180deg);
  transition: transform 0.2s;
}

.chk-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
}
.chk-wrap .chk {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.chk-wrap .chk + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  user-select: none;
  cursor: pointer;
}
.chk-wrap .chk + label:has(.sr-only)::before {
  margin-top: 0;
}
.chk-wrap .chk + label::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-sm, 3px);
  background: var(--color-white, #ffffff);
  flex-shrink: 0;
  transition: background 0s, border-color 0s;
}
.chk-wrap .chk + label::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 8px;
  height: 5px;
  border-left: var(--line-width, 1px) solid var(--color-white, #ffffff);
  border-bottom: var(--line-width, 1px) solid var(--color-white, #ffffff);
  transform: translateY(-65%) rotate(-45deg);
  opacity: 0;
  pointer-events: none;
}
.chk-wrap .chk:checked + label::before {
  background: var(--color-black, #000000);
  border-color: var(--color-black, #000000);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.chk-wrap .chk:checked + label::after {
  animation: chk-mark-fade 0.5s ease forwards;
}
.chk-wrap .chk:disabled + label {
  color: var(--color-gray300, #bbbbbb);
  cursor: not-allowed;
}
.chk-wrap .chk:disabled + label::before {
  border-color: var(--color-gray300, #bbbbbb);
}
.chk-wrap .chk:disabled:checked + label::before {
  background-color: var(--color-gray300, #bbbbbb);
  border-color: var(--color-gray300, #bbbbbb);
}

@keyframes chk-mark-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.chk-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
}
.chk-color .chk {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.chk-color .chk + label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.chk-color .chk + label::before, .chk-color .chk + label::after {
  display: none;
}
.chk-color .chk-swatch {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-md, 5px);
  border: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chk-color .chk-swatch i {
  opacity: 0;
  transition: opacity 0.15s;
}
.chk-color .chk-swatch.chk-swatch-border {
  border-color: var(--color-gray200, #cccccc);
}
.chk-color .chk:checked + label .chk-swatch {
  border-color: var(--color-black, #000000);
}
.chk-color .chk:checked + label .chk-swatch i {
  opacity: 1;
}
.chk-color .chk:disabled + label .chk-swatch {
  opacity: 0.4;
}
.chk-color .color-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.filter-colorchip {
  display: flex;
  gap: 16px 18px;
  flex-wrap: wrap;
}
.filter-colorchip li {
  padding: 0;
}
.filter-colorchip.has-label {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 8px;
  padding: 0 16px;
}
.filter-colorchip.has-label li {
  flex: 1;
}
.filter-colorchip.has-label .chk-color .color-name {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-black, #000000);
}

.rdo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.rdo-wrap .rdo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rdo-wrap .rdo + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  user-select: none;
  cursor: pointer;
}
.rdo-wrap .rdo + label::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-full, 999px);
  background: var(--color-white, #ffffff);
  flex-shrink: 0;
  transition: border-width 0.15s;
}
.rdo-wrap .rdo:checked + label::before {
  background: var(--color-black, #000000);
  border-color: var(--color-black, #000000);
}
.rdo-wrap .rdo:disabled + label {
  color: var(--color-gray300, #bbbbbb);
}
.rdo-wrap .rdo:disabled + label::before {
  border-color: var(--color-gray300, #bbbbbb);
  background: var(--color-white, #ffffff);
}
.rdo-wrap .rdo:disabled:checked + label::before {
  background: var(--color-gray300, #bbbbbb);
  border-color: var(--color-gray300, #bbbbbb);
}

.box-radio {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.radio-item {
  position: relative;
}

.radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.box-radio.type-button .radio-item {
  min-width: 66px;
  height: 38px;
}
.box-radio.type-button .radio-item .radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: var(--line-width, 1px) solid var(--color-gray300, #bbbbbb);
  border-radius: var(--radius-md, 5px);
  font-size: 12px;
  background: var(--color-white, #ffffff);
  color: var(--color-gray500, #666666);
  padding: 0 8px;
}
.box-radio.type-button .radio-item .radio-input:checked + .radio-label, .box-radio.type-button .radio-item.is-active .radio-label {
  border-color: var(--color-black, #000000);
  color: var(--color-black, #000000);
}
.box-radio.type-button .radio-item button.radio-label {
  cursor: pointer;
  font-family: inherit;
}
.box-radio.type-button .radio-item:has(.radio-input:disabled) .radio-label,
.box-radio.type-button .radio-item:has(.radio-input:disabled) button.radio-label, .box-radio.type-button .radio-item:has(button:disabled) .radio-label,
.box-radio.type-button .radio-item:has(button:disabled) button.radio-label {
  border-color: var(--color-gray200, #cccccc);
  color: var(--color-gray300, #bbbbbb);
  background-color: var(--color-gray30, #f6f6f6);
  cursor: not-allowed;
}

.box-radio.type-swatch .radio-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 7px;
  border: var(--line-width, 1px) solid transparent;
  border-radius: var(--radius-md, 5px);
  height: 100%;
}
.box-radio.type-swatch .radio-label .radio-name {
  word-break: break-word;
}
.box-radio.type-swatch .radio-input:checked + .radio-label {
  border-color: var(--color-black, #000000);
}
.box-radio.type-card .radio-item {
  flex: 1;
  min-width: 0;
}
.box-radio.type-card .radio-item .radio-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  width: 100%;
  border: var(--line-width, 1px) solid var(--color-gray300, #bbbbbb);
  border-radius: var(--radius-md, 5px);
  background: var(--color-white, #ffffff);
  color: var(--color-gray300, #bbbbbb);
}
.box-radio.type-card .radio-item .radio-label span {
  color: var(--color-gray300, #bbbbbb);
  text-align: center;
}
.box-radio.type-card .radio-item .radio-input:checked + .radio-label {
  border-color: var(--color-black, #000000);
  color: var(--color-black, #000000);
}
.box-radio.type-card .radio-item .radio-input:checked + .radio-label span {
  color: var(--color-black, #000000);
}

.radio-img {
  width: 50px;
  aspect-ratio: var(--ratio, 0.75);
  object-fit: cover;
}

.radio-name {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--color-black, #000000);
  text-align: center;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.toggle-wrap .toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.toggle-wrap .toggle + label {
  position: relative;
  display: inline-block;
  width: 31px;
  height: 15px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-full, 999px);
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-wrap .toggle + label::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-black, #000000);
  transition: transform 0.2s, background 0.2s;
}
.toggle-wrap .toggle + label span {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.toggle-wrap .toggle:checked + label {
  background: var(--color-black, #000000);
}
.toggle-wrap .toggle:checked + label::after {
  background: var(--color-white, #ffffff);
  transform: translateX(16px);
}
.toggle-wrap .toggle:disabled + label {
  border-color: var(--color-gray300, #bbbbbb);
}
.toggle-wrap .toggle:disabled + label::after {
  background: var(--color-gray300, #bbbbbb);
}
.toggle-wrap .toggle:disabled:checked + label {
  background: var(--color-gray300, #bbbbbb);
  border-color: var(--color-gray300, #bbbbbb);
}
.toggle-wrap .toggle:disabled:checked + label::after {
  background: var(--color-white, #ffffff);
}
.toggle-wrap .toggle-label {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  border: var(--line-width, 1px) solid var(--color-gray200, #cccccc);
  background: var(--color-white, #ffffff);
  transition: border-color 0.15s;
  border-radius: var(--radius-md, 5px);
}
.stepper.is-disabled {
  border-color: var(--color-gray200, #cccccc);
  background: var(--color-gray30, #f6f6f6);
  pointer-events: none;
}
.stepper.is-disabled button i[class^=ico-], .stepper.is-disabled button i[class*=" ico-"] {
  background-color: var(--color-gray300, #bbbbbb);
}
.stepper.is-disabled .stepper-val {
  color: var(--color-gray300, #bbbbbb);
}
.stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 38px;
  touch-action: manipulation;
}
.stepper button .ico-minus.ico-size-16,
.stepper button .ico-plus.ico-size-16 {
  width: 12px !important;
  height: 12px !important;
}
.stepper button:disabled i[class^=ico-], .stepper button:disabled i[class*=" ico-"] {
  background-color: var(--color-gray300, #bbbbbb);
}
.stepper .stepper-val {
  flex: 1;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--color-black, #000000);
}

.textarea-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px;
  border: var(--line-width, 1px) solid var(--color-gray500, #666666);
  border-radius: var(--radius-md, 5px);
}
.textarea-wrap .textarea {
  min-height: 110px;
  padding: 0;
  border: none;
  border-radius: var(--radius-none, 0);
  resize: none;
  font-size: 12px;
}
.textarea-wrap .textarea::placeholder {
  color: var(--color-black, #000000);
}
.textarea-wrap .textarea:focus {
  outline: none;
}
.textarea-wrap:has(.textarea:disabled) {
  background: var(--color-gray50, #efefef);
  border-color: var(--color-gray200, #cccccc);
}
.textarea-wrap:has(.textarea:disabled) .textarea {
  color: var(--color-gray300, #bbbbbb);
  cursor: not-allowed;
}
.textarea-wrap:has(.textarea:disabled) .textarea::placeholder {
  color: var(--color-gray300, #bbbbbb);
}
.textarea-wrap:has(.textarea:disabled) .textarea-counter {
  color: var(--color-gray300, #bbbbbb);
}
.textarea-wrap:has(.textarea[readonly]) {
  background: var(--color-gray50, #efefef);
  border-color: var(--color-gray200, #cccccc);
}
.textarea-wrap:has(.textarea[readonly]) .textarea {
  cursor: default;
}
.textarea-wrap:has(.textarea[readonly]) .textarea-counter {
  color: var(--color-gray700, #222222);
}

.textarea-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

.textarea-counter {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
}

.textarea-current {
  font-style: normal;
  color: var(--color-black, #000000);
}

[role=tabpanel][hidden] {
  display: none;
}

.tab-wrap {
  width: 100%;
  overflow-x: auto;
}
.tab-wrap::-webkit-scrollbar {
  display: none;
}
.tab-wrap .tab-bar {
  width: 100%;
}
.tab-wrap .tab-item a,
.tab-wrap .tab-item button {
  font-size: 16px;
  line-height: 24px;
}

.tab-bar {
  display: flex;
}

.tab-item {
  flex: 1;
}
.tab-item button,
.tab-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 8px;
  border-bottom: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-gray300, #bbbbbb);
  white-space: nowrap;
}
.tab-item.is-active button, .tab-item.is-active a {
  border-bottom-color: var(--color-black, #000000);
  color: var(--color-black, #000000);
}

.divider {
  display: block;
  background: var(--color-gray200, #cccccc);
}
.divider, .divider.hor {
  width: 100%;
  height: var(--line-width, 1px);
  margin: 0;
}
.divider.ver {
  display: inline-block;
  width: var(--line-width, 1px);
  height: 12px;
  vertical-align: middle;
}
.divider.dark {
  background: var(--color-black, #000000);
}
.divider.thin {
  background: var(--color-gray50, #efefef);
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  --swiper-pagination-bullet-horizontal-gap: 0;
}
.indicator .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 999px);
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  background: transparent;
  opacity: 1;
  transition: background 0.2s;
}
.indicator .swiper-pagination-bullet-active {
  background: var(--color-black, #000000);
}

.btn-autoplay {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}
.btn-autoplay .ico-autoplay-play {
  display: none;
}
.btn-autoplay .ico-autoplay-pause {
  display: inline-block;
}
.btn-autoplay.is-paused .ico-autoplay-play {
  display: inline-block;
}
.btn-autoplay.is-paused .ico-autoplay-pause {
  display: none;
}

.veil {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-loading, 9999);
}
.veil.veil-global {
  position: fixed;
}
.veil .underlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white, #ffffff);
  opacity: 0.5;
}
.veil .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background-image: url("../images/loader/loader.gif");
  background-size: cover;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  vertical-align: top;
}
.tbl th,
.tbl td {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 22px;
  border: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.tbl thead th {
  background: var(--color-gray30, #f6f6f6);
  font-weight: 700;
}
.tbl tbody th {
  font-weight: 400;
  background: var(--color-gray30, #f6f6f6);
}

.tbl-header .tbl-unit {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray600, #444444);
  text-align: right;
  margin-top: 8px;
}

.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray200, #cccccc) var(--color-gray30, #f6f6f6);
}
.tbl-scroll::-webkit-scrollbar {
  height: 12px;
}
.tbl-scroll::-webkit-scrollbar-track {
  background: var(--color-gray30, #f6f6f6);
  border-radius: var(--radius-full, 999px);
}
.tbl-scroll::-webkit-scrollbar-thumb {
  background: var(--color-gray200, #cccccc);
  border-radius: var(--radius-full, 999px);
}
.tbl-scroll > .tbl {
  table-layout: fixed;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}
.tbl-scroll > .tbl > thead > tr > th,
.tbl-scroll > .tbl > thead > tr > td,
.tbl-scroll > .tbl > tbody > tr > th,
.tbl-scroll > .tbl > tbody > tr > td {
  border-top: none;
  border-left: none;
  border-right: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  border-bottom: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.tbl-scroll > .tbl > thead > tr:first-child > th,
.tbl-scroll > .tbl > thead > tr:first-child > td {
  border-top: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.tbl-scroll > .tbl:not(:has(> thead)) > tbody > tr:first-child > th, .tbl-scroll > .tbl:not(:has(> thead)) > tbody > tr:first-child > td {
  border-top: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.tbl-scroll > .tbl > thead > tr > th:first-child,
.tbl-scroll > .tbl > tbody > tr > th {
  position: sticky;
  left: 0;
  z-index: 1;
  border-left: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.tbl-scroll > .tbl > thead > tr > th:first-child {
  background: var(--color-gray30, #f6f6f6);
}
.tbl-scroll > .tbl > tbody > tr > th {
  background: var(--color-white, #ffffff);
}
.tbl-scroll > .tbl:not(:has(> thead)) > tbody > tr > th {
  background: var(--color-gray30, #f6f6f6);
}

col.col-pc-40 {
  width: 40px;
}

col.col-pc-60 {
  width: 60px;
}

col.col-pc-80 {
  width: 80px;
}

col.col-pc-100 {
  width: 100px;
}

col.col-pc-120 {
  width: 120px;
}

col.col-pc-140 {
  width: 140px;
}

col.col-pc-160 {
  width: 160px;
}

col.col-pc-180 {
  width: 180px;
}

col.col-pc-200 {
  width: 200px;
}

col.col-pc-240 {
  width: 240px;
}

.line-tbl {
  width: 100%;
  border-collapse: collapse;
}
.line-tbl th {
  padding: 10px 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
  vertical-align: middle;
}
.line-tbl td {
  padding: 24px 8px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  border-bottom: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.line-tbl td:first-child {
  text-align: left;
  padding-left: 0;
}

.plp-card {
  min-width: 0;
  width: 100%;
}
.plp-card .plp-media {
  position: relative;
}
.plp-card .thumb-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 0.75);
  overflow: hidden;
}
.plp-card .swiper.plp-swiper {
  width: 100%;
  aspect-ratio: var(--ratio, 0.75);
}
.plp-card .thumb-link img,
.plp-card .thumb-link video,
.plp-card .plp-swiper img,
.plp-card .plp-swiper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plp-card .plp-noimage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-gray50, #efefef);
}
.plp-card .soldout-dim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1;
}
.plp-card .plp-status {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 10px);
  padding-right: 48px;
  z-index: 2;
  display: flex;
}
.swiper .plp-card .plp-status {
  padding-right: 24px;
}
.plp-card .plp-status > * {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plp-card .plp-status .badge-txt {
  display: inline-block;
  width: auto;
  max-width: 100%;
}
.plp-card .btn-plp-prev,
.plp-card .btn-plp-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plp-card .btn-plp-prev {
  left: 4px;
}
.plp-card .btn-plp-next {
  right: 4px;
}
.plp-card .plp-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 0 8px;
  min-width: 0;
}
.plp-card .plp-name-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
.plp-card .plp-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 16px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plp-card .btn-wish {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.plp-card .plp-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plp-card .plp-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
}
.plp-card .plp-price .price-origin {
  text-decoration: line-through;
}
.plp-card .plp-colors {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  pointer-events: none;
}
.plp-card .plp-colors .color-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle, 50%);
}
.plp-card .plp-colors .color-chip.is-white {
  border: 1px solid var(--color-gray500, #666666);
}
.plp-card .plp-colors .color-more {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--color-black, #000000);
}
.plp-card.is-soldout .soldout-dim {
  opacity: 1;
}

.plp-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 4px;
}
.plp-list .plp-info {
  gap: 0;
  padding: 8px 12px 0;
}
.plp-list .plp-info .plp-price-wrap {
  margin-top: 4px;
}
.plp-list .plp-info .plp-colors {
  margin-top: 8px;
}

.list-nodata {
  padding: 80px var(--mobile-gap, 12px);
  text-align: center;
  font-size: 13px;
  line-height: 20px;
}

.plp-category-bar .plp-category-title {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 20px var(--mobile-gap, 12px);
}
.plp-category-bar .plp-category-name {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.plp-category-bar .plp-category-count {
  font-size: 12px;
  line-height: 18px;
}
.plp-category-bar .category-links-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--mobile-gap, 12px) 16px;
}
.plp-category-bar .category-links-wrap::-webkit-scrollbar {
  display: none;
}
.plp-category-bar .category-links-wrap {
  scrollbar-width: none;
}
.plp-category-bar .category-links {
  display: flex;
  gap: 8px;
  width: max-content;
}
.plp-category-bar .sort-filter-wrap {
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--mobile-gap, 12px);
}

.plp-filter-tags {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px var(--mobile-gap, 12px);
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
}
.plp-filter-tags .filter-tag-scroll {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.plp-filter-tags .filter-tag-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, #ffffff 48%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.plp-filter-tags .filter-tag-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-right: 30px;
}
.plp-filter-tags .filter-tag-list::-webkit-scrollbar {
  display: none;
}
.plp-filter-tags .filter-tag-list {
  scrollbar-width: none;
}
.plp-filter-tags .filter-tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-shrink: 0;
}
.plp-filter-tags .tag-color {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full, 999px);
  flex-shrink: 0;
}
.plp-filter-tags .tag-color.is-white {
  box-shadow: inset 0 0 0 1px var(--color-gray200, #cccccc);
}
.plp-filter-tags .tag-text {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  white-space: nowrap;
}
.plp-filter-tags .btn-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  color: var(--color-black, #000000);
  flex-shrink: 0;
  gap: 4px;
}
.plp-filter-tags .btn-tag-remove.btn-tag-colorchip {
  gap: 4px;
}
.plp-filter-tags .btn-filter-reset {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray500, #666666);
  text-decoration: underline;
  flex-shrink: 0;
  white-space: nowrap;
}

.plp-load-more {
  padding: 48px 0 0;
  width: calc(4 * (100cqw - 24px - 20px) / var(--mo-grid-cols, 6) + 3 * var(--grid-gap, 4px));
  margin: 0 auto;
  text-align: center;
}
.plp-load-more .load-paging {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 18px;
}

progress.load-more-progress {
  height: 6px;
  border: none;
  border-radius: var(--radius-full, 999px);
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
}
progress.load-more-progress::-webkit-progress-bar {
  background: var(--color-gray50, #efefef);
  border-radius: var(--radius-full, 999px);
}
progress.load-more-progress::-webkit-progress-value {
  background: var(--color-point, #eb58ee);
  transition: width 0.3s;
  border-radius: var(--radius-full, 999px);
}
progress.load-more-progress::-moz-progress-bar {
  background: var(--color-gray50, #efefef);
  border-radius: var(--radius-full, 999px);
}

.load-more-btns {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  gap: 12px;
}

.plp-recently-viewed {
  padding-top: 32px;
}
.plp-wrap .plp-recently-viewed {
  padding: 48px 0 0;
}
.pdp-wrap .plp-recently-viewed {
  padding: 32px 0 48px 0;
}
.order-wrap .plp-recently-viewed, .mypage-wrap .plp-recently-viewed {
  padding-top: 32px;
}
.search-input .plp-recently-viewed {
  padding-top: 40px;
  margin-left: -12px;
  margin-right: -12px;
}

.recently-viewed-hd {
  padding: 0 var(--mobile-gap, 12px) 16px;
}

.recently-viewed-tit {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.recently-viewed-body {
  position: relative;
  overflow: hidden;
}
.recently-viewed-body .plp-card .plp-info {
  padding-left: 0;
}

.recently-viewed-swiper .swiper-wrapper {
  padding-left: var(--mobile-gap, 12px);
}

.btn-rv-prev,
.btn-rv-next {
  position: absolute;
  top: 82px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle, 50%);
  background: var(--color-white, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.btn-rv-prev {
  left: 12px;
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.25);
}

.btn-rv-next {
  right: 9px;
  box-shadow: -2px 3px 2px rgba(0, 0, 0, 0.25);
}

.btn-rv-prev.swiper-button-disabled,
.btn-rv-next.swiper-button-disabled {
  display: none;
}

.modal[data-modal-id=sort-pop] .sort-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}
.modal[data-modal-id=sort-pop] .sort-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}
.modal[data-modal-id=sort-pop] .sort-btn[aria-current=true]::before {
  background-color: var(--color-black, #000000);
}
.modal[data-modal-id=sort-pop] .sort-btn::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-circle, 50%);
  flex-shrink: 0;
  transition: background 0.15s;
}

.modal[data-modal-id=filter-pop] .modal-body {
  padding-top: 12px;
}
.modal[data-modal-id=filter-pop] .filter-sec {
  padding: 20px 0;
}
.modal[data-modal-id=filter-pop] .filter-sec .sec-tit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  line-height: 20px;
}
.modal[data-modal-id=filter-pop] .filter-sec .sec-tit .ico-accordion-arr {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.modal[data-modal-id=filter-pop] .filter-sec .sec-tit[aria-expanded=true] .ico-accordion-arr {
  transform: rotate(180deg);
}
.modal[data-modal-id=filter-pop] .filter-sec .sec-body {
  margin-top: 20px;
}
.modal[data-modal-id=filter-pop] .filter-sec .sec-body .filter-colorchip {
  padding-inline: 0;
}
.modal[data-modal-id=filter-pop] .filter-sec .sec-body .filter-colorchip li {
  padding-inline: 16px;
}
.modal[data-modal-id=filter-pop] .filter-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 8px;
}
.modal[data-modal-id=filter-pop] .filter-items li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 16px;
}
.tooltip {
  position: relative;
  display: inline-flex;
}
.tooltip > button {
  display: flex;
  align-items: center;
}
.tooltip > button .ico-info.ico-size-16 {
  width: 14px !important;
  height: 14px !important;
}

.tooltip-box {
  position: absolute;
  z-index: var(--z-tooltip, 150);
  max-width: 366px;
  min-width: 220px;
  padding: 20px;
  flex-direction: column;
  gap: 12px;
  background: var(--color-white, #ffffff);
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-md, 5px);
  word-break: break-all;
}
.tooltip-box:not([hidden]) {
  display: flex;
}
.tooltip-box .tooltip-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tooltip-box .tooltip-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  line-height: 20px;
}
.tooltip-box .tooltip-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tooltip-box .tooltip-date {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
}
.tooltip-box .tooltip-divider {
  border: none;
  border-top: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  margin: 0;
}
.tooltip-box .tooltip-summary-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tooltip-box .tooltip-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tooltip-box .tooltip-summary-label {
  font-size: 13px;
  line-height: 20px;
}
.tooltip-box .tooltip-summary-value {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.tooltip-box .tooltip-note {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
}
.tooltip-box .tooltip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tooltip-box .tooltip-item-title {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.tooltip-box .tooltip-item-desc {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray600, #444444);
}
.tooltip-box .tooltip-item-desc div.mt4 {
  margin-top: 12px;
}

.hint-box {
  position: fixed;
  top: 0;
  left: 0;
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-white, #ffffff);
  background: var(--color-black, #000000);
  border-radius: var(--radius-sm, 3px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: var(--z-loading, 9999);
}
.hint-box.is-visible {
  opacity: 1;
}

.pop-notice {
  position: relative;
  display: flex;
  justify-content: center;
}

.pop-notice-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.coupon-list li {
  position: relative;
  overflow: hidden;
  word-break: break-all;
}
.coupon-list li .ico-download.ico-size-28 {
  width: 20px !important;
  height: 20px !important;
}

.coupon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  padding: 20px 24px;
  width: 100%;
  text-align: left;
  position: relative;
  overflow: visible;
}
.coupon-item i[class^=ico-], .coupon-item i[class*=" ico-"] {
  margin-right: 20px;
}
.coupon-item::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -15px;
  width: 30px;
  height: 30px;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-circle, 50%);
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  z-index: 1;
}
.coupon-item:disabled {
  border-color: var(--color-gray300, #bbbbbb);
}
.coupon-item:disabled .coupon-type,
.coupon-item:disabled .coupon-amount,
.coupon-item:disabled .coupon-name,
.coupon-item:disabled .coupon-desc,
.coupon-item:disabled .coupon-desc-row {
  color: var(--color-gray300, #bbbbbb);
}
.coupon-item:disabled i[class^=ico-], .coupon-item:disabled i[class*=" ico-"] {
  background-color: var(--color-gray300, #bbbbbb);
}
.coupon-item:disabled::after {
  border-color: var(--color-gray300, #bbbbbb);
}

.coupon-info {
  flex: 1;
  min-width: 0;
}

.coupon-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
}

.coupon-title {
  margin-top: 2px;
}

.coupon-amount {
  display: flex;
  align-items: flex-end;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--color-black, #000000);
  gap: 4px;
}
.coupon-amount small {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
.coupon-name {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-black, #000000);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-desc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.coupon-desc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray600, #444444);
  word-break: break-all;
}
.coupon-desc-row > span:first-child {
  flex-shrink: 0;
}
.coupon-desc-row > span:last-child {
  flex: 1;
  min-width: 0;
}
.coupon-desc-row .divider.ver {
  flex-shrink: 0;
  height: 10px;
  margin-top: 4px;
}

[data-modal-id=pdp-cart-pop] .modal-body {
  padding: 0 var(--mobile-gap, 12px) 16px;
}

.pdp-cart-secs {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pdp-cart-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdp-cart-sec-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-black, #000000);
}

.pdp-cart-size-guide {
  display: block;
  width: fit-content;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray500, #666666);
  text-decoration: underline;
}

.pdp-cart-pickup-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray600, #444444);
}

.pdp-cart-limit {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-alert, #ff0000);
}

.cms-content {
  font-size: 13px;
  line-height: 20px;
}
.cms-content p,
.cms-content li {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}
.cms-content p + p {
  margin-top: 0;
}
.cms-content p + ul,
.cms-content ul + p {
  margin-top: 4px;
}
.cms-content ol {
  list-style: decimal;
  padding-left: 21px;
}
.cms-content ul:not(.notice-list) {
  list-style: disc;
  padding-left: 21px;
}
.cms-content .cms-title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
.cms-content .cms-title:not(:first-child) {
  margin-top: 20px;
}
.cms-content .cms-description {
  font-size: 13px;
  line-height: 20px;
}
.cms-content .cms-description:not(:first-child) {
  margin-top: 16px;
}
.cms-content .cms-title + .cms-description {
  margin-top: 8px;
}
.cms-content.fs9, .cms-content *.fs9 {
  font-size: 9px;
  line-height: 11px;
}
.cms-content.fs9m, .cms-content *.fs9m {
  font-size: 9px;
  line-height: 11px;
  font-weight: 500;
}
.cms-content.fs9b, .cms-content *.fs9b {
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
}
.cms-content.fs10, .cms-content *.fs10 {
  font-size: 10px;
  line-height: 10px;
}
.cms-content.fs10m, .cms-content *.fs10m {
  font-size: 10px;
  line-height: 10px;
  font-weight: 500;
}
.cms-content.fs10b, .cms-content *.fs10b {
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
}
.cms-content.fs11, .cms-content *.fs11 {
  font-size: 11px;
  line-height: 16px;
}
.cms-content.fs11m, .cms-content *.fs11m {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.cms-content.fs11b, .cms-content *.fs11b {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
}
.cms-content.fs12, .cms-content *.fs12 {
  font-size: 12px;
  line-height: 18px;
}
.cms-content.fs12m, .cms-content *.fs12m {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.cms-content.fs12b, .cms-content *.fs12b {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
.cms-content.fs13, .cms-content *.fs13 {
  font-size: 13px;
  line-height: 20px;
}
.cms-content.fs13m, .cms-content *.fs13m {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
.cms-content.fs13b, .cms-content *.fs13b {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.cms-content.fs14, .cms-content *.fs14 {
  font-size: 14px;
  line-height: 22px;
}
.cms-content.fs14m, .cms-content *.fs14m {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.cms-content.fs14b, .cms-content *.fs14b {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
.cms-content.fs16, .cms-content *.fs16 {
  font-size: 16px;
  line-height: 24px;
}
.cms-content.fs16m, .cms-content *.fs16m {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.cms-content.fs16b, .cms-content *.fs16b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.cms-content.fs18, .cms-content *.fs18 {
  font-size: 18px;
  line-height: 24px;
}
.cms-content.fs18m, .cms-content *.fs18m {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.cms-content.fs18b, .cms-content *.fs18b {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
.cms-content.fs20, .cms-content *.fs20 {
  font-size: 20px;
  line-height: 28px;
}
.cms-content.fs20m, .cms-content *.fs20m {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}
.cms-content.fs20b, .cms-content *.fs20b {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.cms-content.fs22, .cms-content *.fs22 {
  font-size: 22px;
  line-height: 30px;
}
.cms-content.fs22m, .cms-content *.fs22m {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}
.cms-content.fs22b, .cms-content *.fs22b {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.cms-content.fs24, .cms-content *.fs24 {
  font-size: 24px;
  line-height: 32px;
}
.cms-content.fs24m, .cms-content *.fs24m {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}
.cms-content.fs24b, .cms-content *.fs24b {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.cms-content.fs28, .cms-content *.fs28 {
  font-size: 28px;
  line-height: 36px;
}
.cms-content.fs28m, .cms-content *.fs28m {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}
.cms-content.fs28b, .cms-content *.fs28b {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.cms-content.fs32, .cms-content *.fs32 {
  font-size: 32px;
  line-height: 40px;
}
.cms-content.fs32m, .cms-content *.fs32m {
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
}
.cms-content.fs32b, .cms-content *.fs32b {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.cms-content.fs40, .cms-content *.fs40 {
  font-size: 40px;
  line-height: 48px;
}
.cms-content.fs40m, .cms-content *.fs40m {
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
}
.cms-content.fs40b, .cms-content *.fs40b {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
}
.cms-content.fs42, .cms-content *.fs42 {
  font-size: 42px;
  line-height: 50px;
}
.cms-content.fs42m, .cms-content *.fs42m {
  font-size: 42px;
  line-height: 50px;
  font-weight: 500;
}
.cms-content.fs42b, .cms-content *.fs42b {
  font-size: 42px;
  line-height: 50px;
  font-weight: 700;
}
.cms-content.m2, .cms-content *.m2 {
  margin: 2px !important;
}
.cms-content.mt2, .cms-content *.mt2 {
  margin-top: 2px !important;
}
.cms-content.mb2, .cms-content *.mb2 {
  margin-bottom: 2px !important;
}
.cms-content.ml2, .cms-content *.ml2 {
  margin-left: 2px !important;
}
.cms-content.mr2, .cms-content *.mr2 {
  margin-right: 2px !important;
}
.cms-content.mx2, .cms-content *.mx2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}
.cms-content.my2, .cms-content *.my2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
.cms-content.p2, .cms-content *.p2 {
  padding: 2px !important;
}
.cms-content.pt2, .cms-content *.pt2 {
  padding-top: 2px !important;
}
.cms-content.pb2, .cms-content *.pb2 {
  padding-bottom: 2px !important;
}
.cms-content.pl2, .cms-content *.pl2 {
  padding-left: 2px !important;
}
.cms-content.pr2, .cms-content *.pr2 {
  padding-right: 2px !important;
}
.cms-content.px2, .cms-content *.px2 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.cms-content.py2, .cms-content *.py2 {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.cms-content.m4, .cms-content *.m4 {
  margin: 4px !important;
}
.cms-content.mt4, .cms-content *.mt4 {
  margin-top: 4px !important;
}
.cms-content.mb4, .cms-content *.mb4 {
  margin-bottom: 4px !important;
}
.cms-content.ml4, .cms-content *.ml4 {
  margin-left: 4px !important;
}
.cms-content.mr4, .cms-content *.mr4 {
  margin-right: 4px !important;
}
.cms-content.mx4, .cms-content *.mx4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.cms-content.my4, .cms-content *.my4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.cms-content.p4, .cms-content *.p4 {
  padding: 4px !important;
}
.cms-content.pt4, .cms-content *.pt4 {
  padding-top: 4px !important;
}
.cms-content.pb4, .cms-content *.pb4 {
  padding-bottom: 4px !important;
}
.cms-content.pl4, .cms-content *.pl4 {
  padding-left: 4px !important;
}
.cms-content.pr4, .cms-content *.pr4 {
  padding-right: 4px !important;
}
.cms-content.px4, .cms-content *.px4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.cms-content.py4, .cms-content *.py4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.cms-content.m8, .cms-content *.m8 {
  margin: 8px !important;
}
.cms-content.mt8, .cms-content *.mt8 {
  margin-top: 8px !important;
}
.cms-content.mb8, .cms-content *.mb8 {
  margin-bottom: 8px !important;
}
.cms-content.ml8, .cms-content *.ml8 {
  margin-left: 8px !important;
}
.cms-content.mr8, .cms-content *.mr8 {
  margin-right: 8px !important;
}
.cms-content.mx8, .cms-content *.mx8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.cms-content.my8, .cms-content *.my8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.cms-content.p8, .cms-content *.p8 {
  padding: 8px !important;
}
.cms-content.pt8, .cms-content *.pt8 {
  padding-top: 8px !important;
}
.cms-content.pb8, .cms-content *.pb8 {
  padding-bottom: 8px !important;
}
.cms-content.pl8, .cms-content *.pl8 {
  padding-left: 8px !important;
}
.cms-content.pr8, .cms-content *.pr8 {
  padding-right: 8px !important;
}
.cms-content.px8, .cms-content *.px8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.cms-content.py8, .cms-content *.py8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.cms-content.m12, .cms-content *.m12 {
  margin: 12px !important;
}
.cms-content.mt12, .cms-content *.mt12 {
  margin-top: 12px !important;
}
.cms-content.mb12, .cms-content *.mb12 {
  margin-bottom: 12px !important;
}
.cms-content.ml12, .cms-content *.ml12 {
  margin-left: 12px !important;
}
.cms-content.mr12, .cms-content *.mr12 {
  margin-right: 12px !important;
}
.cms-content.mx12, .cms-content *.mx12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
.cms-content.my12, .cms-content *.my12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.cms-content.p12, .cms-content *.p12 {
  padding: 12px !important;
}
.cms-content.pt12, .cms-content *.pt12 {
  padding-top: 12px !important;
}
.cms-content.pb12, .cms-content *.pb12 {
  padding-bottom: 12px !important;
}
.cms-content.pl12, .cms-content *.pl12 {
  padding-left: 12px !important;
}
.cms-content.pr12, .cms-content *.pr12 {
  padding-right: 12px !important;
}
.cms-content.px12, .cms-content *.px12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.cms-content.py12, .cms-content *.py12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.cms-content.m16, .cms-content *.m16 {
  margin: 16px !important;
}
.cms-content.mt16, .cms-content *.mt16 {
  margin-top: 16px !important;
}
.cms-content.mb16, .cms-content *.mb16 {
  margin-bottom: 16px !important;
}
.cms-content.ml16, .cms-content *.ml16 {
  margin-left: 16px !important;
}
.cms-content.mr16, .cms-content *.mr16 {
  margin-right: 16px !important;
}
.cms-content.mx16, .cms-content *.mx16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.cms-content.my16, .cms-content *.my16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.cms-content.p16, .cms-content *.p16 {
  padding: 16px !important;
}
.cms-content.pt16, .cms-content *.pt16 {
  padding-top: 16px !important;
}
.cms-content.pb16, .cms-content *.pb16 {
  padding-bottom: 16px !important;
}
.cms-content.pl16, .cms-content *.pl16 {
  padding-left: 16px !important;
}
.cms-content.pr16, .cms-content *.pr16 {
  padding-right: 16px !important;
}
.cms-content.px16, .cms-content *.px16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.cms-content.py16, .cms-content *.py16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.cms-content.m20, .cms-content *.m20 {
  margin: 20px !important;
}
.cms-content.mt20, .cms-content *.mt20 {
  margin-top: 20px !important;
}
.cms-content.mb20, .cms-content *.mb20 {
  margin-bottom: 20px !important;
}
.cms-content.ml20, .cms-content *.ml20 {
  margin-left: 20px !important;
}
.cms-content.mr20, .cms-content *.mr20 {
  margin-right: 20px !important;
}
.cms-content.mx20, .cms-content *.mx20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
.cms-content.my20, .cms-content *.my20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.cms-content.p20, .cms-content *.p20 {
  padding: 20px !important;
}
.cms-content.pt20, .cms-content *.pt20 {
  padding-top: 20px !important;
}
.cms-content.pb20, .cms-content *.pb20 {
  padding-bottom: 20px !important;
}
.cms-content.pl20, .cms-content *.pl20 {
  padding-left: 20px !important;
}
.cms-content.pr20, .cms-content *.pr20 {
  padding-right: 20px !important;
}
.cms-content.px20, .cms-content *.px20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.cms-content.py20, .cms-content *.py20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.cms-content.m24, .cms-content *.m24 {
  margin: 24px !important;
}
.cms-content.mt24, .cms-content *.mt24 {
  margin-top: 24px !important;
}
.cms-content.mb24, .cms-content *.mb24 {
  margin-bottom: 24px !important;
}
.cms-content.ml24, .cms-content *.ml24 {
  margin-left: 24px !important;
}
.cms-content.mr24, .cms-content *.mr24 {
  margin-right: 24px !important;
}
.cms-content.mx24, .cms-content *.mx24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.cms-content.my24, .cms-content *.my24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.cms-content.p24, .cms-content *.p24 {
  padding: 24px !important;
}
.cms-content.pt24, .cms-content *.pt24 {
  padding-top: 24px !important;
}
.cms-content.pb24, .cms-content *.pb24 {
  padding-bottom: 24px !important;
}
.cms-content.pl24, .cms-content *.pl24 {
  padding-left: 24px !important;
}
.cms-content.pr24, .cms-content *.pr24 {
  padding-right: 24px !important;
}
.cms-content.px24, .cms-content *.px24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.cms-content.py24, .cms-content *.py24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.cms-content.m28, .cms-content *.m28 {
  margin: 28px !important;
}
.cms-content.mt28, .cms-content *.mt28 {
  margin-top: 28px !important;
}
.cms-content.mb28, .cms-content *.mb28 {
  margin-bottom: 28px !important;
}
.cms-content.ml28, .cms-content *.ml28 {
  margin-left: 28px !important;
}
.cms-content.mr28, .cms-content *.mr28 {
  margin-right: 28px !important;
}
.cms-content.mx28, .cms-content *.mx28 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}
.cms-content.my28, .cms-content *.my28 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}
.cms-content.p28, .cms-content *.p28 {
  padding: 28px !important;
}
.cms-content.pt28, .cms-content *.pt28 {
  padding-top: 28px !important;
}
.cms-content.pb28, .cms-content *.pb28 {
  padding-bottom: 28px !important;
}
.cms-content.pl28, .cms-content *.pl28 {
  padding-left: 28px !important;
}
.cms-content.pr28, .cms-content *.pr28 {
  padding-right: 28px !important;
}
.cms-content.px28, .cms-content *.px28 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.cms-content.py28, .cms-content *.py28 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.cms-content.m32, .cms-content *.m32 {
  margin: 32px !important;
}
.cms-content.mt32, .cms-content *.mt32 {
  margin-top: 32px !important;
}
.cms-content.mb32, .cms-content *.mb32 {
  margin-bottom: 32px !important;
}
.cms-content.ml32, .cms-content *.ml32 {
  margin-left: 32px !important;
}
.cms-content.mr32, .cms-content *.mr32 {
  margin-right: 32px !important;
}
.cms-content.mx32, .cms-content *.mx32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.cms-content.my32, .cms-content *.my32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.cms-content.p32, .cms-content *.p32 {
  padding: 32px !important;
}
.cms-content.pt32, .cms-content *.pt32 {
  padding-top: 32px !important;
}
.cms-content.pb32, .cms-content *.pb32 {
  padding-bottom: 32px !important;
}
.cms-content.pl32, .cms-content *.pl32 {
  padding-left: 32px !important;
}
.cms-content.pr32, .cms-content *.pr32 {
  padding-right: 32px !important;
}
.cms-content.px32, .cms-content *.px32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.cms-content.py32, .cms-content *.py32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.cms-content.m36, .cms-content *.m36 {
  margin: 36px !important;
}
.cms-content.mt36, .cms-content *.mt36 {
  margin-top: 36px !important;
}
.cms-content.mb36, .cms-content *.mb36 {
  margin-bottom: 36px !important;
}
.cms-content.ml36, .cms-content *.ml36 {
  margin-left: 36px !important;
}
.cms-content.mr36, .cms-content *.mr36 {
  margin-right: 36px !important;
}
.cms-content.mx36, .cms-content *.mx36 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}
.cms-content.my36, .cms-content *.my36 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}
.cms-content.p36, .cms-content *.p36 {
  padding: 36px !important;
}
.cms-content.pt36, .cms-content *.pt36 {
  padding-top: 36px !important;
}
.cms-content.pb36, .cms-content *.pb36 {
  padding-bottom: 36px !important;
}
.cms-content.pl36, .cms-content *.pl36 {
  padding-left: 36px !important;
}
.cms-content.pr36, .cms-content *.pr36 {
  padding-right: 36px !important;
}
.cms-content.px36, .cms-content *.px36 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}
.cms-content.py36, .cms-content *.py36 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
.cms-content.m40, .cms-content *.m40 {
  margin: 40px !important;
}
.cms-content.mt40, .cms-content *.mt40 {
  margin-top: 40px !important;
}
.cms-content.mb40, .cms-content *.mb40 {
  margin-bottom: 40px !important;
}
.cms-content.ml40, .cms-content *.ml40 {
  margin-left: 40px !important;
}
.cms-content.mr40, .cms-content *.mr40 {
  margin-right: 40px !important;
}
.cms-content.mx40, .cms-content *.mx40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.cms-content.my40, .cms-content *.my40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.cms-content.p40, .cms-content *.p40 {
  padding: 40px !important;
}
.cms-content.pt40, .cms-content *.pt40 {
  padding-top: 40px !important;
}
.cms-content.pb40, .cms-content *.pb40 {
  padding-bottom: 40px !important;
}
.cms-content.pl40, .cms-content *.pl40 {
  padding-left: 40px !important;
}
.cms-content.pr40, .cms-content *.pr40 {
  padding-right: 40px !important;
}
.cms-content.px40, .cms-content *.px40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.cms-content.py40, .cms-content *.py40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.cms-content.m44, .cms-content *.m44 {
  margin: 44px !important;
}
.cms-content.mt44, .cms-content *.mt44 {
  margin-top: 44px !important;
}
.cms-content.mb44, .cms-content *.mb44 {
  margin-bottom: 44px !important;
}
.cms-content.ml44, .cms-content *.ml44 {
  margin-left: 44px !important;
}
.cms-content.mr44, .cms-content *.mr44 {
  margin-right: 44px !important;
}
.cms-content.mx44, .cms-content *.mx44 {
  margin-left: 44px !important;
  margin-right: 44px !important;
}
.cms-content.my44, .cms-content *.my44 {
  margin-top: 44px !important;
  margin-bottom: 44px !important;
}
.cms-content.p44, .cms-content *.p44 {
  padding: 44px !important;
}
.cms-content.pt44, .cms-content *.pt44 {
  padding-top: 44px !important;
}
.cms-content.pb44, .cms-content *.pb44 {
  padding-bottom: 44px !important;
}
.cms-content.pl44, .cms-content *.pl44 {
  padding-left: 44px !important;
}
.cms-content.pr44, .cms-content *.pr44 {
  padding-right: 44px !important;
}
.cms-content.px44, .cms-content *.px44 {
  padding-left: 44px !important;
  padding-right: 44px !important;
}
.cms-content.py44, .cms-content *.py44 {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
.cms-content.m48, .cms-content *.m48 {
  margin: 48px !important;
}
.cms-content.mt48, .cms-content *.mt48 {
  margin-top: 48px !important;
}
.cms-content.mb48, .cms-content *.mb48 {
  margin-bottom: 48px !important;
}
.cms-content.ml48, .cms-content *.ml48 {
  margin-left: 48px !important;
}
.cms-content.mr48, .cms-content *.mr48 {
  margin-right: 48px !important;
}
.cms-content.mx48, .cms-content *.mx48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}
.cms-content.my48, .cms-content *.my48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}
.cms-content.p48, .cms-content *.p48 {
  padding: 48px !important;
}
.cms-content.pt48, .cms-content *.pt48 {
  padding-top: 48px !important;
}
.cms-content.pb48, .cms-content *.pb48 {
  padding-bottom: 48px !important;
}
.cms-content.pl48, .cms-content *.pl48 {
  padding-left: 48px !important;
}
.cms-content.pr48, .cms-content *.pr48 {
  padding-right: 48px !important;
}
.cms-content.px48, .cms-content *.px48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
.cms-content.py48, .cms-content *.py48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.cms-content.m52, .cms-content *.m52 {
  margin: 52px !important;
}
.cms-content.mt52, .cms-content *.mt52 {
  margin-top: 52px !important;
}
.cms-content.mb52, .cms-content *.mb52 {
  margin-bottom: 52px !important;
}
.cms-content.ml52, .cms-content *.ml52 {
  margin-left: 52px !important;
}
.cms-content.mr52, .cms-content *.mr52 {
  margin-right: 52px !important;
}
.cms-content.mx52, .cms-content *.mx52 {
  margin-left: 52px !important;
  margin-right: 52px !important;
}
.cms-content.my52, .cms-content *.my52 {
  margin-top: 52px !important;
  margin-bottom: 52px !important;
}
.cms-content.p52, .cms-content *.p52 {
  padding: 52px !important;
}
.cms-content.pt52, .cms-content *.pt52 {
  padding-top: 52px !important;
}
.cms-content.pb52, .cms-content *.pb52 {
  padding-bottom: 52px !important;
}
.cms-content.pl52, .cms-content *.pl52 {
  padding-left: 52px !important;
}
.cms-content.pr52, .cms-content *.pr52 {
  padding-right: 52px !important;
}
.cms-content.px52, .cms-content *.px52 {
  padding-left: 52px !important;
  padding-right: 52px !important;
}
.cms-content.py52, .cms-content *.py52 {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}
.cms-content.m56, .cms-content *.m56 {
  margin: 56px !important;
}
.cms-content.mt56, .cms-content *.mt56 {
  margin-top: 56px !important;
}
.cms-content.mb56, .cms-content *.mb56 {
  margin-bottom: 56px !important;
}
.cms-content.ml56, .cms-content *.ml56 {
  margin-left: 56px !important;
}
.cms-content.mr56, .cms-content *.mr56 {
  margin-right: 56px !important;
}
.cms-content.mx56, .cms-content *.mx56 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}
.cms-content.my56, .cms-content *.my56 {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}
.cms-content.p56, .cms-content *.p56 {
  padding: 56px !important;
}
.cms-content.pt56, .cms-content *.pt56 {
  padding-top: 56px !important;
}
.cms-content.pb56, .cms-content *.pb56 {
  padding-bottom: 56px !important;
}
.cms-content.pl56, .cms-content *.pl56 {
  padding-left: 56px !important;
}
.cms-content.pr56, .cms-content *.pr56 {
  padding-right: 56px !important;
}
.cms-content.px56, .cms-content *.px56 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}
.cms-content.py56, .cms-content *.py56 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.cms-content.m60, .cms-content *.m60 {
  margin: 60px !important;
}
.cms-content.mt60, .cms-content *.mt60 {
  margin-top: 60px !important;
}
.cms-content.mb60, .cms-content *.mb60 {
  margin-bottom: 60px !important;
}
.cms-content.ml60, .cms-content *.ml60 {
  margin-left: 60px !important;
}
.cms-content.mr60, .cms-content *.mr60 {
  margin-right: 60px !important;
}
.cms-content.mx60, .cms-content *.mx60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}
.cms-content.my60, .cms-content *.my60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.cms-content.p60, .cms-content *.p60 {
  padding: 60px !important;
}
.cms-content.pt60, .cms-content *.pt60 {
  padding-top: 60px !important;
}
.cms-content.pb60, .cms-content *.pb60 {
  padding-bottom: 60px !important;
}
.cms-content.pl60, .cms-content *.pl60 {
  padding-left: 60px !important;
}
.cms-content.pr60, .cms-content *.pr60 {
  padding-right: 60px !important;
}
.cms-content.px60, .cms-content *.px60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}
.cms-content.py60, .cms-content *.py60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.cms-content.m64, .cms-content *.m64 {
  margin: 64px !important;
}
.cms-content.mt64, .cms-content *.mt64 {
  margin-top: 64px !important;
}
.cms-content.mb64, .cms-content *.mb64 {
  margin-bottom: 64px !important;
}
.cms-content.ml64, .cms-content *.ml64 {
  margin-left: 64px !important;
}
.cms-content.mr64, .cms-content *.mr64 {
  margin-right: 64px !important;
}
.cms-content.mx64, .cms-content *.mx64 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}
.cms-content.my64, .cms-content *.my64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}
.cms-content.p64, .cms-content *.p64 {
  padding: 64px !important;
}
.cms-content.pt64, .cms-content *.pt64 {
  padding-top: 64px !important;
}
.cms-content.pb64, .cms-content *.pb64 {
  padding-bottom: 64px !important;
}
.cms-content.pl64, .cms-content *.pl64 {
  padding-left: 64px !important;
}
.cms-content.pr64, .cms-content *.pr64 {
  padding-right: 64px !important;
}
.cms-content.px64, .cms-content *.px64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
.cms-content.py64, .cms-content *.py64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.cms-content.underline, .cms-content *.underline {
  text-decoration: underline !important;
}
.cms-content table,
.cms-content table[class^=tbl] {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  vertical-align: top;
}
.cms-content table th,
.cms-content table td,
.cms-content table[class^=tbl] th,
.cms-content table[class^=tbl] td {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 20px;
  border: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  text-align: left;
}
.cms-content table thead th,
.cms-content table[class^=tbl] thead th {
  background: var(--color-gray30, #f6f6f6);
  font-weight: 400;
}
.cms-content table tbody th,
.cms-content table[class^=tbl] tbody th {
  font-weight: 400;
  background: var(--color-gray30, #f6f6f6);
}
.cms-content .tbl-header .tbl-unit {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray600, #444444);
  text-align: right;
  margin-top: 8px;
}
.cms-content .tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray200, #cccccc) var(--color-gray30, #f6f6f6);
}
.cms-content .tbl-scroll::-webkit-scrollbar {
  height: 12px;
}
.cms-content .tbl-scroll::-webkit-scrollbar-track {
  background: var(--color-gray30, #f6f6f6);
  border-radius: var(--radius-full, 999px);
}
.cms-content .tbl-scroll::-webkit-scrollbar-thumb {
  background: var(--color-gray200, #cccccc);
  border-radius: var(--radius-full, 999px);
}
.cms-content .tbl-scroll > table,
.cms-content .tbl-scroll table[class^=tbl] {
  table-layout: fixed;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}
.cms-content .tbl-scroll > table > thead > tr > th,
.cms-content .tbl-scroll > table > thead > tr > td,
.cms-content .tbl-scroll > table > tbody > tr > th,
.cms-content .tbl-scroll > table > tbody > tr > td,
.cms-content .tbl-scroll table[class^=tbl] > thead > tr > th,
.cms-content .tbl-scroll table[class^=tbl] > thead > tr > td,
.cms-content .tbl-scroll table[class^=tbl] > tbody > tr > th,
.cms-content .tbl-scroll table[class^=tbl] > tbody > tr > td {
  border-top: none;
  border-left: none;
  border-right: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  border-bottom: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  font-size: 13px;
  line-height: 20px;
}
.cms-content .tbl-scroll > table > thead > tr:first-child > th,
.cms-content .tbl-scroll > table > thead > tr:first-child > td,
.cms-content .tbl-scroll table[class^=tbl] > thead > tr:first-child > th,
.cms-content .tbl-scroll table[class^=tbl] > thead > tr:first-child > td {
  border-top: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.cms-content .tbl-scroll > table:not(:has(> thead)) > tbody > tr:first-child > th, .cms-content .tbl-scroll > table:not(:has(> thead)) > tbody > tr:first-child > td,
.cms-content .tbl-scroll table[class^=tbl]:not(:has(> thead)) > tbody > tr:first-child > th,
.cms-content .tbl-scroll table[class^=tbl]:not(:has(> thead)) > tbody > tr:first-child > td {
  border-top: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.cms-content .tbl-scroll > table > thead > tr > th:first-child,
.cms-content .tbl-scroll > table > tbody > tr > th,
.cms-content .tbl-scroll table[class^=tbl] > thead > tr > th:first-child,
.cms-content .tbl-scroll table[class^=tbl] > tbody > tr > th {
  position: sticky;
  left: 0;
  z-index: 1;
  border-left: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  font-size: 13px;
  line-height: 20px;
}
.cms-content .tbl-scroll > table > thead > tr > th:first-child,
.cms-content .tbl-scroll table[class^=tbl] > thead > tr > th:first-child {
  background: var(--color-gray30, #f6f6f6);
}
.cms-content .tbl-scroll > table > tbody > tr > th,
.cms-content .tbl-scroll table[class^=tbl] > tbody > tr > th {
  background: var(--color-white, #ffffff);
}
.cms-content .tbl-scroll > table:not(:has(> thead)) > tbody > tr > th,
.cms-content .tbl-scroll table[class^=tbl]:not(:has(> thead)) > tbody > tr > th {
  background: var(--color-gray30, #f6f6f6);
}
.cms-content col.col-pc-40 {
  width: 40px;
}
.cms-content col.col-pc-60 {
  width: 60px;
}
.cms-content col.col-pc-80 {
  width: 80px;
}
.cms-content col.col-pc-100 {
  width: 100px;
}
.cms-content col.col-pc-120 {
  width: 120px;
}
.cms-content col.col-pc-140 {
  width: 140px;
}
.cms-content col.col-pc-160 {
  width: 160px;
}
.cms-content col.col-pc-180 {
  width: 180px;
}
.cms-content col.col-pc-200 {
  width: 200px;
}
.cms-content col.col-pc-240 {
  width: 240px;
}
.cms-content .line-tbl {
  width: 100%;
  border-collapse: collapse;
}
.cms-content .line-tbl th {
  padding: 10px 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
  vertical-align: middle;
}
.cms-content .line-tbl td {
  padding: 24px 8px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  border-bottom: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}
.cms-content .line-tbl td:first-child {
  text-align: left;
  padding-left: 0;
}

.scroll-box {
  background: var(--color-gray30, #f6f6f6);
  padding: 20px;
  height: 270px;
  overflow-y: auto;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
}
.notice-list.fs9, .notice-list *.fs9 {
  font-size: 9px;
  line-height: 11px;
}
.notice-list.fs9m, .notice-list *.fs9m {
  font-size: 9px;
  line-height: 11px;
  font-weight: 500;
}
.notice-list.fs9b, .notice-list *.fs9b {
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
}
.notice-list.fs10, .notice-list *.fs10 {
  font-size: 10px;
  line-height: 10px;
}
.notice-list.fs10m, .notice-list *.fs10m {
  font-size: 10px;
  line-height: 10px;
  font-weight: 500;
}
.notice-list.fs10b, .notice-list *.fs10b {
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
}
.notice-list.fs11, .notice-list *.fs11 {
  font-size: 11px;
  line-height: 16px;
}
.notice-list.fs11m, .notice-list *.fs11m {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.notice-list.fs11b, .notice-list *.fs11b {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
}
.notice-list.fs12, .notice-list *.fs12 {
  font-size: 12px;
  line-height: 18px;
}
.notice-list.fs12m, .notice-list *.fs12m {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.notice-list.fs12b, .notice-list *.fs12b {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
.notice-list.fs13, .notice-list *.fs13 {
  font-size: 13px;
  line-height: 20px;
}
.notice-list.fs13m, .notice-list *.fs13m {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
.notice-list.fs13b, .notice-list *.fs13b {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.notice-list.fs14, .notice-list *.fs14 {
  font-size: 14px;
  line-height: 22px;
}
.notice-list.fs14m, .notice-list *.fs14m {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.notice-list.fs14b, .notice-list *.fs14b {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
.notice-list.fs16, .notice-list *.fs16 {
  font-size: 16px;
  line-height: 24px;
}
.notice-list.fs16m, .notice-list *.fs16m {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.notice-list.fs16b, .notice-list *.fs16b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.notice-list.fs18, .notice-list *.fs18 {
  font-size: 18px;
  line-height: 24px;
}
.notice-list.fs18m, .notice-list *.fs18m {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.notice-list.fs18b, .notice-list *.fs18b {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
.notice-list.fs20, .notice-list *.fs20 {
  font-size: 20px;
  line-height: 28px;
}
.notice-list.fs20m, .notice-list *.fs20m {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}
.notice-list.fs20b, .notice-list *.fs20b {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.notice-list.fs22, .notice-list *.fs22 {
  font-size: 22px;
  line-height: 30px;
}
.notice-list.fs22m, .notice-list *.fs22m {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}
.notice-list.fs22b, .notice-list *.fs22b {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.notice-list.fs24, .notice-list *.fs24 {
  font-size: 24px;
  line-height: 32px;
}
.notice-list.fs24m, .notice-list *.fs24m {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}
.notice-list.fs24b, .notice-list *.fs24b {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.notice-list.fs28, .notice-list *.fs28 {
  font-size: 28px;
  line-height: 36px;
}
.notice-list.fs28m, .notice-list *.fs28m {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}
.notice-list.fs28b, .notice-list *.fs28b {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.notice-list.fs32, .notice-list *.fs32 {
  font-size: 32px;
  line-height: 40px;
}
.notice-list.fs32m, .notice-list *.fs32m {
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
}
.notice-list.fs32b, .notice-list *.fs32b {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.notice-list.fs40, .notice-list *.fs40 {
  font-size: 40px;
  line-height: 48px;
}
.notice-list.fs40m, .notice-list *.fs40m {
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
}
.notice-list.fs40b, .notice-list *.fs40b {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
}
.notice-list.fs42, .notice-list *.fs42 {
  font-size: 42px;
  line-height: 50px;
}
.notice-list.fs42m, .notice-list *.fs42m {
  font-size: 42px;
  line-height: 50px;
  font-weight: 500;
}
.notice-list.fs42b, .notice-list *.fs42b {
  font-size: 42px;
  line-height: 50px;
  font-weight: 700;
}
.notice-list.m2, .notice-list *.m2 {
  margin: 2px !important;
}
.notice-list.mt2, .notice-list *.mt2 {
  margin-top: 2px !important;
}
.notice-list.mb2, .notice-list *.mb2 {
  margin-bottom: 2px !important;
}
.notice-list.ml2, .notice-list *.ml2 {
  margin-left: 2px !important;
}
.notice-list.mr2, .notice-list *.mr2 {
  margin-right: 2px !important;
}
.notice-list.mx2, .notice-list *.mx2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}
.notice-list.my2, .notice-list *.my2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
.notice-list.p2, .notice-list *.p2 {
  padding: 2px !important;
}
.notice-list.pt2, .notice-list *.pt2 {
  padding-top: 2px !important;
}
.notice-list.pb2, .notice-list *.pb2 {
  padding-bottom: 2px !important;
}
.notice-list.pl2, .notice-list *.pl2 {
  padding-left: 2px !important;
}
.notice-list.pr2, .notice-list *.pr2 {
  padding-right: 2px !important;
}
.notice-list.px2, .notice-list *.px2 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.notice-list.py2, .notice-list *.py2 {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.notice-list.m4, .notice-list *.m4 {
  margin: 4px !important;
}
.notice-list.mt4, .notice-list *.mt4 {
  margin-top: 4px !important;
}
.notice-list.mb4, .notice-list *.mb4 {
  margin-bottom: 4px !important;
}
.notice-list.ml4, .notice-list *.ml4 {
  margin-left: 4px !important;
}
.notice-list.mr4, .notice-list *.mr4 {
  margin-right: 4px !important;
}
.notice-list.mx4, .notice-list *.mx4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.notice-list.my4, .notice-list *.my4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.notice-list.p4, .notice-list *.p4 {
  padding: 4px !important;
}
.notice-list.pt4, .notice-list *.pt4 {
  padding-top: 4px !important;
}
.notice-list.pb4, .notice-list *.pb4 {
  padding-bottom: 4px !important;
}
.notice-list.pl4, .notice-list *.pl4 {
  padding-left: 4px !important;
}
.notice-list.pr4, .notice-list *.pr4 {
  padding-right: 4px !important;
}
.notice-list.px4, .notice-list *.px4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.notice-list.py4, .notice-list *.py4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.notice-list.m8, .notice-list *.m8 {
  margin: 8px !important;
}
.notice-list.mt8, .notice-list *.mt8 {
  margin-top: 8px !important;
}
.notice-list.mb8, .notice-list *.mb8 {
  margin-bottom: 8px !important;
}
.notice-list.ml8, .notice-list *.ml8 {
  margin-left: 8px !important;
}
.notice-list.mr8, .notice-list *.mr8 {
  margin-right: 8px !important;
}
.notice-list.mx8, .notice-list *.mx8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.notice-list.my8, .notice-list *.my8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.notice-list.p8, .notice-list *.p8 {
  padding: 8px !important;
}
.notice-list.pt8, .notice-list *.pt8 {
  padding-top: 8px !important;
}
.notice-list.pb8, .notice-list *.pb8 {
  padding-bottom: 8px !important;
}
.notice-list.pl8, .notice-list *.pl8 {
  padding-left: 8px !important;
}
.notice-list.pr8, .notice-list *.pr8 {
  padding-right: 8px !important;
}
.notice-list.px8, .notice-list *.px8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.notice-list.py8, .notice-list *.py8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.notice-list.m12, .notice-list *.m12 {
  margin: 12px !important;
}
.notice-list.mt12, .notice-list *.mt12 {
  margin-top: 12px !important;
}
.notice-list.mb12, .notice-list *.mb12 {
  margin-bottom: 12px !important;
}
.notice-list.ml12, .notice-list *.ml12 {
  margin-left: 12px !important;
}
.notice-list.mr12, .notice-list *.mr12 {
  margin-right: 12px !important;
}
.notice-list.mx12, .notice-list *.mx12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
.notice-list.my12, .notice-list *.my12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.notice-list.p12, .notice-list *.p12 {
  padding: 12px !important;
}
.notice-list.pt12, .notice-list *.pt12 {
  padding-top: 12px !important;
}
.notice-list.pb12, .notice-list *.pb12 {
  padding-bottom: 12px !important;
}
.notice-list.pl12, .notice-list *.pl12 {
  padding-left: 12px !important;
}
.notice-list.pr12, .notice-list *.pr12 {
  padding-right: 12px !important;
}
.notice-list.px12, .notice-list *.px12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.notice-list.py12, .notice-list *.py12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.notice-list.m16, .notice-list *.m16 {
  margin: 16px !important;
}
.notice-list.mt16, .notice-list *.mt16 {
  margin-top: 16px !important;
}
.notice-list.mb16, .notice-list *.mb16 {
  margin-bottom: 16px !important;
}
.notice-list.ml16, .notice-list *.ml16 {
  margin-left: 16px !important;
}
.notice-list.mr16, .notice-list *.mr16 {
  margin-right: 16px !important;
}
.notice-list.mx16, .notice-list *.mx16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.notice-list.my16, .notice-list *.my16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.notice-list.p16, .notice-list *.p16 {
  padding: 16px !important;
}
.notice-list.pt16, .notice-list *.pt16 {
  padding-top: 16px !important;
}
.notice-list.pb16, .notice-list *.pb16 {
  padding-bottom: 16px !important;
}
.notice-list.pl16, .notice-list *.pl16 {
  padding-left: 16px !important;
}
.notice-list.pr16, .notice-list *.pr16 {
  padding-right: 16px !important;
}
.notice-list.px16, .notice-list *.px16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.notice-list.py16, .notice-list *.py16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.notice-list.m20, .notice-list *.m20 {
  margin: 20px !important;
}
.notice-list.mt20, .notice-list *.mt20 {
  margin-top: 20px !important;
}
.notice-list.mb20, .notice-list *.mb20 {
  margin-bottom: 20px !important;
}
.notice-list.ml20, .notice-list *.ml20 {
  margin-left: 20px !important;
}
.notice-list.mr20, .notice-list *.mr20 {
  margin-right: 20px !important;
}
.notice-list.mx20, .notice-list *.mx20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
.notice-list.my20, .notice-list *.my20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.notice-list.p20, .notice-list *.p20 {
  padding: 20px !important;
}
.notice-list.pt20, .notice-list *.pt20 {
  padding-top: 20px !important;
}
.notice-list.pb20, .notice-list *.pb20 {
  padding-bottom: 20px !important;
}
.notice-list.pl20, .notice-list *.pl20 {
  padding-left: 20px !important;
}
.notice-list.pr20, .notice-list *.pr20 {
  padding-right: 20px !important;
}
.notice-list.px20, .notice-list *.px20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.notice-list.py20, .notice-list *.py20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.notice-list.m24, .notice-list *.m24 {
  margin: 24px !important;
}
.notice-list.mt24, .notice-list *.mt24 {
  margin-top: 24px !important;
}
.notice-list.mb24, .notice-list *.mb24 {
  margin-bottom: 24px !important;
}
.notice-list.ml24, .notice-list *.ml24 {
  margin-left: 24px !important;
}
.notice-list.mr24, .notice-list *.mr24 {
  margin-right: 24px !important;
}
.notice-list.mx24, .notice-list *.mx24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.notice-list.my24, .notice-list *.my24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.notice-list.p24, .notice-list *.p24 {
  padding: 24px !important;
}
.notice-list.pt24, .notice-list *.pt24 {
  padding-top: 24px !important;
}
.notice-list.pb24, .notice-list *.pb24 {
  padding-bottom: 24px !important;
}
.notice-list.pl24, .notice-list *.pl24 {
  padding-left: 24px !important;
}
.notice-list.pr24, .notice-list *.pr24 {
  padding-right: 24px !important;
}
.notice-list.px24, .notice-list *.px24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.notice-list.py24, .notice-list *.py24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.notice-list.m28, .notice-list *.m28 {
  margin: 28px !important;
}
.notice-list.mt28, .notice-list *.mt28 {
  margin-top: 28px !important;
}
.notice-list.mb28, .notice-list *.mb28 {
  margin-bottom: 28px !important;
}
.notice-list.ml28, .notice-list *.ml28 {
  margin-left: 28px !important;
}
.notice-list.mr28, .notice-list *.mr28 {
  margin-right: 28px !important;
}
.notice-list.mx28, .notice-list *.mx28 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}
.notice-list.my28, .notice-list *.my28 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}
.notice-list.p28, .notice-list *.p28 {
  padding: 28px !important;
}
.notice-list.pt28, .notice-list *.pt28 {
  padding-top: 28px !important;
}
.notice-list.pb28, .notice-list *.pb28 {
  padding-bottom: 28px !important;
}
.notice-list.pl28, .notice-list *.pl28 {
  padding-left: 28px !important;
}
.notice-list.pr28, .notice-list *.pr28 {
  padding-right: 28px !important;
}
.notice-list.px28, .notice-list *.px28 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.notice-list.py28, .notice-list *.py28 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.notice-list.m32, .notice-list *.m32 {
  margin: 32px !important;
}
.notice-list.mt32, .notice-list *.mt32 {
  margin-top: 32px !important;
}
.notice-list.mb32, .notice-list *.mb32 {
  margin-bottom: 32px !important;
}
.notice-list.ml32, .notice-list *.ml32 {
  margin-left: 32px !important;
}
.notice-list.mr32, .notice-list *.mr32 {
  margin-right: 32px !important;
}
.notice-list.mx32, .notice-list *.mx32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.notice-list.my32, .notice-list *.my32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.notice-list.p32, .notice-list *.p32 {
  padding: 32px !important;
}
.notice-list.pt32, .notice-list *.pt32 {
  padding-top: 32px !important;
}
.notice-list.pb32, .notice-list *.pb32 {
  padding-bottom: 32px !important;
}
.notice-list.pl32, .notice-list *.pl32 {
  padding-left: 32px !important;
}
.notice-list.pr32, .notice-list *.pr32 {
  padding-right: 32px !important;
}
.notice-list.px32, .notice-list *.px32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.notice-list.py32, .notice-list *.py32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.notice-list.m36, .notice-list *.m36 {
  margin: 36px !important;
}
.notice-list.mt36, .notice-list *.mt36 {
  margin-top: 36px !important;
}
.notice-list.mb36, .notice-list *.mb36 {
  margin-bottom: 36px !important;
}
.notice-list.ml36, .notice-list *.ml36 {
  margin-left: 36px !important;
}
.notice-list.mr36, .notice-list *.mr36 {
  margin-right: 36px !important;
}
.notice-list.mx36, .notice-list *.mx36 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}
.notice-list.my36, .notice-list *.my36 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}
.notice-list.p36, .notice-list *.p36 {
  padding: 36px !important;
}
.notice-list.pt36, .notice-list *.pt36 {
  padding-top: 36px !important;
}
.notice-list.pb36, .notice-list *.pb36 {
  padding-bottom: 36px !important;
}
.notice-list.pl36, .notice-list *.pl36 {
  padding-left: 36px !important;
}
.notice-list.pr36, .notice-list *.pr36 {
  padding-right: 36px !important;
}
.notice-list.px36, .notice-list *.px36 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}
.notice-list.py36, .notice-list *.py36 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
.notice-list.m40, .notice-list *.m40 {
  margin: 40px !important;
}
.notice-list.mt40, .notice-list *.mt40 {
  margin-top: 40px !important;
}
.notice-list.mb40, .notice-list *.mb40 {
  margin-bottom: 40px !important;
}
.notice-list.ml40, .notice-list *.ml40 {
  margin-left: 40px !important;
}
.notice-list.mr40, .notice-list *.mr40 {
  margin-right: 40px !important;
}
.notice-list.mx40, .notice-list *.mx40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.notice-list.my40, .notice-list *.my40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.notice-list.p40, .notice-list *.p40 {
  padding: 40px !important;
}
.notice-list.pt40, .notice-list *.pt40 {
  padding-top: 40px !important;
}
.notice-list.pb40, .notice-list *.pb40 {
  padding-bottom: 40px !important;
}
.notice-list.pl40, .notice-list *.pl40 {
  padding-left: 40px !important;
}
.notice-list.pr40, .notice-list *.pr40 {
  padding-right: 40px !important;
}
.notice-list.px40, .notice-list *.px40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.notice-list.py40, .notice-list *.py40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.notice-list.m44, .notice-list *.m44 {
  margin: 44px !important;
}
.notice-list.mt44, .notice-list *.mt44 {
  margin-top: 44px !important;
}
.notice-list.mb44, .notice-list *.mb44 {
  margin-bottom: 44px !important;
}
.notice-list.ml44, .notice-list *.ml44 {
  margin-left: 44px !important;
}
.notice-list.mr44, .notice-list *.mr44 {
  margin-right: 44px !important;
}
.notice-list.mx44, .notice-list *.mx44 {
  margin-left: 44px !important;
  margin-right: 44px !important;
}
.notice-list.my44, .notice-list *.my44 {
  margin-top: 44px !important;
  margin-bottom: 44px !important;
}
.notice-list.p44, .notice-list *.p44 {
  padding: 44px !important;
}
.notice-list.pt44, .notice-list *.pt44 {
  padding-top: 44px !important;
}
.notice-list.pb44, .notice-list *.pb44 {
  padding-bottom: 44px !important;
}
.notice-list.pl44, .notice-list *.pl44 {
  padding-left: 44px !important;
}
.notice-list.pr44, .notice-list *.pr44 {
  padding-right: 44px !important;
}
.notice-list.px44, .notice-list *.px44 {
  padding-left: 44px !important;
  padding-right: 44px !important;
}
.notice-list.py44, .notice-list *.py44 {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
.notice-list.m48, .notice-list *.m48 {
  margin: 48px !important;
}
.notice-list.mt48, .notice-list *.mt48 {
  margin-top: 48px !important;
}
.notice-list.mb48, .notice-list *.mb48 {
  margin-bottom: 48px !important;
}
.notice-list.ml48, .notice-list *.ml48 {
  margin-left: 48px !important;
}
.notice-list.mr48, .notice-list *.mr48 {
  margin-right: 48px !important;
}
.notice-list.mx48, .notice-list *.mx48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}
.notice-list.my48, .notice-list *.my48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}
.notice-list.p48, .notice-list *.p48 {
  padding: 48px !important;
}
.notice-list.pt48, .notice-list *.pt48 {
  padding-top: 48px !important;
}
.notice-list.pb48, .notice-list *.pb48 {
  padding-bottom: 48px !important;
}
.notice-list.pl48, .notice-list *.pl48 {
  padding-left: 48px !important;
}
.notice-list.pr48, .notice-list *.pr48 {
  padding-right: 48px !important;
}
.notice-list.px48, .notice-list *.px48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
.notice-list.py48, .notice-list *.py48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.notice-list.m52, .notice-list *.m52 {
  margin: 52px !important;
}
.notice-list.mt52, .notice-list *.mt52 {
  margin-top: 52px !important;
}
.notice-list.mb52, .notice-list *.mb52 {
  margin-bottom: 52px !important;
}
.notice-list.ml52, .notice-list *.ml52 {
  margin-left: 52px !important;
}
.notice-list.mr52, .notice-list *.mr52 {
  margin-right: 52px !important;
}
.notice-list.mx52, .notice-list *.mx52 {
  margin-left: 52px !important;
  margin-right: 52px !important;
}
.notice-list.my52, .notice-list *.my52 {
  margin-top: 52px !important;
  margin-bottom: 52px !important;
}
.notice-list.p52, .notice-list *.p52 {
  padding: 52px !important;
}
.notice-list.pt52, .notice-list *.pt52 {
  padding-top: 52px !important;
}
.notice-list.pb52, .notice-list *.pb52 {
  padding-bottom: 52px !important;
}
.notice-list.pl52, .notice-list *.pl52 {
  padding-left: 52px !important;
}
.notice-list.pr52, .notice-list *.pr52 {
  padding-right: 52px !important;
}
.notice-list.px52, .notice-list *.px52 {
  padding-left: 52px !important;
  padding-right: 52px !important;
}
.notice-list.py52, .notice-list *.py52 {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}
.notice-list.m56, .notice-list *.m56 {
  margin: 56px !important;
}
.notice-list.mt56, .notice-list *.mt56 {
  margin-top: 56px !important;
}
.notice-list.mb56, .notice-list *.mb56 {
  margin-bottom: 56px !important;
}
.notice-list.ml56, .notice-list *.ml56 {
  margin-left: 56px !important;
}
.notice-list.mr56, .notice-list *.mr56 {
  margin-right: 56px !important;
}
.notice-list.mx56, .notice-list *.mx56 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}
.notice-list.my56, .notice-list *.my56 {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}
.notice-list.p56, .notice-list *.p56 {
  padding: 56px !important;
}
.notice-list.pt56, .notice-list *.pt56 {
  padding-top: 56px !important;
}
.notice-list.pb56, .notice-list *.pb56 {
  padding-bottom: 56px !important;
}
.notice-list.pl56, .notice-list *.pl56 {
  padding-left: 56px !important;
}
.notice-list.pr56, .notice-list *.pr56 {
  padding-right: 56px !important;
}
.notice-list.px56, .notice-list *.px56 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}
.notice-list.py56, .notice-list *.py56 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.notice-list.m60, .notice-list *.m60 {
  margin: 60px !important;
}
.notice-list.mt60, .notice-list *.mt60 {
  margin-top: 60px !important;
}
.notice-list.mb60, .notice-list *.mb60 {
  margin-bottom: 60px !important;
}
.notice-list.ml60, .notice-list *.ml60 {
  margin-left: 60px !important;
}
.notice-list.mr60, .notice-list *.mr60 {
  margin-right: 60px !important;
}
.notice-list.mx60, .notice-list *.mx60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}
.notice-list.my60, .notice-list *.my60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.notice-list.p60, .notice-list *.p60 {
  padding: 60px !important;
}
.notice-list.pt60, .notice-list *.pt60 {
  padding-top: 60px !important;
}
.notice-list.pb60, .notice-list *.pb60 {
  padding-bottom: 60px !important;
}
.notice-list.pl60, .notice-list *.pl60 {
  padding-left: 60px !important;
}
.notice-list.pr60, .notice-list *.pr60 {
  padding-right: 60px !important;
}
.notice-list.px60, .notice-list *.px60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}
.notice-list.py60, .notice-list *.py60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.notice-list.m64, .notice-list *.m64 {
  margin: 64px !important;
}
.notice-list.mt64, .notice-list *.mt64 {
  margin-top: 64px !important;
}
.notice-list.mb64, .notice-list *.mb64 {
  margin-bottom: 64px !important;
}
.notice-list.ml64, .notice-list *.ml64 {
  margin-left: 64px !important;
}
.notice-list.mr64, .notice-list *.mr64 {
  margin-right: 64px !important;
}
.notice-list.mx64, .notice-list *.mx64 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}
.notice-list.my64, .notice-list *.my64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}
.notice-list.p64, .notice-list *.p64 {
  padding: 64px !important;
}
.notice-list.pt64, .notice-list *.pt64 {
  padding-top: 64px !important;
}
.notice-list.pb64, .notice-list *.pb64 {
  padding-bottom: 64px !important;
}
.notice-list.pl64, .notice-list *.pl64 {
  padding-left: 64px !important;
}
.notice-list.pr64, .notice-list *.pr64 {
  padding-right: 64px !important;
}
.notice-list.px64, .notice-list *.px64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
.notice-list.py64, .notice-list *.py64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.notice-list.underline, .notice-list *.underline {
  text-decoration: underline !important;
}
.notice-list li {
  padding-left: 11px;
  position: relative;
}
.notice-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-circle, 50%);
  background-color: currentColor;
}

.divide-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-black {
  color: #000000 !important;
}

.color-white {
  color: #ffffff !important;
}

.color-alert {
  color: #ff0000 !important;
}

.color-point {
  color: #eb58ee !important;
}

.color-gray900 {
  color: #030303 !important;
}

.color-gray800 {
  color: #0e0e0e !important;
}

.color-gray700 {
  color: #222222 !important;
}

.color-gray600 {
  color: #444444 !important;
}

.color-gray500 {
  color: #666666 !important;
}

.color-gray400 {
  color: #757575 !important;
}

.color-gray300 {
  color: #bbbbbb !important;
}

.color-gray200 {
  color: #cccccc !important;
}

.color-gray50 {
  color: #efefef !important;
}

.color-gray30 {
  color: #f6f6f6 !important;
}

.color-focus {
  color: #0066cc !important;
}

.ico-bg-black {
  background-color: #000000 !important;
}

.ico-bg-white {
  background-color: #ffffff !important;
}

.ico-bg-alert {
  background-color: #ff0000 !important;
}

.ico-bg-point {
  background-color: #eb58ee !important;
}

.ico-bg-gray900 {
  background-color: #030303 !important;
}

.ico-bg-gray800 {
  background-color: #0e0e0e !important;
}

.ico-bg-gray700 {
  background-color: #222222 !important;
}

.ico-bg-gray600 {
  background-color: #444444 !important;
}

.ico-bg-gray500 {
  background-color: #666666 !important;
}

.ico-bg-gray400 {
  background-color: #757575 !important;
}

.ico-bg-gray300 {
  background-color: #bbbbbb !important;
}

.ico-bg-gray200 {
  background-color: #cccccc !important;
}

.ico-bg-gray50 {
  background-color: #efefef !important;
}

.ico-bg-gray30 {
  background-color: #f6f6f6 !important;
}

.ico-bg-focus {
  background-color: #0066cc !important;
}

.ico-size-4 {
  width: 4px !important;
  height: 4px !important;
}

.ico-size-6 {
  width: 6px !important;
  height: 6px !important;
}

.ico-size-8 {
  width: 8px !important;
  height: 8px !important;
}

.ico-size-9 {
  width: 9px !important;
  height: 9px !important;
}

.ico-size-10 {
  width: 10px !important;
  height: 10px !important;
}

.ico-size-12 {
  width: 12px !important;
  height: 12px !important;
}

.ico-size-14 {
  width: 14px !important;
  height: 14px !important;
}

.ico-size-16 {
  width: 16px !important;
  height: 16px !important;
}

.ico-size-18 {
  width: 18px !important;
  height: 18px !important;
}

.ico-size-20 {
  width: 20px !important;
  height: 20px !important;
}

.ico-size-22 {
  width: 22px !important;
  height: 22px !important;
}

.ico-size-24 {
  width: 24px !important;
  height: 24px !important;
}

.ico-size-26 {
  width: 26px !important;
  height: 26px !important;
}

.ico-size-28 {
  width: 28px !important;
  height: 28px !important;
}

.ico-size-30 {
  width: 30px !important;
  height: 30px !important;
}

.ico-size-32 {
  width: 32px !important;
  height: 32px !important;
}

.ico-size-36 {
  width: 36px !important;
  height: 36px !important;
}

.ico-size-40 {
  width: 40px !important;
  height: 40px !important;
}

.ico-size-50 {
  width: 50px !important;
  height: 50px !important;
}

.ellipsis {
  display: grid;
}
.ellipsis > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  display: grid;
}
.ellipsis-2 > * {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis-3 {
  display: grid;
}
.ellipsis-3 > * {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis-4 {
  display: grid;
}
.ellipsis-4 > * {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis-5 {
  display: grid;
}
.ellipsis-5 > * {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

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

.fw800 {
  font-weight: 800 !important;
}

.underline {
  text-decoration: underline !important;
}

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

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

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

i[class^=ico-], i[class*=" ico-"] {
  display: inline-block;
  background-color: var(--color-black, #000000);
  flex-shrink: 0;
}

i.ico-cart {
  -webkit-mask: url("../images/ico/ico-cart.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-cart.svg") center/contain no-repeat;
}

i.ico-chev-circle-left {
  -webkit-mask: url("../images/ico/ico-chev-circle-left.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-circle-left.svg") center/contain no-repeat;
}

i.ico-chev-circle-right {
  -webkit-mask: url("../images/ico/ico-chev-circle-right.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-circle-right.svg") center/contain no-repeat;
}

i.ico-heart {
  -webkit-mask: url("../images/ico/ico-heart.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-heart.svg") center/contain no-repeat;
}

i.ico-info {
  -webkit-mask: url("../images/ico/ico-info.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-info.svg") center/contain no-repeat;
}

i.ico-menu {
  -webkit-mask: url("../images/ico/ico-menu.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-menu.svg") center/contain no-repeat;
}

i.ico-mypage {
  -webkit-mask: url("../images/ico/ico-mypage.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-mypage.svg") center/contain no-repeat;
}

i.ico-search {
  -webkit-mask: url("../images/ico/ico-search.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-search.svg") center/contain no-repeat;
}

i.ico-share {
  -webkit-mask: url("../images/ico/ico-share.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-share.svg") center/contain no-repeat;
}

i.ico-cart-on {
  -webkit-mask: url("../images/ico/ico-cart-on.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-cart-on.svg") center/contain no-repeat;
}

i.ico-change {
  -webkit-mask: url("../images/ico/ico-change.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-change.svg") center/contain no-repeat;
}

i.ico-delivery {
  -webkit-mask: url("../images/ico/ico-delivery.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-delivery.svg") center/contain no-repeat;
}

i.ico-heart-on {
  -webkit-mask: url("../images/ico/ico-heart-on.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-heart-on.svg") center/contain no-repeat;
}

i.ico-locate {
  -webkit-mask: url("../images/ico/ico-locate.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-locate.svg") center/contain no-repeat;
}

i.ico-lock {
  -webkit-mask: url("../images/ico/ico-lock.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-lock.svg") center/contain no-repeat;
}

i.ico-mypage-on {
  -webkit-mask: url("../images/ico/ico-mypage-on.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-mypage-on.svg") center/contain no-repeat;
}

i.ico-tri-down {
  -webkit-mask: url("../images/ico/ico-tri-down.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-tri-down.svg") center/contain no-repeat;
}

i.ico-tri-up {
  -webkit-mask: url("../images/ico/ico-tri-up.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-tri-up.svg") center/contain no-repeat;
}

i.ico-arr-prev {
  -webkit-mask: url("../images/ico/ico-arr-prev.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-arr-prev.svg") center/contain no-repeat;
}

i.ico-arr-next {
  -webkit-mask: url("../images/ico/ico-arr-next.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-arr-next.svg") center/contain no-repeat;
}

i.ico-arr-top {
  -webkit-mask: url("../images/ico/ico-arr-top.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-arr-top.svg") center/contain no-repeat;
}

i.ico-valid {
  -webkit-mask: url("../images/ico/ico-valid.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-valid.svg") center/contain no-repeat;
}

i.ico-check {
  -webkit-mask: url("../images/ico/ico-check.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-check.svg") center/contain no-repeat;
}

i.ico-chev-first {
  -webkit-mask: url("../images/ico/ico-chev-first.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-first.svg") center/contain no-repeat;
}

i.ico-chev-last {
  -webkit-mask: url("../images/ico/ico-chev-last.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-last.svg") center/contain no-repeat;
}

i.ico-chev-left {
  -webkit-mask: url("../images/ico/ico-chev-left.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-left.svg") center/contain no-repeat;
}

i.ico-chev-down {
  -webkit-mask: url("../images/ico/ico-chev-down.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-down.svg") center/contain no-repeat;
}

i.ico-chev-up {
  -webkit-mask: url("../images/ico/ico-chev-up.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-up.svg") center/contain no-repeat;
}

i.ico-chev-right {
  -webkit-mask: url("../images/ico/ico-chev-right.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-chev-right.svg") center/contain no-repeat;
}

i.ico-close {
  -webkit-mask: url("../images/ico/ico-close.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-close.svg") center/contain no-repeat;
}

i.ico-menu-close {
  -webkit-mask: url("../images/ico/ico-menu-close.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-menu-close.svg") center/contain no-repeat;
}

i.ico-close-margin {
  -webkit-mask: url("../images/ico/ico-close-margin.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-close-margin.svg") center/contain no-repeat;
}

i.ico-download {
  -webkit-mask: url("../images/ico/ico-download.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-download.svg") center/contain no-repeat;
}

i.ico-eye {
  -webkit-mask: url("../images/ico/ico-eye.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-eye.svg") center/contain no-repeat;
}

i.ico-eye-x {
  -webkit-mask: url("../images/ico/ico-eye-x.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-eye-x.svg") center/contain no-repeat;
}

i.ico-map {
  -webkit-mask: url("../images/ico/ico-map.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-map.svg") center/contain no-repeat;
}

i.ico-minus {
  -webkit-mask: url("../images/ico/ico-minus.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-minus.svg") center/contain no-repeat;
}

i.ico-plus {
  -webkit-mask: url("../images/ico/ico-plus.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-plus.svg") center/contain no-repeat;
}

i.ico-plus-margin {
  -webkit-mask: url("../images/ico/ico-plus-margin.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-plus-margin.svg") center/contain no-repeat;
}

i.ico-sound-off {
  -webkit-mask: url("../images/ico/ico-sound-off.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-sound-off.svg") center/contain no-repeat;
}

i.ico-sound-on {
  -webkit-mask: url("../images/ico/ico-sound-on.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-sound-on.svg") center/contain no-repeat;
}

i.ico-star {
  -webkit-mask: url("../images/ico/ico-star.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-star.svg") center/contain no-repeat;
}

i.ico-star-on {
  -webkit-mask: url("../images/ico/ico-star-on.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-star-on.svg") center/contain no-repeat;
}

i.ico-tel {
  -webkit-mask: url("../images/ico/ico-tel.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-tel.svg") center/contain no-repeat;
}

i.ico-zoom-in {
  -webkit-mask: url("../images/ico/ico-zoom-in.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-zoom-in.svg") center/contain no-repeat;
}

i.ico-zoom-out {
  -webkit-mask: url("../images/ico/ico-zoom-out.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-zoom-out.svg") center/contain no-repeat;
}

i.ico-autoplay-play {
  -webkit-mask: url("../images/ico/ico-autoplay-play.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-autoplay-play.svg") center/contain no-repeat;
}

i.ico-autoplay-pause {
  -webkit-mask: url("../images/ico/ico-autoplay-pause.svg") center/contain no-repeat;
  mask: url("../images/ico/ico-autoplay-pause.svg") center/contain no-repeat;
}

i.ico-result-alert {
  background-image: url("../images/ico/ico-result-alert.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

i.ico-result-success {
  background-image: url("../images/ico/ico-result-success.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

i.ico-close-margin-bg {
  background-image: url("../images/ico/ico-close-margin-bg.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

.swiper-button-lock,
.swiper-pagination-lock {
  display: none !important;
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.cart-item-chk {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.cart-item-body {
  flex: 1;
  min-width: 0;
}

.cart-item-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.cart-item-thumb {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  aspect-ratio: var(--ratio, 0.75);
}
.cart-item-thumb a,
.cart-item-thumb .cart-item-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}
.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.noimage {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray200, #cccccc);
}

.cart-item.is-wishlist .cart-item-thumb {
  width: 122px;
  aspect-ratio: var(--ratio, 0.75);
}
.cart-item.is-wishlist .cart-item-info .cart-item-top .cart-item-top-name .cart-item-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
}

.wishlist-panel .cart-item-info .cart-item-top .cart-item-top-name .cart-item-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-item-info .cart-item-top {
  display: grid;
}
.cart-item-info .cart-item-top .cart-item-top-name {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.cart-item-info .cart-item-top .cart-item-top-name .cart-item-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 18px;
  word-break: break-all;
  color: var(--color-black, #000000);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item-del {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
}
.cart-item-price .price-sale {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.cart-item-price .price-origin {
  font-size: 12px;
  line-height: 18px;
  text-decoration: line-through;
  color: var(--color-black, #000000);
}
.cart-item-price .badge.sale-sandro {
  font-size: 12px;
  line-height: 18px;
  min-height: auto;
}

.cart-price-info {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.cart-detail-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item-labels .badge-group {
  gap: 0;
}
.cart-item-labels .badge-group > *:not(:last-child) {
  border-right: 0;
}

.cart-item.is-selectable {
  position: relative;
  cursor: pointer;
}
.cart-item.is-selectable .cart-item-chk .rdo-wrap,
.cart-item.is-selectable .cart-item-chk .chk-wrap {
  position: static;
}
.cart-item.is-selectable .cart-item-chk .chk,
.cart-item.is-selectable .cart-item-chk .rdo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  opacity: 0.001;
  z-index: 1;
  cursor: pointer;
}
.cart-item.is-selectable .cart-item-del {
  position: relative;
  z-index: 2;
}

.cart-item.is-ended .cart-item-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white, #ffffff);
  opacity: 0.6;
  pointer-events: none;
}
.cart-item.is-ended .cart-item-del {
  opacity: 0.6;
}
.cart-item.is-ended .badge {
  background: #bbb;
  border-color: #bbb;
  color: var(--color-white, #ffffff);
}
.cart-item.is-ended .cart-item-name {
  color: var(--color-gray300, #bbbbbb);
}
.cart-item.is-ended .price-sale,
.cart-item.is-ended .price-origin {
  color: var(--color-gray300, #bbbbbb);
}
.cart-item.is-ended .cart-detail-row {
  color: var(--color-gray300, #bbbbbb);
  word-break: break-all;
}
.cart-item.is-ended .cart-detail-row .cart-detail-label,
.cart-item.is-ended .cart-detail-row .cart-detail-value {
  color: var(--color-gray300, #bbbbbb);
}

.cart-item-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-detail-row {
  display: flex;
  gap: 2px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray400, #757575);
  word-break: break-all;
}
.cart-detail-row.is-inline {
  gap: 8px;
}
.cart-detail-row.is-accent {
  color: var(--color-point, #eb58ee);
}
.cart-detail-row.is-muted .cart-detail-label,
.cart-detail-row.is-muted .cart-detail-value {
  color: var(--color-gray400, #757575);
}
.cart-detail-row.is-ended {
  color: var(--color-gray300, #bbbbbb);
}
.cart-detail-row.is-ended .cart-detail-label,
.cart-detail-row.is-ended .cart-detail-value {
  color: var(--color-gray300, #bbbbbb);
}

.cart-detail-label {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-detail-value {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-detail-value[href] {
  text-decoration: underline;
  color: var(--color-gray500, #666666);
}

.cart-item-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cart-item-actions + .cart-item-actions {
  margin-top: 4px;
}
.cart-item-actions .action-btn {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  text-decoration: underline;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal, 300);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 0.25s;
}
.modal.fs9, .modal *.fs9 {
  font-size: 9px;
  line-height: 11px;
}
.modal.fs9m, .modal *.fs9m {
  font-size: 9px;
  line-height: 11px;
  font-weight: 500;
}
.modal.fs9b, .modal *.fs9b {
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
}
.modal.fs10, .modal *.fs10 {
  font-size: 10px;
  line-height: 10px;
}
.modal.fs10m, .modal *.fs10m {
  font-size: 10px;
  line-height: 10px;
  font-weight: 500;
}
.modal.fs10b, .modal *.fs10b {
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
}
.modal.fs11, .modal *.fs11 {
  font-size: 11px;
  line-height: 16px;
}
.modal.fs11m, .modal *.fs11m {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.modal.fs11b, .modal *.fs11b {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
}
.modal.fs12, .modal *.fs12 {
  font-size: 12px;
  line-height: 18px;
}
.modal.fs12m, .modal *.fs12m {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.modal.fs12b, .modal *.fs12b {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
.modal.fs13, .modal *.fs13 {
  font-size: 13px;
  line-height: 20px;
}
.modal.fs13m, .modal *.fs13m {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
.modal.fs13b, .modal *.fs13b {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.modal.fs14, .modal *.fs14 {
  font-size: 14px;
  line-height: 22px;
}
.modal.fs14m, .modal *.fs14m {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.modal.fs14b, .modal *.fs14b {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
.modal.fs16, .modal *.fs16 {
  font-size: 16px;
  line-height: 24px;
}
.modal.fs16m, .modal *.fs16m {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.modal.fs16b, .modal *.fs16b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.modal.fs18, .modal *.fs18 {
  font-size: 18px;
  line-height: 24px;
}
.modal.fs18m, .modal *.fs18m {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.modal.fs18b, .modal *.fs18b {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
.modal.fs20, .modal *.fs20 {
  font-size: 20px;
  line-height: 28px;
}
.modal.fs20m, .modal *.fs20m {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}
.modal.fs20b, .modal *.fs20b {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.modal.fs22, .modal *.fs22 {
  font-size: 22px;
  line-height: 30px;
}
.modal.fs22m, .modal *.fs22m {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}
.modal.fs22b, .modal *.fs22b {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.modal.fs24, .modal *.fs24 {
  font-size: 24px;
  line-height: 32px;
}
.modal.fs24m, .modal *.fs24m {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}
.modal.fs24b, .modal *.fs24b {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.modal.fs28, .modal *.fs28 {
  font-size: 28px;
  line-height: 36px;
}
.modal.fs28m, .modal *.fs28m {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}
.modal.fs28b, .modal *.fs28b {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.modal.fs32, .modal *.fs32 {
  font-size: 32px;
  line-height: 40px;
}
.modal.fs32m, .modal *.fs32m {
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
}
.modal.fs32b, .modal *.fs32b {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.modal.fs40, .modal *.fs40 {
  font-size: 40px;
  line-height: 48px;
}
.modal.fs40m, .modal *.fs40m {
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
}
.modal.fs40b, .modal *.fs40b {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
}
.modal.fs42, .modal *.fs42 {
  font-size: 42px;
  line-height: 50px;
}
.modal.fs42m, .modal *.fs42m {
  font-size: 42px;
  line-height: 50px;
  font-weight: 500;
}
.modal.fs42b, .modal *.fs42b {
  font-size: 42px;
  line-height: 50px;
  font-weight: 700;
}
.modal.m2, .modal *.m2 {
  margin: 2px !important;
}
.modal.mt2, .modal *.mt2 {
  margin-top: 2px !important;
}
.modal.mb2, .modal *.mb2 {
  margin-bottom: 2px !important;
}
.modal.ml2, .modal *.ml2 {
  margin-left: 2px !important;
}
.modal.mr2, .modal *.mr2 {
  margin-right: 2px !important;
}
.modal.mx2, .modal *.mx2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}
.modal.my2, .modal *.my2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
.modal.p2, .modal *.p2 {
  padding: 2px !important;
}
.modal.pt2, .modal *.pt2 {
  padding-top: 2px !important;
}
.modal.pb2, .modal *.pb2 {
  padding-bottom: 2px !important;
}
.modal.pl2, .modal *.pl2 {
  padding-left: 2px !important;
}
.modal.pr2, .modal *.pr2 {
  padding-right: 2px !important;
}
.modal.px2, .modal *.px2 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.modal.py2, .modal *.py2 {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.modal.m4, .modal *.m4 {
  margin: 4px !important;
}
.modal.mt4, .modal *.mt4 {
  margin-top: 4px !important;
}
.modal.mb4, .modal *.mb4 {
  margin-bottom: 4px !important;
}
.modal.ml4, .modal *.ml4 {
  margin-left: 4px !important;
}
.modal.mr4, .modal *.mr4 {
  margin-right: 4px !important;
}
.modal.mx4, .modal *.mx4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.modal.my4, .modal *.my4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.modal.p4, .modal *.p4 {
  padding: 4px !important;
}
.modal.pt4, .modal *.pt4 {
  padding-top: 4px !important;
}
.modal.pb4, .modal *.pb4 {
  padding-bottom: 4px !important;
}
.modal.pl4, .modal *.pl4 {
  padding-left: 4px !important;
}
.modal.pr4, .modal *.pr4 {
  padding-right: 4px !important;
}
.modal.px4, .modal *.px4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.modal.py4, .modal *.py4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.modal.m8, .modal *.m8 {
  margin: 8px !important;
}
.modal.mt8, .modal *.mt8 {
  margin-top: 8px !important;
}
.modal.mb8, .modal *.mb8 {
  margin-bottom: 8px !important;
}
.modal.ml8, .modal *.ml8 {
  margin-left: 8px !important;
}
.modal.mr8, .modal *.mr8 {
  margin-right: 8px !important;
}
.modal.mx8, .modal *.mx8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.modal.my8, .modal *.my8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.modal.p8, .modal *.p8 {
  padding: 8px !important;
}
.modal.pt8, .modal *.pt8 {
  padding-top: 8px !important;
}
.modal.pb8, .modal *.pb8 {
  padding-bottom: 8px !important;
}
.modal.pl8, .modal *.pl8 {
  padding-left: 8px !important;
}
.modal.pr8, .modal *.pr8 {
  padding-right: 8px !important;
}
.modal.px8, .modal *.px8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.modal.py8, .modal *.py8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.modal.m12, .modal *.m12 {
  margin: 12px !important;
}
.modal.mt12, .modal *.mt12 {
  margin-top: 12px !important;
}
.modal.mb12, .modal *.mb12 {
  margin-bottom: 12px !important;
}
.modal.ml12, .modal *.ml12 {
  margin-left: 12px !important;
}
.modal.mr12, .modal *.mr12 {
  margin-right: 12px !important;
}
.modal.mx12, .modal *.mx12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
.modal.my12, .modal *.my12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.modal.p12, .modal *.p12 {
  padding: 12px !important;
}
.modal.pt12, .modal *.pt12 {
  padding-top: 12px !important;
}
.modal.pb12, .modal *.pb12 {
  padding-bottom: 12px !important;
}
.modal.pl12, .modal *.pl12 {
  padding-left: 12px !important;
}
.modal.pr12, .modal *.pr12 {
  padding-right: 12px !important;
}
.modal.px12, .modal *.px12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.modal.py12, .modal *.py12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.modal.m16, .modal *.m16 {
  margin: 16px !important;
}
.modal.mt16, .modal *.mt16 {
  margin-top: 16px !important;
}
.modal.mb16, .modal *.mb16 {
  margin-bottom: 16px !important;
}
.modal.ml16, .modal *.ml16 {
  margin-left: 16px !important;
}
.modal.mr16, .modal *.mr16 {
  margin-right: 16px !important;
}
.modal.mx16, .modal *.mx16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.modal.my16, .modal *.my16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.modal.p16, .modal *.p16 {
  padding: 16px !important;
}
.modal.pt16, .modal *.pt16 {
  padding-top: 16px !important;
}
.modal.pb16, .modal *.pb16 {
  padding-bottom: 16px !important;
}
.modal.pl16, .modal *.pl16 {
  padding-left: 16px !important;
}
.modal.pr16, .modal *.pr16 {
  padding-right: 16px !important;
}
.modal.px16, .modal *.px16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.modal.py16, .modal *.py16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.modal.m20, .modal *.m20 {
  margin: 20px !important;
}
.modal.mt20, .modal *.mt20 {
  margin-top: 20px !important;
}
.modal.mb20, .modal *.mb20 {
  margin-bottom: 20px !important;
}
.modal.ml20, .modal *.ml20 {
  margin-left: 20px !important;
}
.modal.mr20, .modal *.mr20 {
  margin-right: 20px !important;
}
.modal.mx20, .modal *.mx20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
.modal.my20, .modal *.my20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.modal.p20, .modal *.p20 {
  padding: 20px !important;
}
.modal.pt20, .modal *.pt20 {
  padding-top: 20px !important;
}
.modal.pb20, .modal *.pb20 {
  padding-bottom: 20px !important;
}
.modal.pl20, .modal *.pl20 {
  padding-left: 20px !important;
}
.modal.pr20, .modal *.pr20 {
  padding-right: 20px !important;
}
.modal.px20, .modal *.px20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.modal.py20, .modal *.py20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.modal.m24, .modal *.m24 {
  margin: 24px !important;
}
.modal.mt24, .modal *.mt24 {
  margin-top: 24px !important;
}
.modal.mb24, .modal *.mb24 {
  margin-bottom: 24px !important;
}
.modal.ml24, .modal *.ml24 {
  margin-left: 24px !important;
}
.modal.mr24, .modal *.mr24 {
  margin-right: 24px !important;
}
.modal.mx24, .modal *.mx24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.modal.my24, .modal *.my24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.modal.p24, .modal *.p24 {
  padding: 24px !important;
}
.modal.pt24, .modal *.pt24 {
  padding-top: 24px !important;
}
.modal.pb24, .modal *.pb24 {
  padding-bottom: 24px !important;
}
.modal.pl24, .modal *.pl24 {
  padding-left: 24px !important;
}
.modal.pr24, .modal *.pr24 {
  padding-right: 24px !important;
}
.modal.px24, .modal *.px24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.modal.py24, .modal *.py24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.modal.m28, .modal *.m28 {
  margin: 28px !important;
}
.modal.mt28, .modal *.mt28 {
  margin-top: 28px !important;
}
.modal.mb28, .modal *.mb28 {
  margin-bottom: 28px !important;
}
.modal.ml28, .modal *.ml28 {
  margin-left: 28px !important;
}
.modal.mr28, .modal *.mr28 {
  margin-right: 28px !important;
}
.modal.mx28, .modal *.mx28 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}
.modal.my28, .modal *.my28 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}
.modal.p28, .modal *.p28 {
  padding: 28px !important;
}
.modal.pt28, .modal *.pt28 {
  padding-top: 28px !important;
}
.modal.pb28, .modal *.pb28 {
  padding-bottom: 28px !important;
}
.modal.pl28, .modal *.pl28 {
  padding-left: 28px !important;
}
.modal.pr28, .modal *.pr28 {
  padding-right: 28px !important;
}
.modal.px28, .modal *.px28 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.modal.py28, .modal *.py28 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.modal.m32, .modal *.m32 {
  margin: 32px !important;
}
.modal.mt32, .modal *.mt32 {
  margin-top: 32px !important;
}
.modal.mb32, .modal *.mb32 {
  margin-bottom: 32px !important;
}
.modal.ml32, .modal *.ml32 {
  margin-left: 32px !important;
}
.modal.mr32, .modal *.mr32 {
  margin-right: 32px !important;
}
.modal.mx32, .modal *.mx32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.modal.my32, .modal *.my32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.modal.p32, .modal *.p32 {
  padding: 32px !important;
}
.modal.pt32, .modal *.pt32 {
  padding-top: 32px !important;
}
.modal.pb32, .modal *.pb32 {
  padding-bottom: 32px !important;
}
.modal.pl32, .modal *.pl32 {
  padding-left: 32px !important;
}
.modal.pr32, .modal *.pr32 {
  padding-right: 32px !important;
}
.modal.px32, .modal *.px32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.modal.py32, .modal *.py32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.modal.m36, .modal *.m36 {
  margin: 36px !important;
}
.modal.mt36, .modal *.mt36 {
  margin-top: 36px !important;
}
.modal.mb36, .modal *.mb36 {
  margin-bottom: 36px !important;
}
.modal.ml36, .modal *.ml36 {
  margin-left: 36px !important;
}
.modal.mr36, .modal *.mr36 {
  margin-right: 36px !important;
}
.modal.mx36, .modal *.mx36 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}
.modal.my36, .modal *.my36 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}
.modal.p36, .modal *.p36 {
  padding: 36px !important;
}
.modal.pt36, .modal *.pt36 {
  padding-top: 36px !important;
}
.modal.pb36, .modal *.pb36 {
  padding-bottom: 36px !important;
}
.modal.pl36, .modal *.pl36 {
  padding-left: 36px !important;
}
.modal.pr36, .modal *.pr36 {
  padding-right: 36px !important;
}
.modal.px36, .modal *.px36 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}
.modal.py36, .modal *.py36 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
.modal.m40, .modal *.m40 {
  margin: 40px !important;
}
.modal.mt40, .modal *.mt40 {
  margin-top: 40px !important;
}
.modal.mb40, .modal *.mb40 {
  margin-bottom: 40px !important;
}
.modal.ml40, .modal *.ml40 {
  margin-left: 40px !important;
}
.modal.mr40, .modal *.mr40 {
  margin-right: 40px !important;
}
.modal.mx40, .modal *.mx40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.modal.my40, .modal *.my40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.modal.p40, .modal *.p40 {
  padding: 40px !important;
}
.modal.pt40, .modal *.pt40 {
  padding-top: 40px !important;
}
.modal.pb40, .modal *.pb40 {
  padding-bottom: 40px !important;
}
.modal.pl40, .modal *.pl40 {
  padding-left: 40px !important;
}
.modal.pr40, .modal *.pr40 {
  padding-right: 40px !important;
}
.modal.px40, .modal *.px40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.modal.py40, .modal *.py40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.modal.m44, .modal *.m44 {
  margin: 44px !important;
}
.modal.mt44, .modal *.mt44 {
  margin-top: 44px !important;
}
.modal.mb44, .modal *.mb44 {
  margin-bottom: 44px !important;
}
.modal.ml44, .modal *.ml44 {
  margin-left: 44px !important;
}
.modal.mr44, .modal *.mr44 {
  margin-right: 44px !important;
}
.modal.mx44, .modal *.mx44 {
  margin-left: 44px !important;
  margin-right: 44px !important;
}
.modal.my44, .modal *.my44 {
  margin-top: 44px !important;
  margin-bottom: 44px !important;
}
.modal.p44, .modal *.p44 {
  padding: 44px !important;
}
.modal.pt44, .modal *.pt44 {
  padding-top: 44px !important;
}
.modal.pb44, .modal *.pb44 {
  padding-bottom: 44px !important;
}
.modal.pl44, .modal *.pl44 {
  padding-left: 44px !important;
}
.modal.pr44, .modal *.pr44 {
  padding-right: 44px !important;
}
.modal.px44, .modal *.px44 {
  padding-left: 44px !important;
  padding-right: 44px !important;
}
.modal.py44, .modal *.py44 {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
.modal.m48, .modal *.m48 {
  margin: 48px !important;
}
.modal.mt48, .modal *.mt48 {
  margin-top: 48px !important;
}
.modal.mb48, .modal *.mb48 {
  margin-bottom: 48px !important;
}
.modal.ml48, .modal *.ml48 {
  margin-left: 48px !important;
}
.modal.mr48, .modal *.mr48 {
  margin-right: 48px !important;
}
.modal.mx48, .modal *.mx48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}
.modal.my48, .modal *.my48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}
.modal.p48, .modal *.p48 {
  padding: 48px !important;
}
.modal.pt48, .modal *.pt48 {
  padding-top: 48px !important;
}
.modal.pb48, .modal *.pb48 {
  padding-bottom: 48px !important;
}
.modal.pl48, .modal *.pl48 {
  padding-left: 48px !important;
}
.modal.pr48, .modal *.pr48 {
  padding-right: 48px !important;
}
.modal.px48, .modal *.px48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
.modal.py48, .modal *.py48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.modal.m52, .modal *.m52 {
  margin: 52px !important;
}
.modal.mt52, .modal *.mt52 {
  margin-top: 52px !important;
}
.modal.mb52, .modal *.mb52 {
  margin-bottom: 52px !important;
}
.modal.ml52, .modal *.ml52 {
  margin-left: 52px !important;
}
.modal.mr52, .modal *.mr52 {
  margin-right: 52px !important;
}
.modal.mx52, .modal *.mx52 {
  margin-left: 52px !important;
  margin-right: 52px !important;
}
.modal.my52, .modal *.my52 {
  margin-top: 52px !important;
  margin-bottom: 52px !important;
}
.modal.p52, .modal *.p52 {
  padding: 52px !important;
}
.modal.pt52, .modal *.pt52 {
  padding-top: 52px !important;
}
.modal.pb52, .modal *.pb52 {
  padding-bottom: 52px !important;
}
.modal.pl52, .modal *.pl52 {
  padding-left: 52px !important;
}
.modal.pr52, .modal *.pr52 {
  padding-right: 52px !important;
}
.modal.px52, .modal *.px52 {
  padding-left: 52px !important;
  padding-right: 52px !important;
}
.modal.py52, .modal *.py52 {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}
.modal.m56, .modal *.m56 {
  margin: 56px !important;
}
.modal.mt56, .modal *.mt56 {
  margin-top: 56px !important;
}
.modal.mb56, .modal *.mb56 {
  margin-bottom: 56px !important;
}
.modal.ml56, .modal *.ml56 {
  margin-left: 56px !important;
}
.modal.mr56, .modal *.mr56 {
  margin-right: 56px !important;
}
.modal.mx56, .modal *.mx56 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}
.modal.my56, .modal *.my56 {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}
.modal.p56, .modal *.p56 {
  padding: 56px !important;
}
.modal.pt56, .modal *.pt56 {
  padding-top: 56px !important;
}
.modal.pb56, .modal *.pb56 {
  padding-bottom: 56px !important;
}
.modal.pl56, .modal *.pl56 {
  padding-left: 56px !important;
}
.modal.pr56, .modal *.pr56 {
  padding-right: 56px !important;
}
.modal.px56, .modal *.px56 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}
.modal.py56, .modal *.py56 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.modal.m60, .modal *.m60 {
  margin: 60px !important;
}
.modal.mt60, .modal *.mt60 {
  margin-top: 60px !important;
}
.modal.mb60, .modal *.mb60 {
  margin-bottom: 60px !important;
}
.modal.ml60, .modal *.ml60 {
  margin-left: 60px !important;
}
.modal.mr60, .modal *.mr60 {
  margin-right: 60px !important;
}
.modal.mx60, .modal *.mx60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}
.modal.my60, .modal *.my60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.modal.p60, .modal *.p60 {
  padding: 60px !important;
}
.modal.pt60, .modal *.pt60 {
  padding-top: 60px !important;
}
.modal.pb60, .modal *.pb60 {
  padding-bottom: 60px !important;
}
.modal.pl60, .modal *.pl60 {
  padding-left: 60px !important;
}
.modal.pr60, .modal *.pr60 {
  padding-right: 60px !important;
}
.modal.px60, .modal *.px60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}
.modal.py60, .modal *.py60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.modal.m64, .modal *.m64 {
  margin: 64px !important;
}
.modal.mt64, .modal *.mt64 {
  margin-top: 64px !important;
}
.modal.mb64, .modal *.mb64 {
  margin-bottom: 64px !important;
}
.modal.ml64, .modal *.ml64 {
  margin-left: 64px !important;
}
.modal.mr64, .modal *.mr64 {
  margin-right: 64px !important;
}
.modal.mx64, .modal *.mx64 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}
.modal.my64, .modal *.my64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}
.modal.p64, .modal *.p64 {
  padding: 64px !important;
}
.modal.pt64, .modal *.pt64 {
  padding-top: 64px !important;
}
.modal.pb64, .modal *.pb64 {
  padding-bottom: 64px !important;
}
.modal.pl64, .modal *.pl64 {
  padding-left: 64px !important;
}
.modal.pr64, .modal *.pr64 {
  padding-right: 64px !important;
}
.modal.px64, .modal *.px64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
.modal.py64, .modal *.py64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.modal.underline, .modal *.underline {
  text-decoration: underline !important;
}
.modal.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s 0s;
  display: flex;
}
.modal[inert] {
  pointer-events: none;
}
.modal .modal-dim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal.is-open .modal-dim {
  opacity: 1;
}
.modal .modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white, #ffffff);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.modal.is-open .modal-dialog {
  opacity: 1;
  transform: none;
}

.modal-head {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 40px 20px var(--mobile-gap, 12px);
  flex-shrink: 0;
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
}
.modal-head .modal-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.modal-head .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px var(--mobile-gap, 12px) 32px;
}

.pop-rows {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pop-rows .btn-section {
  min-height: calc(38px + var(--safe-bottom));
  margin-top: 0px;
}
.pop-rows .inp-group {
  margin-top: 0;
}
.pop-rows .pop-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.modal-sec-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-sec-head .modal-sec-title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.modal-sec-head .modal-sec-desc {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.pop-head:has(.pop-tit) .pop-spacer {
  display: none;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.modal.modal-bottomsheet {
  transition: visibility 0s 0.35s;
  align-items: flex-end;
}
.modal.modal-bottomsheet.is-open {
  transition: visibility 0s 0s;
}
.modal.modal-bottomsheet .modal-dialog {
  height: auto;
  max-height: calc(100dvh - 80px);
  opacity: 1;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.modal-bottomsheet.is-open .modal-dialog {
  transform: translateY(0);
}

.modal-bs-handle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 20px;
  width: 100%;
  flex-shrink: 0;
  cursor: pointer;
}

.modal-bs-bar {
  display: block;
  width: 40px;
  height: 4px;
  background: var(--color-gray200, #cccccc);
  border-radius: var(--radius-full, 999px);
}

.modal-bs-title {
  padding: 0 var(--mobile-gap, 12px) 0;
  flex-shrink: 0;
}
.modal-bs-title .modal-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.modal-bs-title + .modal-body {
  padding-top: 8px;
}

.modal-bs-sticky {
  flex-shrink: 0;
  padding: 16px var(--mobile-gap, 12px);
  box-shadow: 0 -5px 8px rgba(187, 187, 187, 0.1);
}

.modal-footer {
  flex-shrink: 0;
  background: var(--color-white, #ffffff);
  padding: 16px var(--mobile-gap, 12px);
  min-height: calc(70px + var(--safe-bottom));
}
.modal-footer .btn-group > .btn {
  flex: 1;
}
.modal-footer .coupon-max-chk + .btn-group {
  min-height: calc(38px + var(--safe-bottom));
}
.modal-footer .cart-price-total {
  padding: 0;
}
.modal-footer > .cart-links {
  min-height: calc(80px + var(--safe-bottom));
}
.modal-footer .cart-cta {
  padding: 0;
  margin: 16px 0 0;
}
.modal-footer .cart-cta + .cart-links {
  align-items: flex-start;
}
.modal-footer .pop-nav {
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-footer .pop-nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  width: fit-content;
}
.modal-footer .pop-nav-btn i {
  width: 8px;
  height: 8px;
}
.modal-footer .pop-nav-next {
  margin-left: auto;
}

.delivery-pop .tbl > thead th,
.delivery-pop .tbl > thead td,
.delivery-pop .tbl > tbody th,
.delivery-pop .tbl > tbody td {
  text-align: left;
  vertical-align: top;
}

.modal[role=alertdialog] .modal-dialog {
  max-width: calc(100% - 24px);
  min-width: 330px;
  width: fit-content;
  height: auto;
}

.modal-alert-close {
  display: flex;
  justify-content: flex-end;
  padding: 40px 0 0;
}
.modal-alert-close .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 16px;
  top: 16px;
}

.modal-alert {
  padding: 24px 36px 36px 36px;
}

.modal-alert-title {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.modal-alert-desc {
  font-size: 13px;
  line-height: 20px;
}

.modal-alert-btns {
  display: flex;
  gap: 8px;
  margin-top: 40px;
}
.modal-alert-btns .btn {
  flex: 1;
}

.modal[data-modal-id=mypage-modal] {
  transition: visibility 0s 0.35s;
}
.modal[data-modal-id=mypage-modal].is-open {
  transition: visibility 0s 0s;
}
.modal[data-modal-id=mypage-modal] .modal-dialog {
  opacity: 1;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal[data-modal-id=mypage-modal].is-open .modal-dialog {
  transform: translateX(0);
}

.mypage-modal-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.mypage-modal-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 22px;
  line-height: 17px;
  color: var(--color-black, #000000);
  text-decoration: none;
  white-space: nowrap;
}
.mypage-modal-nav-item .gnb-wish-cnt,
.mypage-modal-nav-item .gnb-cart-cnt {
  margin-left: -5px;
}

.mypage-modal-nav-radio {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-circle, 50%);
}

.mypage-modal-nav-item.is-active .mypage-modal-nav-radio {
  background-color: var(--color-black, #000000);
}

[data-modal-id=mypage-modal] .mypage-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
[data-modal-id=mypage-modal] .mypage-user-greeting {
  font-size: 16px;
  line-height: 24px;
}
[data-modal-id=mypage-modal] .mypage-menu {
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
}
[data-modal-id=mypage-modal] .mypage-menu-item {
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
}
[data-modal-id=mypage-modal] .mypage-menu-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.pop-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pop-intro-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.pop-intro-desc {
  font-size: 13px;
  line-height: 20px;
}

.pop-sec-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.join-auth-sec {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray600, #444444);
}

.find-btn-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.find-btn-group .btn {
  width: 100%;
}

.find-or-divider {
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.find-cs-info {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray500, #666666);
  text-align: center;
}

.find-result-id-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-gray30, #f6f6f6);
  padding: 40px 20px;
  font-size: 13px;
  line-height: 20px;
}

.agree-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.agree-group .agree-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.agree-group .agree-title-wrap .agree-title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
.agree-group .agree-title-wrap .agree-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agree-group .agree-title-wrap .agree-list .agree-all .chk + label {
  font-weight: 700;
}

.agree-item {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.agree-item-row {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.agree-item-row .chk-wrap {
  flex: 1;
}
.agree-item-row .chk-wrap .chk + label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  align-items: center;
}
.agree-item-row .agree-item-label {
  flex: 1;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.agree-item-row .btn-accordion {
  width: 20px !important;
  height: 20px;
  justify-content: center !important;
  margin-right: -4px;
}

.agree-terms-box {
  max-height: 240px;
  overflow-y: auto;
  margin-top: 12px;
  padding: 16px;
  background: var(--color-gray30, #f6f6f6);
  font-size: 13px;
  line-height: 20px;
  border-radius: 5px;
}
.agree-terms-box .agree-terms-box-title {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-black, #000000);
  margin-bottom: 8px;
}
.agree-terms-box .agree-terms-box-body {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray600, #444444);
}

.agree-marketing-recv {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agree-item-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.agree-marketing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: fit-content;
}

#mbMallJoinStep .agree-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#mbMallJoinStep .agree-item {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#mbMallJoinStep .agree-item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#mbMallJoinStep .agree-item-row .chk-wrap {
  flex: 1;
}
#mbMallJoinStep .agree-item-row .chk-wrap .chk + label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  align-items: center;
}
#mbMallJoinStep .agree-item-row .agree-item-label {
  flex: 1;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
#mbMallJoinStep .agree-item-row .btn-accordion {
  width: 20px;
  height: 20px;
  justify-content: center;
  margin-right: -4px;
}
#mbMallJoinStep .agree-terms-box {
  margin-top: 12px;
  padding: 16px;
  background: var(--color-gray50, #efefef);
  font-size: 13px;
  line-height: 20px;
}
#mbMallJoinStep .agree-terms-box-title {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-black, #000000);
  margin-bottom: 8px;
}
#mbMallJoinStep .agree-terms-box-body {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray600, #444444);
}
#mbMallJoinStep .agree-marketing-recv {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#mbMallJoinStep .agree-item-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
#mbMallJoinStep .agree-marketing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: fit-content;
}

[data-modal-id=login-mfa-modal] .inp-underline-actions .btn {
  min-width: 117px;
}

[data-modal-id=login-modal] .inp-group {
  margin-top: 0;
}
[data-modal-id=login-modal] .inp-group-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-row dt {
  font-size: 13px;
  line-height: 20px;
}

.info-row-value {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.info-row-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-row-item {
  display: flex;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
}
.info-row-item span {
  color: var(--color-gray600, #444444);
}

.addr-change-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.addr-change-section + .addr-change-section {
  margin-top: 32px;
}
.addr-change-section .form-section-body {
  gap: 8px;
}
.addr-change-section .form-field-group {
  gap: 8px;
}

.addr-change-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.addr-change-section-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-black, #000000);
}

.addr-change-section-actions {
  display: flex;
  gap: 12px;
}

.addr-change-current {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.addr-change-current-name span {
  margin-left: 8px;
}

.addr-change-zip-btn {
  flex-shrink: 0;
  min-width: 100px;
}

.cancel-add-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cancel-add-modal .cancel-add-modal-notice {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}
.cancel-add-modal .cancel-add-modal-notice li {
  gap: 0;
}
.cancel-add-modal .cancel-add-modal-notice li::before {
  display: none;
}
.cancel-add-modal .cancel-add-modal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.exchange-add-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.exchange-add-modal .exchange-add-modal-notice {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-gray600, #444444);
}
.exchange-add-modal .exchange-add-modal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.cancel-payment-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cancel-payment-modal .cpay-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cancel-payment-modal .cpay-amount-title,
.cancel-payment-modal .cpay-amount-value {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.cancel-payment-modal .cpay-method-sect {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cancel-payment-modal .cpay-method-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.cancel-payment-modal .cpay-radios {
  display: flex;
  gap: 16px;
}
.cancel-payment-modal .cpay-card-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background-color: var(--color-gray30, #f6f6f6);
  border-radius: var(--radius-md, 5px);
  padding: 24px 12px;
}
.cancel-payment-modal .cpay-transfer-panel .notice-list {
  margin-top: 16px;
  padding-left: 12px;
}
.cancel-payment-modal .cpay-card-box-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.cancel-payment-modal .cpay-card-selects {
  display: flex;
  gap: 8px;
  width: 100%;
}
.cancel-payment-modal .cpay-card-selects .select-box {
  flex: 1;
}
.cancel-payment-modal .cpay-escrow-radios {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.cancel-payment-modal .modal-footer {
  padding: 0 12px 36px;
}

.modal .cart-nodata-wrap {
  display: flex;
  flex-direction: column;
}
.modal .cart-nodata-wrap .cart-nodata {
  display: flex;
  flex-direction: column;
}
.modal .cart-nodata-wrap .cart-nodata .btn {
  width: calc(4 * (100cqw - 24px - 20px) / var(--mo-grid-cols, 6) + 3 * var(--grid-gap, 4px));
  margin: 0 auto;
}
.modal .cart-nodata-wrap .cart-nodata .cart-nodata-txt {
  padding: 80px 0;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}
.modal .cart-nodata-wrap .divider {
  margin: 32px -12px 0;
  width: auto;
}
.modal .cart-nodata-wrap .plp-recently-viewed {
  margin-top: 40px;
  padding-top: 0;
}
.modal .cart-nodata-wrap .plp-recently-viewed {
  margin-left: -12px;
  margin-right: -12px;
}

.cart-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.cart-opt-img {
  position: relative;
  width: 100%;
}

.cart-opt-img-swiper {
  width: 100%;
}
.cart-opt-img-swiper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--ratio, 0.75);
}

.cart-opt-img .cart-opt-img-pagination {
  position: absolute;
  bottom: 16px;
  left: 0;
  z-index: 2;
  width: 100%;
}

.cart-opt-body {
  padding: 20px var(--mobile-gap, 12px);
}

.cart-opt-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-opt-title .cart-opt-name {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1px;
  color: var(--color-black, #000000);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-opt-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
}
.cart-opt-price .price-sale {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.cart-opt-price .price-origin {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.cart-opt-price .badge.sale-sandro {
  font-size: 12px;
  line-height: 18px;
}

.cart-opt-tag {
  font-size: 12px;
  line-height: 18px;
}
.cart-opt-tag.cart-opt-tag-soldout {
  color: var(--color-point, #eb58ee);
}

.cart-opt-color {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.cart-opt-color .cart-opt-color-label {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}
.cart-opt-color dl {
  display: flex;
  gap: 8px;
}
.cart-opt-color dl dd {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray400, #757575);
}

.cart-opt-size {
  display: flex;
  gap: 8px;
}
.cart-opt-size .stepper {
  flex: 0 0 111px;
}

.cart-opt-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.coupon-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.coupon-cart-row .select-box {
  flex: 1;
  min-width: 0;
}

.coupon-cart-label {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  flex-shrink: 0;
}

.coupon-product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
  border-bottom: var(--line-width, 1px) solid var(--color-gray50, #efefef);
  padding: 16px 0;
  margin-top: 16px;
}
.coupon-product-list:not(:last-child) {
  margin-bottom: 16px;
}

.coupon-product-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.coupon-product-thumb {
  width: 120px;
  flex-shrink: 0;
  aspect-ratio: var(--ratio, 0.75);
}
.coupon-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coupon-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coupon-product-name {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coupon-max-chk {
  margin-bottom: 16px;
}

.delivery-addr-list {
  display: flex;
  flex-direction: column;
}

.delivery-addr-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: var(--line-width, 1px) solid var(--color-gray300, #bbbbbb);
  padding: 24px;
  position: relative;
}
.delivery-addr-item + .delivery-addr-item {
  margin-top: -1px;
}
.delivery-addr-item.is-default {
  border-color: var(--color-black, #000000);
  z-index: 1;
}

.delivery-addr-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.delivery-addr-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.delivery-addr-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: var(--color-black, #000000);
  overflow: hidden;
}
.delivery-addr-name span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.delivery-addr-name .divider,
.delivery-addr-name span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

.delivery-addr-text {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  word-break: break-all;
}

.delivery-addr-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delivery-addr-btns {
  display: flex;
  align-items: center;
  gap: 16px;
}

.delivery-addr-nodata {
  padding: 80px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-black, #000000);
  text-align: center;
}

.delivery-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mobile-gap, 12px) 16px;
}
.delivery-list-header .list-count {
  padding: 0;
}
.delivery-list-header .delivery-register-link {
  margin-left: auto;
  font-size: 12px;
  line-height: 18px;
  text-decoration: underline;
  color: var(--color-gray600, #444444);
}

.delivery-list .list-more-wrap {
  margin-top: 0;
}

.delivery-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delivery-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: var(--line-width, 1px) solid var(--color-gray300, #bbbbbb);
  padding: 24px;
}
.delivery-card.is-default {
  border-color: var(--color-black, #000000);
}
.delivery-card::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: var(--line-width, 1px) solid var(--color-black, #000000);
  border-radius: var(--radius-full, 999px);
  background: var(--color-white, #ffffff);
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.15s;
}
.delivery-card.is-selected::before {
  background: var(--color-black, #000000);
}

.delivery-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.delivery-card-btn {
  text-align: left;
}

.delivery-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.delivery-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.delivery-card-head .badge.default {
  background-color: var(--color-black, #000000);
  color: var(--color-white, #ffffff);
}

.delivery-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: var(--color-black, #000000);
}
.delivery-card-name .divider {
  width: 1px;
  height: 12px;
  background: var(--color-gray300, #bbbbbb);
  flex-shrink: 0;
}

.delivery-card-addr {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  word-break: break-all;
}

.delivery-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delivery-card-btns {
  display: flex;
  align-items: center;
  gap: 16px;
}

.delivery-text-link {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
  text-decoration: underline;
}

.delivery-nodata {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--mobile-gap, 12px);
}

.delivery-nodata-msg {
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.delivery-info-modal .btn-section {
  margin-top: 40px;
}
.delivery-info-modal .btn-section .btn-group {
  display: flex;
  gap: 8px;
}
.delivery-info-modal .btn-section .btn-group .btn {
  flex: 1;
}

.order-dragbar {
  background: var(--color-white, #ffffff);
  border-top: var(--line-width, 1px) solid var(--color-gray50, #efefef);
}

main > .order-dragbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-modal, 300);
  min-height: calc(100px + var(--safe-bottom));
}

.order-dragbar-drag {
  display: block;
  width: 100%;
  height: 36px;
  background: var(--color-white, #ffffff);
  touch-action: none;
  text-align: left;
}
.order-dragbar-drag .order-drag-bar {
  display: flex;
  justify-content: center;
  padding: 0 0;
}

.order-drag-indicator {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-sm, 3px);
  background-color: var(--color-gray50, #efefef);
}

.cart-summary-detail {
  padding: 12px var(--mobile-gap, 12px) 16px;
}

.cart-summary-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding-bottom: 16px;
}

.cart-price-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cart-price-row .cart-price-label {
  min-width: 56px;
}
.cart-price-row .cart-price-label,
.cart-price-row .cart-price-value {
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
}

.cart-discount-sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-price-row-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-price-row-sub .cart-price-label,
.cart-price-row-sub .cart-price-value {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-gray600, #444444);
}

.cart-price-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px var(--mobile-gap, 12px);
}
.cart-price-total .cart-price-label {
  min-width: 88px;
}
.cart-price-total .cart-price-label,
.cart-price-total .cart-price-value {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  word-break: break-all;
}
.cart-price-total .cart-price-value {
  text-align: right;
}

.cart-cta {
  padding: 0 var(--mobile-gap, 12px);
  margin: 0 0 12px;
}
[data-dragbar].order-dragbar .cart-cta {
  margin: 0;
  padding: 16px var(--mobile-gap, 12px);
  min-height: calc(70px + var(--safe-bottom));
}

.cart-links {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 0 8px;
  gap: 6px;
}

.cart-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  flex: 1;
  gap: 4px;
  justify-content: center;
}

.cart-link-ico {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.cart-link-label {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
}

.order-dragbar.is-drag-collapsed .cart-summary-detail {
  display: none;
}

main:has(.order-dragbar[data-dragbar])::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 299;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
main:has(.order-dragbar[data-dragbar]):has(.order-dragbar[data-dragbar]:not(.is-drag-collapsed))::before {
  opacity: 1;
  pointer-events: auto;
}

.store-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.store-detail-map {
  margin-top: 32px;
  background: var(--color-gray30, #f6f6f6);
}
.store-detail-map img {
  width: 100%;
  object-fit: cover;
}

.inp-search-wrap {
  display: flex;
  align-items: center;
  height: 38px;
  border: var(--line-width, 1px) solid var(--color-gray500, #666666);
  border-radius: var(--radius-md, 5px);
  padding: 0 0 0 13px;
  transition: border-color 0.2s;
}
.inp-search-wrap:focus-within, .inp-search-wrap:has(.inp-search:not(:placeholder-shown)) {
  border-color: var(--color-black, #000000);
}
.inp-search-wrap:has(.inp-search:not(:placeholder-shown)) .inp-search-clear {
  display: flex;
}

.inp-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  border: 0;
  appearance: none;
}
.inp-search::placeholder {
  color: var(--color-gray300, #bbbbbb);
}
.inp-search::-webkit-search-decoration, .inp-search::-webkit-search-cancel-button {
  display: none;
}
.inp-search:focus-visible {
  outline: none;
}

.inp-search-actions {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}

.inp-search-clear {
  display: none;
  align-items: center;
  height: 100%;
  padding: 0 4px;
}

.inp-search-btn {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 13px 0 4px;
}

.zip-addr-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.zip-addr-desc {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.zip-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: var(--line-width, 1px) solid var(--color-black, #000000);
  border-bottom: var(--line-width, 1px) solid var(--color-black, #000000);
  padding: 24px 0;
  margin-top: 40px;
}

.zip-example-row {
  display: flex;
  align-items: center;
}

.zip-example-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}

.zip-example-value {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
}

.zip-result-count {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}
.zip-result-count strong {
  font-weight: 400;
}

.zip-result-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
}
.zip-result-list + .btn-group {
  margin-top: 40px;
}

.zip-result-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: var(--line-width, 1px) solid var(--color-gray300, #bbbbbb);
  padding: 24px;
}
.zip-result-item.is-selected {
  border-color: var(--color-black, #000000);
}

.zip-result-code {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.zip-addr-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zip-addr-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.zip-addr-type {
  width: 50px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray500, #666666);
}

.zip-addr-text {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black, #000000);
  word-break: break-all;
}

.zip-result-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zip-result-btns > .btn-text {
  font-size: 12px;
  line-height: 18px;
}
.zip-result-btns > .btn-text:only-child {
  margin-left: auto;
}

.zip-more-wrap {
  margin-top: 40px;
}

.zip-nodata-msg {
  margin-top: 16px;
  padding: 80px 0;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--color-black, #000000);
}

.pickup-filter {
  display: flex;
  gap: 8px;
}

.pickup-notice-list {
  margin-top: 16px;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
}

.pickup-store-count {
  margin-top: 20px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}
.pickup-store-count + .divider {
  margin-top: 12px;
}
.pickup-store-count strong {
  font-weight: 700;
}

.pickup-store-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pickup-store-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pickup-store-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pickup-store-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pickup-store-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.pickup-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-black, #000000);
}

.pickup-store-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-black, #000000);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickup-store-addr {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  word-break: break-all;
}

.pickup-store-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pickup-meta-label {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.pickup-meta-value {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
}

.pickup-store-map {
  margin-top: 12px;
  background: var(--color-gray30, #f6f6f6);
}
.pickup-store-map img {
  width: 100%;
  aspect-ratio: 789/503;
  object-fit: cover;
}

.pickup-store-nodata {
  padding: 80px 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black, #000000);
  text-align: center;
}

.toast-popup {
  position: fixed;
  bottom: 40px;
  left: 50%;
  z-index: var(--z-toast, 1000);
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-md, 5px);
}
.toast-popup[data-toast-template] {
  display: none;
}
.toast-popup.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.toast-popup.is-hiding {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
}
[data-platform=pc] .toast-popup {
  width: 624px;
}

.toast-popup-msg {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-white, #ffffff);
  text-align: center;
}

.nodata-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}
.nodata-comp .nodata-comp-msg {
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--color-black, #000000);
}

.swiper-wrapper {
  height: auto;
}
/*# sourceMappingURL=../css.map/common.css.map */