@charset "UTF-8";

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

html,
body {
  height: 100%;
  font-family: "Noto Sans KR", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #111;
  text-size-adjust: none;
  box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box;
}

address,
article,
aside,
canvas,
details,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block\9 ;
  margin: 0\9 ;
  padding: 0\9 ;
}

hr {
  display: none;
}

caption {
  overflow: hidden;
  height: 0;
  font-size: 0;
  line-height: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

img {
  max-width: 100%;
  border: none;
  vertical-align: middle;
}

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

table {
  table-layout: fixed;
  width: 100%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 0;
  word-break: break-all;
  white-space: normal;
}

th {
  font-weight: normal;
}

fieldset {
  width: 100%;
  border: 0;
}

legend {
  display: none;
}

frameset {
  border: 0;
}

iframe {
  width: 100%;
  border: 0;
}

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

button,
a,
input,
label,
textarea {
  font-family: "Noto Sans KR", serif;
  vertical-align: middle;
}

input {
  height: 2.8125rem;
  padding: 0 1rem;
  border: 1px solid #eef0f4;
  background-color: #eef0f4;
  color: #333;
  font-weight: 400;
  border-radius: 0.25rem;
}

textarea {
  padding: 1rem;
  border: 1px solid #dadbdd;
  color: #222;
  font-weight: 400;
}

input:focus {
  border: 1px solid #858585;
  background-color: #fff;
}

input[readonly] {
  background-color: #e4e6e9;
}

input:disabled {
  background-color: #e4e6e9;
  color: #b9b9b9;
}

select {
  height: 2.8125rem;
  padding: 0 0 0 1rem;
  border: 1px solid #dadbdd;
  font-size: 0.8125rem;
  color: #222;
  font-weight: 400;
  vertical-align: middle;
}

select option {
  color: #999;
}

button {
  overflow: visible;
  outline: none;
  font-weight: 500;
  background: none;
  cursor: pointer;
  border: 0;
}

button::-moz-focus-inner {
  padding: 0;
}

::-ms-clear {
  display: none !important;
  width: 0;
  height: 0;
}

::-ms-reveal {
  display: none;
}

a {
  text-decoration: none;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;

  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
          backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
          margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
          margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

/* Slide styles start */

/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgb(0 0 0 / 15%);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
          animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Slide styles end */
.layer-wrap {
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f4f9;
}

.layer-wrap .layer-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 3.75rem;
  padding: 0 0.625rem;
  background-color: #fff;
  border-bottom: 1px solid #c8c8c8;
}

.layer-wrap .layer-header .header-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000;
}

.layer-wrap .layer-header .btn-back {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
}

.layer-wrap .layer-header .btn-back::before {
  position: absolute;
  top: 30%;
  left: 40%;
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-top: 0.125rem solid #000;
  border-right: 0.125rem solid #000;
  transform: rotate(225deg);
}

.layer-wrap .layer-header .btn-back em {
  display: block;
  text-indent: -9999em;
}

.layer-wrap .layer-header .btn-close {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  width: 1.625rem;
  height: 1.625rem;
  background: url("../images/ico_close.png") no-repeat center/100% auto;
}

.layer-wrap .layer-header .btn-close em {
  display: block;
  text-indent: -9999em;
}

.layer-wrap .layer-container {
  padding: 3.75rem 0 0;
}

.layer-wrap .layer-container .layer-content-header {
  padding: 1rem;
  border-radius: 0 0 1.875rem 1.875rem;
  background-color: #fff;
}

.layer-wrap .layer-container .layer-content-header .point-area {
  position: relative;
  height: 8.125rem;
  padding: 0 1.25rem;
  background: url("../images/ico_point.png") no-repeat 95% 50%/4.5rem auto;
}

.layer-wrap .layer-container .layer-content-header .point-area dt {
  font-size: 1.125rem;
  font-weight: 500;
  color: #000;
}

.layer-wrap .layer-container .layer-content-header .point-area dt span {
  margin-left: 0.25rem;
  font-size: 0.625rem;
  color: #6b6b6b;
  font-weight: 400;
}

.layer-wrap .layer-container .layer-content-header .point-area dd {
  font-size: 1.625rem;
  font-weight: 500;
  color: #000;
  letter-spacing: -0.04rem;
}

.layer-wrap .layer-container .layer-content-header .point-area dd strong {
  font-size: 2rem;
  font-weight: 700;
}

