@import "https://fonts.googleapis.com/css2?family=Prata&display=swap";
:root {
  --blue100: #10069f;
  --navy0B1: #0b132a;
  --navy122: #122f5c;
  --blue4A6: #4a6c9f;
  --blue080: #080172;
  --blue706: #706ac5;
  --blue9F9: #9f9bd8;
  --redBD0: #bd083d;
  --brownD4A: #d4a985;
  --green062: #062c25;
  --pinkA50: #a50774;
  --black000: rgba(0, 0, 0, 0.8);
  --black020: #020202;
  --black111: #111;
  --black222: #222;
  --gray666: #666;
  --gray999: #999;
  --grayBBB: #bbb;
  --grayCCC: #ccc;
  --grayDDD: #ddd;
  --grayE5E: #e5e5e5;
  --grayE0E: #e0e0e0;
  --grayF5F: #f5f5f5;
  --gray3B3: #3b3b3b;
  --whiteFFF: #fff;
  --grayEEE: #eee;
  --grayE2E: #e2e2e2;
  --grayF6F: #f6f6f6;
  --grayF9F: #f9f9f9;
  --gray000: rgba(0, 0, 0, 0.5);
  --blueE2E: #e2eaf6;
  --blueEEF: #eef2f8;
  --blue1B1: #1b11b1;
  --greenECE: #ecefef;
  --redF6E: #f6edf5;
  --bgBlack80: rgba(0, 0, 0, 0.8);
  --bgBlack50: rgba(0, 0, 0, 0.5);
  --bgBlue80: rgba(16, 6, 159, 0.8);
  --swiper-pagination-color: #000;
}

@font-face {
  font-display: swap;
  font-family: "Balaan";
  font-weight: 300;
  src: url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Light.woff2) format("woff2"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Light.woff) format("woff"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Light.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Balaan";
  font-weight: 400;
  src: url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Regular.woff2) format("woff2"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Regular.woff) format("woff"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Regular.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Balaan";
  font-weight: 500;
  src: url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Medium.woff2) format("woff2"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Medium.woff) format("woff"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Medium.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Balaan";
  font-weight: 700;
  src: url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Bold.woff2) format("woff2"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Bold.woff) format("woff"),
    url(https://i.balaan.io/balaanfront/mobile/font/SpoqaHanSansNeo-Bold.ttf) format("truetype");
}

html {
  font-size: 10px;
}

body {
  -webkit-text-size-adjust: none;
  color: var(--black020);
  font-family: Balaan, "sans-serif";
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.231;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

a,
blockquote,
body,
button,
code,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
menu,
ol,
p,
pre,
select,
td,
textarea,
th,
ul {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  font-family: Balaan, "sans-serif";
  margin: 0;
  padding: 0;
}

fieldset,
img {
  border: 0;
}

img,
picture,
video {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  max-width: 100%;
}

dl,
li,
menu,
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

button,
input,
select,
textarea {
  font-size: 100%;
  vertical-align: middle;
}

textarea {
  word-wrap: break-word;
  backface-visibility: hidden;
  word-break: keep-all;
}

button,
textarea {
  background-color: transparent;
  border: 0;
}

button {
  cursor: pointer;
}

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

html input[type="button"],
input[type="email"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0;
}

input[type="checkbox"],
input[type="radio"] {
  border-color: transparent;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

body,
button,
input,
select,
td,
textarea,
th {
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
}

body:not(body),
button:not(body),
input:not(body),
select:not(body),
td:not(body),
textarea:not(body),
th:not(body) {
  font-size: inherit;
}

h1,
h2,
h3,
strong {
  font-weight: 700;
}

a,
a:active,
a:hover {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 100%;
  margin: 0;
  outline: none;
  padding: 0;
  text-decoration: none;
  -webkit-user-select: none;
  vertical-align: baseline;
}

details,
summary {
  outline: none;
}

address,
caption,
cite,
code,
dfn,
em,
i,
var {
  font-style: normal;
  font-weight: 400;
}

hr {
  background-color: var(--grayE5E);
  border: none;
  height: 1px;
  margin: 1.2rem 0;
  padding: 0;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  img[loading="lazy"] {
    -webkit-clip-path: inset(0.6px);
    clip-path: inset(0.6px);
  }
}

@media screen and (min-width: 500px) {
  html {
    background-color: var(--grayF9F);
    font-size: 12px;
  }
}

.flex {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
}

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

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

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

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

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

.align-left {
  justify-content: start !important;
  text-align: left !important;
}

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

.bu.dot li {
  color: var(--black020);
  margin-top: 0.4rem;
  padding-left: 1rem;
  position: relative;
}

.bu.dot li:before {
  background-color: var(--black020);
  border-radius: 50%;
  content: "";
  display: block;
  height: 0.4rem;
  left: 0;
  position: absolute;
  top: 0.7rem;
  width: 0.4rem;
}

.blt {
  padding-left: 1.6rem;
  position: relative;
}

.blt:before {
  background-color: var(--gray666);
  border-radius: 50%;
  content: "";
  display: block;
  height: 0.3rem;
  left: 0;
  margin: 0 0.6rem;
  position: absolute;
  top: 0.7rem;
  width: 0.3rem;
}

.font36 {
  font-size: 3.6rem !important;
  line-height: 4.7rem;
}

.font28 {
  font-size: 2.8rem !important;
  line-height: 3.6rem;
}

.font24 {
  font-size: 2.5rem !important;
  line-height: 3.3rem;
}

.font22 {
  font-size: 2.1rem !important;
  line-height: 3rem;
}

.font18 {
  font-size: 1.9rem !important;
  line-height: 2.8rem;
}

.font16 {
  font-size: 1.6rem !important;
  line-height: 2.7rem;
}

.font14 {
  font-size: 1.4rem !important;
  line-height: 2rem;
}

.font13 {
  font-size: 1.3rem !important;
}

.font12,
.font13 {
  line-height: 1.9rem;
}

.font12 {
  font-size: 1.2rem !important;
}

.font11 {
  font-size: 1.1rem !important;
  line-height: 1.6rem;
}

.fw300 {
  font-weight: 300 !important;
}

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

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

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

.slide-up-down-enter-from,
.slide-up-down-leave-to {
  max-height: 0;
}

.slide-up-down-enter-active {
  transition: max-height 0.9s ease;
  transition-duration: var(--enterDuration, 0.9s);
}

.slide-up-down-enter-to,
.slide-up-down-leave-from {
  max-height: var(--maxHeight, 150px);
}

.slide-up-down-leave-active {
  transition: max-height 0.85s ease;
  transition-duration: var(--leaveDuration, 0.85s);
}

.slide-x-enter-from,
.slide-x-leave-to {
  left: var(--left, -100%);
}

.slide-x-enter-active {
  transition: left 0.4s ease;
}

.slide-x-enter-to,
.slide-x-leave-from {
  left: 0;
}

.slide-x-leave-active {
  transition: left 0.4s ease;
}

.fade-in-out-enter-from,
.fade-in-out-leave-to {
  opacity: 0;
}

.fade-in-out-enter-active {
  transition: opacity 0.3s ease-in;
  transition-delay: var(--delay, 0s);
}

.fade-in-out-enter-to,
.fade-in-out-leave-from {
  opacity: 1;
}

.fade-in-out-leave-active {
  transition: opacity 0.3s ease-in;
}

.text-slide-up-enter-from {
  opacity: 0;
  transform: translateY(2.3rem);
}

.text-slide-up-enter-active {
  transition: all 0.3s ease-in;
}

.text-slide-up-enter-to {
  opacity: 1;
  transform: translateY(0);
}

.transform-slide-enter-active,
.transform-slide-leave-active {
  transition: transform 0.3s ease;
}

.transform-slide-enter-from,
.transform-slide-leave-to {
  transform: translateY(100%);
}

input[type="email"].input,
input[type="number"].input,
input[type="password"].input,
input[type="tel"].input,
input[type="text"].input {
  border: 0.1rem solid var(--grayE5E);
  border-radius: 0.2rem;
  font-size: 1.4rem;
  line-height: 1.43;
  padding: 1.3rem 1.2rem;
  width: 100%;
}

input[type="email"].input:focus,
input[type="number"].input:focus,
input[type="password"].input:focus,
input[type="tel"].input:focus,
input[type="text"].input:focus {
  border-color: var(--gray666);
  color: var(--black020);
  outline: none;
}

input[type="email"].input.valid,
input[type="number"].input.valid,
input[type="password"].input.valid,
input[type="tel"].input.valid,
input[type="text"].input.valid {
  border-color: var(--grayE5E);
  color: var(--black020);
}

input[type="email"].input:-moz-read-only,
input[type="number"].input:-moz-read-only,
input[type="password"].input:-moz-read-only,
input[type="tel"].input:-moz-read-only,
input[type="text"].input:-moz-read-only {
  background-color: var(--grayF6F);
  border: 0.1rem solid var(--grayE5E);
  color: var(--gray999);
  opacity: 1;
}

input[type="email"].input:disabled,
input[type="email"].input:read-only,
input[type="number"].input:disabled,
input[type="number"].input:read-only,
input[type="password"].input:disabled,
input[type="password"].input:read-only,
input[type="tel"].input:disabled,
input[type="tel"].input:read-only,
input[type="text"].input:disabled,
input[type="text"].input:read-only {
  background-color: var(--grayF6F);
  border: 0.1rem solid var(--grayE5E);
  color: var(--gray999);
  opacity: 1;
}

.input {
  align-items: center;
  border: 0.1rem solid var(--grayE5E);
  border-radius: 0.2rem;
  display: flex;
  font-size: 1.4rem;
}

.input input[type="email"],
.input input[type="number"],
.input input[type="password"],
.input input[type="tel"],
.input input[type="text"] {
  border: 0;
  line-height: 1.43;
  padding: 1.4rem 1.2rem;
  width: 100%;
}

.input input[type="email"]:focus,
.input input[type="number"]:focus,
.input input[type="password"]:focus,
.input input[type="tel"]:focus,
.input input[type="text"]:focus {
  border-color: var(--gray020);
  outline: none;
}

.input .btn-input {
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  height: 4.4rem;
  justify-content: center;
}

.input.valid {
  border-color: var(--gray999);
  color: var(--black020);
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  background-color: var(--whiteFFF);
  -webkit-box-shadow: inset 0 0 0 30px #fff !important;
}

.form-input-wrap:not(:first-child),
.input-item:not(:first-child) {
  margin-top: 1.4rem;
}

.form-input-wrap label,
.input-item label {
  display: block;
  font-size: 1.4rem;
  line-height: 1.43;
  margin-bottom: 1rem;
}

.form-input-wrap label .required,
.input-item label .required {
  display: inline-block;
  font-size: 0;
}

.form-input-wrap label .required:before,
.input-item label .required:before {
  color: var(--redBD0);
  content: "*";
  font-size: 1.6rem;
  letter-spacing: -0.1rem;
  vertical-align: sub;
}

.form-input-wrap.invalid .form-textarea,
.form-input-wrap.invalid .input,
.form-input-wrap.invalid .select,
.input-item.invalid .form-textarea,
.input-item.invalid .input,
.input-item.invalid .select {
  border-color: var(--redBD0) !important;
}

.form-title {
  font-size: 1.6rem;
  letter-spacing: -0.1rem;
  line-height: 1.63;
}

.form-title .required {
  display: inline-block;
  font-size: 0;
}

.form-title .required:before {
  color: var(--redBD0);
  content: "*";
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.1rem;
  vertical-align: sub;
}

.alert_text,
.warning_text {
  background-position: 0;
  background-repeat: no-repeat;
  color: var(--redBD0);
  font-size: 1.2rem;
  letter-spacing: -0.1rem;
  margin-top: 1rem;
  padding-left: 2rem;
}

.warning_text {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-info-alert-20.svg);
}

.alert_text {
  background-color: var(--redF6E);
  color: var(--black000);
  line-height: 1.8rem;
  padding: 1rem 1.6rem;
}

.alert_text em,
.alert_text strong {
  color: var(--redBD0);
  font-weight: 700;
}

.input-check-item {
  align-items: flex-start;
  display: flex;
}

.input-check-item .checkbox {
  margin-right: 0.8rem;
}

.input-check-item .checkbox + label {
  letter-spacing: -0.1rem;
  line-height: 1.73;
  margin-bottom: 0;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

.checkbox,
input[type="checkbox"] {
  background-color: transparent;
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/checkbox-off.svg);
  background-position: 50%;
  background-size: 2.5rem;
  height: 2.5rem;
  padding: 0.3rem;
  width: 2.5rem;
}

.checkbox:checked,
input[type="checkbox"]:checked {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/checkbox-on.svg);
}