.layer-wrap .layer-container .layer-content-header .point-area .btn-useage {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 0;
  right: 1.25rem;
}

.layer-wrap .layer-container .layer-content-header .point-area .btn-useage em {
  display: block;
  color: #666;
  font-size: 0.875rem;
  font-weight: 400;
  border-bottom: 1px solid #666;
}

.layer-wrap .layer-container .layer-content-header .point-area .btn-useage::before {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
  background: url("../images/ico_info.png") no-repeat center/100% auto;
}

.layer-wrap .layer-container .layer-content-header .btn-txt-arr {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #6b6b6b;
  color: #6b6b6b;
  font-size: 0.625rem;
  font-weight: 400;
}

.layer-wrap .layer-container .layer-content-header .btn-txt-arr::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.25rem;
  background: url("../images/ico_arrow_r2.png") no-repeat center/100% auto;
}

.layer-wrap .layer-container .layer-content-header .btn-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.layer-wrap .layer-container .layer-content-header .btn-area > * {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.75rem;
  padding: 0.875rem;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  border-radius: 1rem;
  text-align: left;
}

.layer-wrap .layer-container .layer-content-header .btn-area .btn-discount {
  position: relative;
  background-color: #e30084;
}

.layer-wrap .layer-container .layer-content-header .btn-area .btn-discount .btn-switch {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-right: 0.875rem;
  cursor: pointer;
}

.layer-wrap .layer-container .layer-content-header .btn-area .btn-point-use {
  background-color: #1e1a3a;
}

.layer-wrap .layer-container .layer-content-header .btn-area .btn-point-use::after {
  content: "";
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  background: url("../images/ico_arrow_r.png") no-repeat center/100% auto;
}

.layer-wrap .layer-container .layer-content {
  padding: 1.375rem 1rem 1rem;
}

.layer-wrap .layer-container .layer-content .category-area {
  overflow: hidden;
  position: relative;
  padding-right: 2.75rem;
  margin-bottom: 1rem;
}

.layer-wrap .layer-container .layer-content .category-area::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 3.875rem;
  height: 100%;
  background: rgb(243 244 249);
  background: linear-gradient(90deg, rgb(243 244 249 / 0%) 0%, rgb(243 244 249) 40%);
}

.layer-wrap .layer-container .layer-content .category-area .btn-cate {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 1rem;
  color: #7a7d87;
  font-weight: 400;
  background-color: #e4e7ee;
  border-radius: 1.125rem;
}

.layer-wrap .layer-container .layer-content .category-area .btn-cate.active {
  color: #fff;
  background-color: #1e1a3a;
}

.layer-wrap .layer-container .layer-content .category-area .btn-more {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  transform: translateY(-50%);
  width: 1.875rem;
  height: 1.875rem;
  background: url("../images/btn_more.png") no-repeat center/100% auto;
}

.layer-wrap .layer-container .layer-content .list-area .noti {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 6.9375rem;
  padding: 0.125rem;
  margin-bottom: 0.875rem;
  border-radius: 1rem;
  border: 0;
  border-image-source: linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.layer-wrap .layer-container .layer-content .list-area .noti .txt-area {
  padding: 0 1.25rem;
  line-height: 1.3;
}

.layer-wrap .layer-container .layer-content .list-area .noti .txt-area .tit {
  position: relative;
  font-size: 1.125rem;
  color: #7a7d87;
}

.layer-wrap .layer-container .layer-content .list-area .noti .txt-area .acc {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
}

.layer-wrap .layer-container .layer-content .list-area .noti .txt-area .acc strong {
  font-size: 1.875rem;
  font-weight: 700;
  margin-left: 0;
  padding: 0 0.25rem;
}

.layer-wrap .layer-container .layer-content .list-area .noti .img-area {
  padding: 0 1.25rem 0 0.625rem;
}

.layer-wrap .layer-container .layer-content .list-area .noti .img-area img {
  width: 4.125rem;
}

.layer-wrap .layer-container .layer-content .list-area .noti.quick .tit::after {
  content: "즉시적립";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.1875rem;
  left: 100%;
  height: 1.125rem;
  padding: 0 0.375rem 0.125rem;
  margin-left: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #e30084;
  background-color: #fbdaed;
  border-radius: 0.625rem;
  white-space: nowrap;
}

.layer-wrap .layer-container .layer-content .list-area .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 0.625rem 0.75rem;
  margin-bottom: 1.375rem;
}