.checkbox:checked:disabled,
input[type="checkbox"]:checked:disabled {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/checkbox-readonly.svg);
}

.checkbox:disabled,
input[type="checkbox"]:disabled {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/checkbox-disabled.svg);
}

.radio,
input[type="radio"] {
  background-color: transparent;
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/radio-off.svg);
  height: 2.4rem;
  width: 2.4rem;
}

.radio.radio-blue:checked,
input[type="radio"].radio-blue:checked {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/radio-on-blue.svg);
}

.radio.radio-pink:checked,
input[type="radio"].radio-pink:checked {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/radio-on-pink.svg);
}

.radio.radio-navy:checked,
input[type="radio"].radio-navy:checked {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/radio-on-navy.svg);
}

.radio:checked,
input[type="radio"]:checked {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/radio-on.svg);
}

.radio:checked:disabled,
input[type="radio"]:checked:disabled {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/radio-readonly.svg);
}

.radio:disabled,
input[type="radio"]:disabled {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/radio-disabled.svg);
}

.select,
select {
  -webkit-appearance: none;
  background: var(--whiteFFF) url(https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-down-20.svg) no-repeat
    96% center;
  border: 0.1rem solid var(--grayE5E);
  border-radius: 0.2rem;
  color: var(--gray666);
  font-size: 1.4rem;
  letter-spacing: 0;
  overflow: hidden;
  padding: 1.4rem 3.5rem 1.4rem 1.6rem;
  position: relative;
  text-overflow: ellipsis;
  transition: all 0.1s linear;
  white-space: nowrap;
  width: 100%;
}

.select.valid,
select.valid {
  border-color: var(--gray999);
  color: var(--black020);
}

.select.disabled,
.select:disabled,
select.disabled,
select:disabled {
  background: var(--grayF6F) url(https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-down-darkgray-20.svg)
    no-repeat 96% center !important;
  color: var(--gray999) !important;
  opacity: 1;
}

.select.fill-arrow,
select.fill-arrow {
  background-image: url(https://i.balaan.io/balaanfront/mobile/img/common/selectbox-fill-arrow-20.svg);
}

.select:focus,
select:focus {
  outline: none;
}

.select option[value=""][disabled],
select option[value=""][disabled] {
  display: none;
}

.textarea,
textarea {
  border: 0.1rem solid var(--grayE5E);
  border-radius: 0.2rem;
  color: var(--black020);
  font-size: 1.4rem;
  padding: 1.6rem;
  resize: none;
  transition: all 0.1s linear;
  width: 100%;
}

.textarea.valid,
textarea.valid {
  border-color: var(--gray999);
}

.textarea::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--gray999);
}

.textarea::placeholder,
textarea::placeholder {
  color: var(--gray999);
}

.textarea:focus,
textarea:focus {
  outline: none;
}

.form-textarea {
  border: 0.1rem solid var(--grayE5E);
  border-radius: 0.4rem;
  height: 14.6rem;
  padding: 1.6rem 1.6rem 4rem;
  position: relative;
}

.form-textarea textarea {
  border: 0;
  height: 100%;
  padding: 0;
}

.form-textarea textarea::-moz-placeholder {
  color: var(--gray666);
}

.form-textarea textarea::placeholder {
  color: var(--gray666);
}

.form-textarea .word-count {
  bottom: 1.6rem;
  color: var(--gray999);
  font-size: 1.3rem;
  line-height: 1.38;
  position: absolute;
  right: 1.6rem;
  text-align: right;
}

.form-textarea.focus {
  border-color: var(--black222);
}

.form-textarea .count.active {
  color: var(--black222);
}

.blind-txt,
body.showLoading,
body.showPopup {
  overflow: hidden;
}

.blind-txt {
  display: block;
  font-size: 0;
  height: 0;
  left: -9999em;
  position: absolute;
  text-indent: -9999em;
  width: 0;
}

.swiper-wrap {
  margin-left: -1.9rem;
  margin-right: -1.9rem;
}

.section-divider {
  background-color: var(--grayF5F);
  height: 0.8rem;
  margin: 0;
}

.more_link {
  align-items: center;
  display: flex;
  max-width: 100%;
}

.more_link:after {
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-right-black-20.svg) no-repeat top;
  background-size: 100%;
  height: 2rem;
  margin-left: 0.4rem;
  width: 2rem;
}

.more_link.white:after,
.more_link:after {
  aspect-ratio: 1/1;
  content: "";
  display: inline-block;
  position: relative;
}