.layer-wrap .layer-container .layer-content .list-area .list li {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 8.9375rem;
  padding: 0;
  border: solid 0 rgb(233 233 233);
  border-radius: 0.5rem;
  background-color: #fff;
}

.layer-wrap .layer-container .layer-content .list-area .list li + li {
  margin-top: 0;
}

.layer-wrap .layer-container .layer-content .list-area .list li .img-area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 3.875rem;
  padding: 0 0.75rem;
  margin-right: 0;
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
}

.layer-wrap .layer-container .layer-content .list-area .list li .img-area img {
  width: 3rem;
  height: 3rem;
}

.layer-wrap .layer-container .layer-content .list-area .list li .txt-area {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  padding: 0.625rem 1rem 0.125rem;
  font-size: 1rem;
  color: #1e1a3a;
  font-weight: 500;
  border-radius: 0;
}

.layer-wrap .layer-container .layer-content .list-area .list li .txt-area .acc {
  align-items: flex-end;
  font-size: 1.25rem;
  font-weight: 700;
}

.layer-wrap .layer-container .layer-content .list-area .list li .txt-area .acc strong {
  font-size: 1.875rem;
  font-weight: 700;
  margin-left: 0;
  padding: 0 0.25rem;
}

.layer-wrap .layer-container .layer-content .list-area .list li.quick::after {
  content: "즉시적립";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0.53125rem;
  left: 0.375rem;
  height: 1.125rem;
  padding: 0 0.375rem 0.125rem;
  margin-left: 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #e30084;
  background-color: #fbdaed;
  border-radius: 0.625rem;
}

.layer-wrap .layer-container .layer-content .list-area .list li.quick .txt-area::before {
  display: none;
}

.layer-wrap .layer-container .layer-content .list-area .list li.etc-cash::before {
  content: "방문+1";
  display: block;
  position: absolute;
  bottom: 0.75rem;
  left: 0.53125rem;
  z-index: 3;
  padding: 2px;
  font-size: 0.625rem;
  font-weight: 700;
  color: #f84d40;
  background-color: #fff7d7;
}

.layer-wrap .layer-container .layer-content .list-area .list li.quick.etc-cash::before {
  left: 3.34375rem;
}

.layer-wrap .layer-container .layer-content .caution-area {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
}

.layer-wrap .layer-container .layer-content .caution-area h3 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #000;
}

.layer-wrap .layer-container .layer-content .caution-area p {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #666;
  line-height: 1.54;
}

.point-earn {
  padding-bottom: 4.25rem;
  background-color: #fff;
}

.point-earn .point-info {
  width: 100%;
  height: auto;
  padding: 1.875rem 1.375rem;
  background: none;
}

.point-earn .point-info figure {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.point-earn .point-info figure img {
  width: 6.875rem;
}

.point-earn .point-info figure figcaption {
  margin-left: 1.375rem;
  font-size: 1.25rem;
  color: #6b6b6b;
}

.point-earn .point-info figure figcaption strong {
  display: block;
  margin-top: 0.375rem;
  font-size: 1.75rem;
  color: #212121;
}

.point-earn .desc {
  padding: 0 1.375rem;
  margin: 0 0 2.5rem;
}

.point-earn .desc > dl {
  padding: 0;
}

.point-earn .desc dt {
  font-size: 1.25rem;
  font-weight: 700;
  color: #212121;
  margin-bottom: 1.25rem;
}

.point-earn .desc dd {
  font-size: 1rem;
  color: #6b6b6b;
  font-weight: 400;
}

.point-earn .desc dd dl {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem 0 0;
}

.point-earn .desc dd dl + dl {
  margin-top: 0;
  border-top: 0;
}

.point-earn .desc dd dl dt {
  font-size: 1rem;
  font-weight: 400;
  color: #212121;
}

.point-earn .desc dd dl dd {
  margin-left: 1rem;
}

.point-earn .desc li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.125rem;
  font-size: 1rem;
  color: #6b6b6b;
}

.point-earn .desc li em {
  float: none;
  width: 6.875rem;
  color: #212121;
}

.point-earn .desc li > span {
  flex: 1;
}

.point-earn .desc li .coupon {
  display: block;
  margin-bottom: 0.3125rem;
}

.point-earn .desc li .coupon img {
  width: 9.375rem;
}

.point-earn .desc li .txt-caution {
  margin-top: 0.25rem;
}

.point-earn .desc li .txt-caution > * {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.625rem;
  line-height: 1.6;
}