.more_link.white:after {
  background: url(https://i.balaan.io/mobile/img/icons/icon-arrow-right-white-20.png) no-repeat top;
  background-size: 100%;
  height: 1.6rem;
  margin-left: 0.5rem;
  margin-top: -3px;
  width: 1.6rem;
}

.AD-mark:after {
  border: 1px solid var(--grayF6F);
  border-radius: 0.9rem;
  color: var(--grayCCC);
  content: "AD";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  padding: 0.3rem 0.8rem;
  vertical-align: middle;
}

.AD-mark.new:after {
  align-items: center;
  background: var(--whiteFFF);
  border: 1px solid var(--grayEEE);
  border-radius: 0.8rem;
  box-sizing: border-box;
  color: var(--grayBBB);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 500;
  height: 1.6rem;
  justify-content: center;
  line-height: 1.6rem;
  padding: 0 0.5rem;
}

.ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.icon {
  align-items: center;
  display: flex;
  justify-content: center;
}

.icon.icon-sale-drop:before {
  background: url(https://i.balaan.io/mobile/img/icons/icon-label-b-20.svg) no-repeat top;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 1.4rem;
  margin-right: 0.2rem;
  width: 1.4rem;
}

.icon.icon-new:after {
  background: var(--redBD0);
  border-radius: 1.2rem;
  color: #fff;
  content: "N";
  font-size: 0.9rem;
  height: 1.4rem;
  line-height: 1.5rem;
  margin-left: 0.2rem;
  width: 1.4rem;
}

ul.slide-list {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

ul.slide-list li {
  flex: 1 0 auto;
}

.rank_status.after:after,
.rank_status.before:before {
  content: "";
  display: block;
}

.rank_status.after.equal:after,
.rank_status.before.equal:before {
  background-color: var(--gray666);
  height: 0.1rem;
  width: 1.2rem;
}

.rank_status.after.up:after,
.rank_status.before.up:before {
  border-bottom: 0.7rem solid var(--redBD0);
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  height: 0;
  width: 0;
}

.rank_status.after.down:after,
.rank_status.before.down:before {
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.7rem solid var(--gray666);
  height: 0;
  width: 0;
}

.rank_status.after.new:after,
.rank_status.before.new:before {
  color: var(--redBD0);
  content: "NEW";
  font-size: 1.2rem;
  font-weight: 700;
}

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

.fake-sticky {
  left: 50%;
  max-width: 500px;
  overflow-x: hidden;
  position: fixed !important;
  transform: translate(-50%);
  width: 100%;
  z-index: 100;
}

.fake-sticky,
.sticky {
  background-color: var(--whiteFFF);
  top: 0;
}

.sticky {
  left: 0;
  margin: 0 var(--marginX, 0);
  position: sticky;
  right: 0;
  transition-delay: var(--delay, 0s);
  width: var(--width, 100%);
  z-index: var(--zIndex, 1);
}

.web_to_app-banner {
  z-index: var(--zIndex, 10);
}

.web_to_app-banner ~ main .search-header,
.web_to_app-banner ~ main .sticky {
  top: 6rem !important;
}

.accordion-arrow {
  align-items: center;
  display: flex;
}

.accordion-arrow:after {
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-up-20.svg) no-repeat 50%;
  background-size: cover;
  content: "";
  height: 2rem;
  margin-left: 0.6rem;
  transform: rotate(-180deg);
  transition: transform 0.3s ease-in-out;
  width: 2rem;
}

.accordion-arrow.active:after {
  transform: rotate(0);
}

details > summary {
  align-items: center;
  display: flex;
  list-style: none;
  position: relative;
}

details > summary:after {
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-up-20.svg) no-repeat 50%;
  background-size: cover;
  content: "";
  display: block;
  height: 2rem;
  margin-left: 0.6rem;
  transform: rotate(-180deg);
  transition: transform 0.3s ease-in-out;
  width: 2rem;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] summary:after {
  transform: rotate(0);
}

.show {
  display: block !important;
}

.hide {
  display: none !important;
}

.invisible {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.appear {
  opacity: 1;
  visibility: visible;
  z-index: 100;
}

.disappear {
  opacity: 0;
  z-index: -1;
}

.copy {
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-copy-24.svg) 0 no-repeat;
  background-size: 2.4rem;
  display: inline-block;
  height: 2.4rem;
  margin-right: 1.4rem;
  width: 2.4rem;
}

.tooltip {
  background-color: #10069fd9;
  border-radius: 0.4rem;
  color: #fff;
  font-size: 1.3rem;
  left: 0;
  padding: 1.1rem 1.2rem;
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  z-index: 10;
}

.tooltip:after {
  border: 0.7rem solid transparent;
  content: "";
  left: 2.3rem;
  opacity: 0.85;
  position: absolute;
}

.tooltip.bottom {
  top: calc(100% + 1.2rem);
}

.tooltip.bottom:after {
  border-bottom: 0.9rem solid var(--blue100);
  top: -1.6rem;
}

.tooltip.top {
  bottom: calc(100% + 1.2rem);
}

.tooltip.top:after {
  border-top: 0.9rem solid var(--blue100);
  bottom: -1.6rem;
}

.layer-toast {
  align-items: center;
  background: var(--bgBlue80);
  border-radius: 0.4rem;
  color: var(--whiteFFF);
  display: flex;
  font-size: 1.4rem;
  justify-content: space-between;
  letter-spacing: -0.1rem;
  opacity: 0;
  padding: 1.1rem 1.2rem;
  position: absolute;
  transition: opacity 0.3s ease-in;
  visibility: hidden;
  z-index: -1;
}

.layer-toast .link {
  color: var(--blue9F9);
}

.layer-toast.full {
  background: var(--black000);
  left: 50% !important;
  margin-left: -45.2%;
  padding: 1.6rem;
  width: 90.4%;
}

.layer-toast:before {
  border: 0.5rem solid transparent;
  content: "";
  display: block;
  left: 1.8rem;
  position: absolute;
}

.layer-toast.up:before {
  border-bottom: 0.6rem solid var(--bgBlue80);
  top: -1.1rem;
}

.layer-toast.down:before {
  border-top: 0.6rem solid var(--bgBlue80);
  bottom: -1.1rem;
}

.layer-toast .btn-close {
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-close-24.svg) no-repeat;
  background-size: 100%;
  height: 2rem;
  margin-left: 0.5rem;
  width: 2rem;
}

ul.dot,
ul.dot li {
  list-style: none;
}

ul.dot li {
  padding-left: 1rem;
  position: relative;
}

ul.dot li:before {
  background-color: var(--black020);
  border-radius: 50%;
  content: "";
  display: block;
  height: 0.4rem;
  left: 0;
  position: absolute;
  top: 0.6rem;
  width: 0.4rem;
}

#ch-plugin #ch-plugin-core > div:last-child {
  bottom: 1.2rem !important;
  right: 2.3rem !important;
}

#ch-plugin #ch-plugin-core [data-ch-testid="launcher"] {
  z-index: 10 !important;
}

#ch-plugin #ch-plugin-core #ch-plugin-launcher {
  height: 4.9rem !important;
  transition: 0.2s;
  width: 4.9rem !important;
}

#ch-plugin #ch-plugin-core #ch-plugin-launcher > img {
  height: 100% !important;
}

.scroll-hidden {
  -ms-overflow-style: none;
}

.scroll-hidden::-webkit-scrollbar {
  display: none;
}

.pickup-banner {
  background-color: var(--blue100);
  height: 4.3rem;
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}

.pickup-banner a {
  align-items: center;
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-right-20.svg) no-repeat right 1.9rem
    center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  padding: 0 5.3rem 0 1.9rem;
  width: 100%;
}

.pickup-banner a img {
  display: inline-block;
  margin-right: 1.2rem;
}

.pickup-banner a p {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 1.4rem;
  letter-spacing: -0.1rem;
}

.pickup-banner a p .user_name {
  max-width: 10rem;
}

.left-aside {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: calc(50% - 297px);
  position: fixed;
  top: 50%;
  transform: translate(-100%, -50%);
}

.left-aside .qr-code {
  width: 21.667rem;
}

.left-aside .chat-bot {
  width: 23rem;
}

@media screen and (max-width: 500px) {
  .left-aside {
    display: none;
  }
}

.balaan-main-wrap {
  background: var(--whiteFFF);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 5.5rem);
}

.balaan-main-wrap:has(.bottom-nav) {
  min-height: calc(100vh - 11rem - 1px);
  padding-bottom: calc(5.5rem - 1px);
}

.balaan-main-wrap.safe-area {
  padding: 5.5rem 0 calc(env(safe-area-inset-bottom) + 5.5rem);
}

@media screen and (min-width: 500px) {
  .balaan-main-wrap {
    box-shadow: 0 0.4rem 0.6rem var(--grayE2E);
    margin: 0 auto;
    overflow-x: hidden;
    position: relative;
    width: 500px;
  }
}

.page-util-area {
  bottom: 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: fixed;
  right: 1.9rem;
  width: 4.2rem;
  z-index: 80;
}

@media screen and (min-width: 500px) {
  .page-util-area {
    right: calc(50% - 250px + 1.9rem);
  }
}

.popup-area {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 899;
}

.popup-area .popup_wrapper {
  align-items: center;
  bottom: 0;
  display: none;
  left: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.popup-area .popup_wrapper.isShow {
  align-items: var(--alignItems, center);
  display: flex;
  overflow-y: auto;
}

.popup-area .popup_wrapper.isShow:last-child {
  background-color: #00000080;
}

.popup-area .popup_wrapper.overflow-hidden {
  overflow-y: hidden;
}

@media screen and (min-width: 500px) {
  .popup-area .popup_wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
  }

  .popup-area .popup_wrapper .popup.full .head_span-wrap {
    margin-left: auto;
    margin-right: auto;
    right: 0;
    width: 500px;
  }
}