.point-earn .desc li .txt-caution > *::before {
  content: "";
  display: block;
  width: 0.1875rem;
  height: 0.1875rem;
  margin: 0.375rem 0.25rem 0 0;
  border-radius: 0.125rem;
  background-color: #6b6b6b;
}

.point-earn .txt-box {
  padding: 1.5rem 1.375rem;
  margin: 0;
  background-color: #f2f3f7;
  border-radius: 0;
}

.point-earn .txt-box ul + h4 {
  margin-top: 1.625rem;
}

.point-earn .txt-box h4 {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.point-earn .txt-box li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: #666;
  margin-bottom: 0.375rem;
  line-height: 1.54;
}

.point-earn .txt-box li::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.25rem;
  height: 0.25rem;
  margin: 0.3125rem 0.375rem 0 0;
  border-radius: 0.125rem;
  opacity: 0.56;
  background-color: #999;
}

.point-earn .ico-bu {
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.point-earn .ico-bu::before {
  content: "";
  display: block;
  width: 0.25rem;
  height: 0.25rem;
  margin: 0.375rem 0.375rem 0 0;
  border-radius: 0.125rem;
  opacity: 0.56;
  background-color: #999;
}

.btn-area.fixed-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem;
  z-index: 10;
}

.btn-area.fixed-bottom button + button {
  margin: 0;
}

.btn-area.fixed-bottom button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.625rem;
  padding: 0 1.25rem;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 500;
  border-radius: 0.5rem;
  background-color: #e30084;
}

.btn-area.fixed-bottom.btn-full {
  height: fit-content;
  height: fit-content;
  height: fit-content;
}

.btn-area.fixed-bottom.btn-full button {
  width: 100%;
}

.card {
  padding: 0 1.25rem;
  border-radius: 0.625rem;
  background-color: #fff;
}

.card + .card {
  margin-top: 0.9375rem;
}

.cache-guide {
  padding: 1.25rem 0.75rem;
}

.cache-guide #header + main {
  padding-bottom: 0;
}

.cache-guide section {
  padding: 1.75rem 1.5rem;
}

.cache-guide section h3 {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  color: #e30084;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #e30084;
}

.cache-guide section h3 em {
  font-size: 1.25rem;
  font-weight: 700;
}

.cache-guide section img {
  margin-top: 1.25rem;
}

.cache-guide .bu-type li {
  position: relative;
  padding: 0 0.5rem 0 1rem;
  font-size: 0.875rem;
  color: #555;
  line-height: 1.125rem;
  text-indent: -0.875rem;
  word-break: keep-all;
  word-wrap: break-word;
}

.cache-guide .bu-type li::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background-color: #ffe4f4;
}

.cache-guide .bu-type li + li {
  margin-top: 0.75rem;
}

.cache-guide .bu-type li b {
  text-decoration: underline;
}

.cache-guide .cs-info {
  margin-top: -0.3125rem;
}

.cache-guide .cs-info::before {
  display: none;
}

.cache-guide .cs-info h4 {
  padding: 0.75rem 0 0.625rem;
  font-size: 1rem;
  color: #e30084;
  font-weight: 700;
  text-align: center;
}

.cache-guide .cs-info p {
  padding: 0.625rem 0 0;
  font-size: 0.75rem;
  color: #666;
  text-align: center;
}

.cache-guide .cs-info p em {
  display: block;
  margin-top: 0.4375rem;
  font-weight: 500;
}

.cache-guide .cs-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.75rem;
  border-radius: 1.875rem;
  background-color: #ffe8f5;
}

.cache-guide .cs-box strong {
  display: block;
  font-size: 0.975rem;
  color: #e30084;
  font-weight: 700;
  line-height: 1;
}

.cache-guide .cs-box a {
  font-size: 0.75rem;
  color: #111;
}

.switch {
  display: block;
  position: relative;
  width: 3.0625rem;
  height: 1.625rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  background-color: #e30084;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #fff;
  transition: 0.2s all ease;
  border-radius: 1rem;
}

.switch .slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.125rem;
  width: 1.375rem;
  height: 1.375rem;
  transform: translateY(-50%);
  background-color: #e30084;
  border-radius: 50%;
  transition: 0.2s all ease;
}

.switch input:checked + .slider {
  background-color: #fff;
}

.switch input:checked + .slider::before {
  left: 1.5rem;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper .swiper-slide {
  width: auto;
}

@media only screen and (width <= 320px) {
  html {
    font-size: 14px;
  }
}