.popup-area .popup {
  background-color: var(--whiteFFF);
  border-radius: 0.4rem;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

.popup-area .popup.full {
  background-color: var(--whiteFFF);
  border-radius: 0;
  height: 100%;
  left: 0;
  overflow: auto;
  overflow-y: auto;
  padding-top: 5.5rem;
  position: fixed;
  top: 0;
  width: 100%;
}

.popup-area .popup.full .head_span-wrap {
  align-items: center;
  background-color: var(--whiteFFF);
  border-bottom: 0;
  display: flex;
  height: 5.5rem;
  justify-content: center;
  left: 0;
  padding: 0.8rem 1.2rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

.popup-area .popup.full .head_span-wrap h4 {
  color: var(--black020);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.6rem;
  padding-left: 0;
  text-align: center;
}

.popup-area .popup.full .head_span-wrap .btn-close {
  height: 3.9rem;
  padding: 0.8rem;
  position: absolute;
  right: 1.2rem;
  top: 0.8rem;
  width: 3.9rem;
}

.popup-area .popup:not(.full) .head_span-wrap {
  background-color: var(--whiteFFF);
  border-bottom: 0.1rem solid var(--grayE5E);
  display: block;
  padding: 1.7rem 2rem;
  position: relative;
}

.popup-area .popup:not(.full) .head_span-wrap h4 {
  color: var(--black020);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.6rem;
}

.popup-area .popup:not(.full) .head_span-wrap .btn-close {
  box-sizing: content-box;
  height: 2rem;
  padding: 1.7rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
}

.popup-area .popup .content-wrap {
  background-color: var(--whiteFFF);
  color: var(--black222);
  font-size: 1.4rem;
  letter-spacing: -0.1rem;
  line-height: 1.57;
  padding: 1.6rem;
}

.toast {
  align-items: center;
  background-color: var(--black000);
  border-radius: 0.4rem;
  bottom: calc(3.5rem + var(--offsetBottom, 0rem));
  display: flex;
  justify-content: var(--justifyContent, center);
  left: 0;
  margin: 0 1.9rem;
  padding: 1.6rem;
  position: fixed;
  right: 0;
  z-index: 899;
}

.toast .toast-text {
  align-items: center;
  color: #fff;
  text-align: center;
}

.toast .toast-text {
  font-size: 1.4rem;
  letter-spacing: -0.1rem;
}

.toast a {
  color: var(--blue9F9);
}

@media screen and (min-width: 500px) {
  .toast {
    margin-left: auto;
    margin-right: auto;
    width: 450px;
  }
}

.page-products-productNo ~ .toast {
  bottom: 8.2rem !important;
}

.box-button.color-black.style-solid {
  background-color: var(--black020);
  color: var(--whiteFFF);
}

.box-button.color-black.style-solid:disabled {
  background-color: var(--grayDDD);
  color: var(--whiteFFF) !important;
}

.box-button.color-black.style-outlined {
  background-color: var(--whiteFFF);
  border: 0.1rem solid var(--black020);
  color: var(--black020);
}

.box-button.color-black.style-outlined:disabled {
  border-color: var(--grayDDD);
  color: var(--grayDDD) !important;
}

.box-button.color-gray.style-solid {
  background-color: var(--grayDDD);
  color: var(--whiteFFF);
}

.box-button.color-gray.style-solid:disabled {
  background-color: var(--grayDDD);
  color: var(--whiteFFF) !important;
}

.box-button.color-gray.style-outlined {
  background-color: var(--whiteFFF);
  border: 0.1rem solid var(--grayDDD);
  color: var(--black020);
}

.box-button.color-gray.style-outlined:disabled {
  border-color: var(--grayDDD);
  color: var(--grayDDD) !important;
}

.box-button.color-blue.style-solid {
  background-color: var(--blue100);
  color: var(--whiteFFF);
}

.box-button.color-blue.style-solid:disabled {
  background-color: var(--grayDDD);
  color: var(--whiteFFF) !important;
}

.box-button.color-blue.style-outlined {
  background-color: var(--whiteFFF);
  border: 0.1rem solid var(--blue100);
  color: var(--blue100);
}

.box-button.color-blue.style-outlined:disabled {
  border-color: var(--grayDDD);
  color: var(--grayDDD) !important;
}

.box-button.size-large {
  height: 5.2rem;
  padding: 1.4rem 1.6rem;
}

.box-button.size-large {
  color: var(--black020);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  width: 100%;
}

.box-button.size-medium-large {
  height: 4.8rem;
  padding: 1.2rem 1.6rem;
}

.box-button.size-medium {
  color: var(--black020);
  font-size: 1.5rem;
  font-weight: 700;
  height: 4.4rem;
  line-height: 2rem;
  line-height: 2.2rem;
  padding: 1.2rem 1.6rem;
  width: 100%;
}

.box-button.size-medium-small {
  color: var(--black020);
  font-size: 1.4rem;
  font-weight: 500;
  height: 4rem;
  line-height: 2rem;
  padding: 1rem 1.6rem;
  width: 100%;
}

.box-button.size-small {
  color: var(--black020);
  font-size: 1.3rem;
  font-weight: 400;
  height: 3.2rem;
  line-height: 2rem;
  line-height: 1.8rem;
  padding: 0.6rem 0.8rem;
  width: auto;
}

.box-button {
  border-radius: 0.4rem;
  box-sizing: border-box;
}

.box-button.with-icon {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  justify-content: center;
}

.outside {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.confirm {
  word-wrap: break-word;
  background-color: #fff;
  border-radius: 0.8rem;
  display: grid;
  margin: 0 2.4rem;
  max-width: calc(100% - 4.8rem);
  position: relative;
  width: 100%;
}

.confirm .confirm-title {
  border-bottom: 0.1rem solid var(--grayE5E);
  color: var(--black020);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  padding: 1.6rem;
  width: 100%;
}

.confirm .confirm-content {
  padding: 2.4rem 1.6rem 1.6rem;
}

.confirm .confirm-content p {
  color: var(--black020);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
  text-align: center;
}

.confirm .confirm-content em.sub-content {
  color: var(--gray666);
  display: flex;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  justify-content: center;
  line-height: 1.6rem;
  margin-top: 1.6rem;
}

.confirm .confirm-content .sub-title {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  margin-bottom: 0.8rem;
}

.confirm .btn-group {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 2.4rem;
}

@media screen and (min-width: 500px) {
  .confirm {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
  }
}

.product-item {
  max-width: 23.5rem;
  position: relative;
}

.product-item > a {
  cursor: pointer;
  text-decoration: none;
}

.product-item > .click-area {
  cursor: pointer;
}

.product-image-wrap {
  position: relative;
}

.product-util {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.product-util .btn-wish {
  display: flex;
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  z-index: 1;
}

.product-util .btn-quick_view {
  bottom: 0.8rem;
  display: flex;
  padding: 0;
  position: absolute;
  right: 0.8rem;
  z-index: 1;
}

.product-badge {
  margin-top: 0.8rem;
}

.product-soldout {
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-soldout-16.svg) 0 no-repeat;
  color: var(--redBD0);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  line-height: 1.54;
  margin-top: 1.3rem;
  padding-left: 1.8rem;
}

.product-list-wrap {
  display: grid;
  gap: 2.4rem 0.5rem;
  grid-template-columns: repeat(2, 1fr);
  padding: 0 1.6rem 2.3rem;
  width: 100%;
}

.product-list-wrap .item {
  min-width: 0;
}

.product-image {
  height: auto;
  padding: 0.8rem;
  position: relative;
  width: 100%;
}

.product-image:after {
  background: rgba(0, 0, 0, 0.03);
  content: "";
  display: flex;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.product-image img {
  aspect-ratio: 3/4;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

.image-meta {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.image-meta .AD-mark.new {
  bottom: 0.8rem;
  left: 0.8rem;
  position: absolute;
}

.image-meta .rank-badge {
  align-items: center;
  background: var(--black020);
  bottom: 0;
  color: var(--whiteFFF);
  display: flex;
  font-size: 1.2rem;
  font-weight: 500;
  height: 2.4rem;
  justify-content: center;
  left: 0;
  line-height: 1.6rem;
  position: absolute;
  width: 2.4rem;
}

.image-meta .rank-badge.one {
  background-color: var(--blue100);
  color: var(--whiteFFF);
}

.product-info {
  margin-top: 1.2rem;
  padding-right: 0.8rem;
}

.product-info p {
  display: block;
}

.product-info .product-brand {
  color: var(--black020);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 2rem;
}

.product-info .product-name {
  color: var(--gray666);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2rem;
}

.product-info .price-wrap {
  align-items: center;
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 400;
  gap: 0.3rem;
  line-height: 2rem;
  margin-top: 0.2rem;
  width: 100%;
}

.product-info .price-wrap .price {
  color: var(--black020);
}

.product-info .price-wrap .price em,
.product-info .price-wrap .sale_percent {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
}

.product-info .price-wrap .sale_percent {
  color: var(--redBD0);
}

.product-info .consumer_price {
  color: var(--grayBBB);
  flex-shrink: 1;
  font-size: 1.2rem;
  line-height: 1.8rem;
  overflow: hidden;
  text-decoration: line-through;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.product-info .soldOut * {
  color: var(--grayBBB) !important;
}

.btn-wish,
.btn-wish svg {
  height: 2.4rem;
  width: 2.4rem;
}

.btn-wish svg {
  fill: var(--grayE5E);
}

.btn-wish.active svg {
  fill: var(--redBD0);
}

.btn-wish.active.clicked {
  animation: likeActive-366dab20 0.2s ease-out;
}

@keyframes likeActive-366dab20 {
  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.2);
  }

  to {
    transform: scale(1);
  }
}

.footer {
  border-top: 0.1rem solid var(--grayE5E);
  margin-top: auto;
}

.footer.safe-bottom-padding {
  padding-bottom: calc(env(safe-area-inset-bottom) + 5.9rem);
}

.footer .footer-menu {
  background: var(--whiteFFF);
  font-size: 1.3rem;
  line-height: 1.9rem;
}

.footer .footer-menu ul {
  display: flex;
  padding: 0 1.9rem;
}

.footer .footer-menu ul > li {
  flex: 1 0 auto;
}

.footer .footer-menu ul > li a {
  color: var(--gray666);
  display: block;
  margin: 0.8rem 0;
  padding: 0.9rem 0;
  text-align: center;
}

.footer .footer-info {
  background-color: var(--grayF6F);
  font-size: 1.1rem;
  line-height: 1.6rem;
  padding: 1.99em 1.8rem 2rem;
}

.footer .footer-info .btn-term-info {
  background: var(--blue080);
  border-radius: 0.4rem;
  color: var(--whiteFFF);
  display: block;
  font-size: 1.4rem;
  padding: 1.6rem 1.4rem;
  position: relative;
}

.footer .footer-info .btn-term-info:after {
  background: url(https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-right-20.svg) no-repeat;
  background-size: 100%;
  content: "";
  height: 2.4rem;
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
  width: 2.4rem;
}

.footer .footer-info ul.info-sns {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2rem;
}

.footer .footer-info ul.info-sns li {
  width: 2.4rem;
}

.footer .footer-info ul.info-sns li:not(:first-child) {
  margin-left: 1.4rem;
}

.footer .footer-info ul.info-sns li a {
  display: block;
  line-height: 0;
}

.footer .footer-info ul.info-sns li img {
  aspect-ratio: 1/1;
  width: 100%;
}

.footer .footer-info .info-company .info-tit {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.2rem;
  position: relative;
  width: 100%;
}

.footer .footer-info .info-company .info-tit strong {
  color: var(--black222);
  display: block;
  font-size: 1.3rem;
  letter-spacing: -0.1rem;
  line-height: 1.54;
}

.footer .footer-info .info-company .info-tit:after {
  background: url(https://i.balaan.io/mobile/img/icons/icon-arrow-up-20.svg) 50% no-repeat;
  background-size: cover;
  content: "";
  display: block;
  height: 1.6rem;
  margin-left: 1.2rem;
  transform: rotate(180deg);
  width: 1.6rem;
}

.footer .footer-info .info-company .info-cont {
  color: var(--gray666);
  font-size: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  position: relative;
}

.footer .footer-info .info-company .info-cont li {
  letter-spacing: 0;
  margin-top: 0.2rem;
}

.footer .footer-info .info-company .info-cont li:first-child {
  margin-top: 0;
}

.footer .footer-info .info-company .info-cont li address {
  display: inline-block;
}

.footer .footer-info .info-company .info-cont li .link-company {
  color: var(--black222);
  display: inline-block;
  font-weight: 500;
  margin-left: 0.6rem;
}

.footer .footer-info .info-company .info-cont .service-tit {
  display: block;
  font-size: 1.1rem;
  line-height: 1.54;
  margin-bottom: 0.2rem;
  margin-top: 1.2rem;
}

.footer .footer-info .info-company .info-cont .link-send-mail {
  color: var(--gray666);
  display: inline-block;
}

.footer .footer-info .info-company.active .info-tit:after {
  transform: rotate(0);
}

.footer .footer-info .info-company.active .info-cont {
  font-size: 1.1rem;
  height: 100%;
  line-height: 1.45;
  padding-bottom: 1.2rem;
}

.footer .footer-info .info-balaan {
  border-top: 0.1rem solid var(--grayE5E);
  padding-top: 1.2rem;
}

.footer .footer-info .info-balaan .link-private {
  color: var(--black222);
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  margin-bottom: 1.2rem;
}

.footer .footer-info .info-balaan .copyright {
  color: var(--gray999);
  font-size: 1.1rem;
  line-height: 1.45;
  text-align: left;
}

.badge-box {
  align-items: center;
  background: var(--whiteFFF);
  border: 1px solid var(--grayE5E);
  border-radius: 0.2rem;
  box-sizing: border-box;
  color: var(--gray3B3);
  display: flex;
  font-size: 1.1rem;
  font-weight: 400;
  gap: 0.8rem;
  height: 2rem;
  justify-content: center;
  padding: 0.3rem 0.5rem;
  text-align: center;
}

.badge-box img,
.badge-box svg {
  height: 1.2rem;
}

.badge-box.blue {
  background: var(--blueEEF);
  border: 0;
  color: var(--blue100);
}

.badge-box.gray {
  background: var(--grayBBB);
  border: 0;
  color: var(--whiteFFF);
}

.badge-box.label {
  background: transparent;
  border: 0;
  padding-bottom: 0;
  padding-top: 0;
}

.badge-box.label img,
.badge-box.label svg {
  height: 1.4rem;
}

div.product_badge {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-start;
  text-align: left;
}

div.product_badge img {
  flex: 0 1 auto;
  height: 2rem;
  width: auto;
}

div.product_badge img.badge {
  height: 2.2rem;
  width: auto;
}

div.product_badge img.badge.lowest-price {
  aspect-ratio: 25/11;
}

div.product_badge img.badge.today-pick {
  aspect-ratio: 30/11;
}

div.product_badge img.badge.store-pickup {
  aspect-ratio: 63/22;
}

div.product_badge .badge-wrap {
  align-items: center;
  display: flex;
}

div.product_badge .badge-wrap img {
  height: 1.8rem;
  margin-right: 0.4rem;
}

div.product_badge .badge-wrap span {
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6rem;
}

div.product_badge .badge-type {
  background-color: var(--grayF6F);
  font-size: 0;
  padding: 0 0.5rem 0 0.4rem;
}

div.product_badge .badge-type img {
  aspect-ratio: 20/21;
  display: block;
  margin-right: 0.6rem;
}

div.product_badge .badge-type img.abroad {
  height: 1.4rem;
  margin-right: 0.3rem;
}

div.product_badge .badge-type .txt {
  color: var(--black020);
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.1rem;
  padding-bottom: 0.4rem;
  padding-top: 0.5rem;
}

.banner-info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.9rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
  color: #020202;
}

.banner-info .tit {
  font-size: 1.6rem;
  font-weight: 700;
  text-overflow: ellipsis;
}

.banner-info .desc {
  margin-top: 0.4rem;
  font-size: 1.3rem;
  text-overflow: ellipsis;
}

.swiper .pagination {
  height: 1.4rem;
  z-index: 1;
}

.swiper .pagination .swiper-pagination-bullet {
  background-color: var(--grayCCC);
  opacity: 1;
}

.swiper .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--black020);
}

.swiper .swiper-pagination-bullets {
  text-align: center;
}

.swiper .swiper-pagination-fraction {
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1.2rem;
  display: flex;
  height: auto;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  width: -moz-fit-content;
  width: fit-content;
}

.swiper .swiper-pagination-fraction > span {
  color: #fff;
  display: inline-block;
  font-size: 1.2rem;
}

.swiper .swiper-pagination-fraction .swiper-pagination-current {
  font-weight: 700;
}

.swiper .swiper-pagination-fraction .bar {
  background-color: var(--grayE5E);
  height: 0.9rem;
  margin: 0 0.4rem;
  width: 1px;
}

.swiper .swiper-scrollbar {
  background: #fff;
  border-radius: 10px;
  height: 3px;
}

.swiper .swiper-scrollbar .swiper-scrollbar-drag {
  background-color: var(--black000);
}

.swiper-banner-mini {
  background-color: #fff;
  min-height: var(--height, 8rem);
  padding: 0 var(--space, 1.9rem);
}

.swiper-banner-mini .pagination {
  bottom: var(--bottom, 0.8rem);
  left: auto;
  position: absolute;
  right: calc(var(--right, 0.8rem) + var(--space, 1.9rem));
}

.slide {
  position: relative;
}

.slide:not(:last-child) {
  margin-right: var(--space, 1.9rem);
}

.slide img {
  border-radius: var(--borderRadius, 0.5rem);
  display: block;
  height: 100%;
  width: 100%;
}

.slide .banner-info {
  bottom: 0;
  color: var(--black020);
  display: flex;
  flex-flow: column;
  justify-content: center;
  left: 0;
  padding: 1.9rem;
  position: absolute;
  right: 0;
  top: 0;
}

.slide .banner-info .tit {
  font-size: 1.6rem;
  font-weight: 700;
  text-overflow: ellipsis;
}

.slide .banner-info .desc {
  font-size: 1.3rem;
  margin-top: 0.4rem;
  text-overflow: ellipsis;
}

header {
  align-items: center;
  background-color: var(--whiteFFF);
  box-sizing: border-box;
  display: flex;
  height: 5.5rem;
  max-width: 500px;
  position: relative;
  width: 100%;
}

.header {
  justify-content: space-between;
  left: 50%;
  position: fixed;
  top: 0;
  transform: translate(-50%);
  z-index: 100;
}

.header-btn-wrap {
  background-color: var(--whiteFFF);
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding: 0 1.2rem;
  position: relative;
  width: 100%;
  z-index: 10;
}

.header-btn-wrap .left,
.header-btn-wrap .right {
  align-items: center;
  display: flex;
}

.header-btn-wrap a,
.header-btn-wrap button {
  align-items: center;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 2.4rem;
  display: flex;
  height: 4rem;
  justify-content: center;
  position: relative;
  width: 4rem;
}

.btn-back,
.btn-home {
  background-image: var(--background-image-url);
}

.head_span {
  justify-content: center;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translate(-50%);
  z-index: 20;
}

.head_span,
.head_span button {
  align-items: center;
  display: flex;
  height: 100%;
}

.head_span button {
  cursor: pointer;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  gap: 0.4rem;
  line-height: 2.6rem;
}

.head_span button svg {
  height: 1.6rem;
  transition: all 0.3s;
  width: 1.6rem;
}