@charset "UTF-8";
/* reset.css */
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, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
  text-indent: initial;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

address {
  font-style: normal;
}

html, body {
  height: 100%;
  -webkit-text-size-adjust: none;
}

body, button, h1, h2, h3, h4, h5, h6, input, select, table, textarea {
  line-height: 1.5;
  color: inherit;
  font: inherit;
}

ol, ul, li {
  list-style: none;
  text-indent: initial;
}

a {
  color: inherit;
  text-decoration: none;
  vertical-align: baseline;
}

blockquote, q {
  quotes: none;
}

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

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

table caption {
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
  font-size: 0;
  visibility: hidden;
  overflow: hidden;
}

input, button, form, select {
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

input[type=text], input[type=password], input[type=submit], input[type=search], input[type=email], input[type=tel], textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

button {
  cursor: pointer;
  border: 0;
  background-color: transparent;
}

legend {
  position: absolute;
  left: -9999px;
}

/* SUIT */
@font-face {
  font-family: "SUIT";
  font-weight: 300;
  src: url("../font/suit/SUIT-Light.woff2") format("woff2"), url("../font/suit/SUIT-Light.ttf") format("truetype"), url("../font/suit/SUIT-Light.otf") format("opentype");
}
@font-face {
  font-family: "SUIT";
  font-weight: 400;
  src: url("../font/suit/SUIT-Regular.woff2") format("woff2"), url("../font/suit/SUIT-Regular.ttf") format("truetype"), url("../font/suit/SUIT-Regular.otf") format("opentype");
}
@font-face {
  font-family: "SUIT";
  font-weight: 500;
  src: url("../font/suit/SUIT-Medium.woff2") format("woff2"), url("../font/suit/SUIT-Medium.ttf") format("truetype"), url("../font/suit/SUIT-Medium.otf") format("opentype");
}
@font-face {
  font-family: "SUIT";
  font-weight: 600;
  src: url("../font/suit/SUIT-SemiBold.woff2") format("woff2"), url("../font/suit/SUIT-SemiBold.ttf") format("truetype"), url("../font/suit/SUIT-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "SUIT";
  font-weight: 700;
  src: url("../font/suit/SUIT-Bold.woff2") format("woff2"), url("../font/suit/SUIT-Bold.ttf") format("truetype"), url("../font/suit/SUIT-Bold.otf") format("opentype");
}
@font-face {
  font-family: "SUIT";
  font-weight: 800;
  src: url("../font/suit/SUIT-ExtraBold.woff2") format("woff2"), url("../font/suit/SUIT-ExtraBold.ttf") format("truetype"), url("../font/suit/SUIT-ExtraBold.otf") format("opentype");
}
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 800;
  src: url("../font/nanum-squre-round/NanumSquareRoundEB.woff2") format("woff2"), url("../font/nanum-squre-round/NanumSquareRoundEB.ttf") format("truetype"), url("../font/nanum-squre-round/NanumSquareRoundOTFEB.otf") format("opentype");
}
:root {
  --vh: 100vh;
  --vw: 100vw;
}

html,
body {
  font-family: "SUIT", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}

html {
  font-size: 62.5%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 75%;
  }
}

body {
  font-size: 1.3rem;
}

button:focus,
a:focus {
  outline: 0;
}

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

a.skip-navi {
  width: 100%;
  padding: 8px 0;
  position: absolute;
  top: -500px;
  left: 0;
  z-index: 999;
  background-color: #000;
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
}
a.skip-navi:focus {
  top: 0;
}

.progress-bar {
  width: 100%;
  height: 3px;
  position: relative;
  z-index: 5;
  background-color: #f6f7f8;
}
.progress-bar .bar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1582ed;
  transition: width 1s 0.2s;
}

.bottom-area > .wrap {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 90;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.bottom-area > .wrap > .btn-group {
  gap: 0;
  background-color: #fff;
}
.bottom-area > .wrap > .btn-group .btn {
  height: 60px;
  font-weight: 700;
}
.bottom-area > .wrap > .btn-group .gift {
  width: 60px;
  min-width: 60px;
}
.bottom-area > .wrap > .btn-group .gift ~ .btn {
  flex: 1;
}
.bottom-area > .wrap > .btn-group.event {
  flex-direction: column;
  gap: 1px;
  background-color: #fff;
}
.bottom-area > .wrap > .btn-group.event .row {
  display: flex;
  gap: 1px;
  width: 100%;
  background-color: #fff;
}
.bottom-area > .wrap > .btn-group.event a,
.bottom-area > .wrap > .btn-group.event button {
  flex: 1;
}
.wrapper.hide-bottom-menu .bottom-area > .wrap {
  -webkit-transform:translate3d(-50%, 100%, 0);
  transform:translate3d(-50%, 100%, 0)
}
.bottom-area .snackbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: 0;
  padding-bottom: 0;
  margin: 0 auto;
  overflow: hidden;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.bottom-area .snackbar.is-active {
  max-height: 1000px;
  padding-bottom: 16px;
  opacity: 1;
  transition: opacity 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.bottom-area .snackbar.is-disabled, .bottom-area .snackbar.isdisabled.is-active {
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: opacity 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.bottom-area .snackbar > .wrap {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 38px;
  padding: 10px 50px 10px 20px;
  position: relative;
  background-color: #1d1d1e;
  border-radius: 10px;
}
.bottom-area .snackbar .thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.bottom-area .snackbar .thumb > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.bottom-area .snackbar .character {
  display: flex;
  flex-shrink: 0;
  margin-right: 10px;
}
.bottom-area .snackbar .icon {
  flex-shrink: 0;
  margin-right: 10px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -81px -165px;
}
.bottom-area .snackbar .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: calc(100% - 100px);
}
.bottom-area .snackbar .tit {
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
}
.bottom-area .snackbar .message {
  font-size: 1.3rem;
  font-weight: 300;
  color: #fff;
  text-align: center;
}
.bottom-area .snackbar .message span,
.bottom-area .snackbar .message b {
  vertical-align: baseline;
}
.bottom-area .snackbar .desc {
  margin-top: 3px;
  font-size: 1.3rem;
  font-weight: 300;
  color: #fff;
}
.bottom-area .snackbar .desc span,
.bottom-area .snackbar .desc b {
  vertical-align: baseline;
}
.bottom-area .snackbar .txt {
  margin-top: 3px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
}
.bottom-area .snackbar .btn-link {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-image: url("../img/common/arrow-snackbar-link.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) center;
  background-size: 9px 16px;
}
.bottom-area .snackbar .btn-close {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  background-image: url("../img/common/btn-snackbar-close.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.bottom-area .snackbar .btn-close + .btn-link {
  background: none;
}
.bottom-area .quick-menu {
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 1;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.bottom-area .quick-menu li {
  display: flex;
}
.bottom-area .quick-menu .btn-scrollup {
  display: inline-flex;
  transition: margin 0.3s;
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.bottom-area .quick-menu .btn-scrollup::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 36px;
  height: 36px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px 0px;
}
.bottom-area .quick-menu .btn-menu-bstroy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 5px;
  background-color: #ff526d;
  border-radius: 50%;
  box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.bottom-area .quick-menu .btn-menu-bstroy::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  background: url("../img/bstory/icon-menu.png") no-repeat;
  background-size: 22px auto;
}
.bottom-area .menu {
  height: 80px;
  margin-bottom: 0;
  position: relative;
  z-index: 3;
  background-color: #fff;
  border-top: 1px solid #e1e3e8;
}
.bottom-area .menu .list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.bottom-area .menu li {
  flex: 1;
  height: 100%;
}
.bottom-area .menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  color: #1d1d1e;
}
.bottom-area .menu a.allmenu::before {
  content: "";
  margin-bottom: 5px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -162px -165px;
}
.bottom-area .menu a.manager::before {
  content: "";
  margin-bottom: 5px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -135px -165px;
}
.bottom-area .menu a.manager .dday {
  box-sizing: border-box;
  min-width: 28px;
  padding: 0 4px;
  position: absolute;
  top: 29px;
  left: calc(50% - 1px);
  background-color: #233b77;
  border: 1px solid #fff;
  border-radius: 0.8em;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.bottom-area .menu a.mypage::before {
  content: "";
  margin-bottom: 5px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px 0px;
}
.bottom-area .menu a.cart {
  position: relative;
}
.bottom-area .menu a.cart::before {
  content: "";
  margin-bottom: 5px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -54px -165px;
}
.bottom-area .menu a.cart .num {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #26479a;
  border: 1px solid #fff;
  border-radius: 1em;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-indent: 1px;
  -webkit-transform: translate(calc(-50% + 14px), calc(-50% - 17px));
  transform: translate(calc(-50% + 14px), calc(-50% - 17px));
  pointer-events: none;
}
.bottom-area .menu a.history {
  position: relative;
}
.bottom-area .menu a.history .img {
  width: 22px;
  height: 22px;
  margin-bottom: 5px;
  position: relative;
  background-color: #fff;
  background-image: url("../img/common/icon-viewed.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .bottom-area > .wrap {
    width: 524px;
    margin-left: -245px;
  }
}

/* 메세지 스낵바 */
.bottom-area .message-snackbar > .wrap {
  display: inline-flex;
  width: auto;
  padding: 10px 20px;
}

.common-container {
  flex-grow: 1;
  padding: 30px 20px 50px;
}

.content-head {
  display: flex;
  align-items: flex-end;
  margin-top: 30px;
  margin-bottom: 10px;
}
.content-head:first-child {
  margin-top: 0;
}
.common-container .hide:first-child + .content-head {
  margin-top: 0;
}
.content-head .heading-1,
.content-head .heading-2,
.content-head .heading-3,
.content-head .heading-4,
.content-head .heading-5 {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.content-head .heading-1 + .paragraph-1, .content-head .heading-1 + .paragraph-2, .content-head .heading-1 + .paragraph-3, .content-head .heading-1 + .paragraph-4,
.content-head .heading-2 + .paragraph-1,
.content-head .heading-2 + .paragraph-2,
.content-head .heading-2 + .paragraph-3,
.content-head .heading-2 + .paragraph-4,
.content-head .heading-3 + .paragraph-1,
.content-head .heading-3 + .paragraph-2,
.content-head .heading-3 + .paragraph-3,
.content-head .heading-3 + .paragraph-4,
.content-head .heading-4 + .paragraph-1,
.content-head .heading-4 + .paragraph-2,
.content-head .heading-4 + .paragraph-3,
.content-head .heading-4 + .paragraph-4,
.content-head .heading-5 + .paragraph-1,
.content-head .heading-5 + .paragraph-2,
.content-head .heading-5 + .paragraph-3,
.content-head .heading-5 + .paragraph-4 {
  margin-top: 5px;
}
.content-head .paragraph-1,
.content-head .paragraph-2,
.content-head .paragraph-3,
.content-head .paragraph-4 {
  width: 100%;
}
.content-head + .heading-1, .content-head + .heading-2, .content-head + .heading-3, .content-head + .heading-4, .content-head + .heading-5, .content-head + .content-head {
  margin-top: 20px;
}
.content-head .left {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
}
.content-head .right {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
.content-head .count {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1d1d1e;
}
.content-head .count .num {
  font-weight: 800;
  vertical-align: top;
}
.content-head .progress {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.content-head .progress > *:not(:first-child) {
  padding-left: 11px;
  margin-left: 8px;
  position: relative;
}
.content-head .progress > *:not(:first-child)::after {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.content-head .progress .ready {
  color: #1d1d1e;
}
.content-head .progress .ongoing {
  color: #ff526d;
}
.content-head .progress .complete {
  color: #1582ed;
}
.content-head .progress .num {
  margin-right: -2px;
  vertical-align: baseline;
}
.content-head .check-blue-txt {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1582ed;
}
.content-head .check-blue-txt::before {
  content: "";
  margin-right: 6px;
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -189px -165px;
}
.content-head .btn-util {
  margin-bottom: 2px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: #8d8e8f;
}
.content-head .btn-util + .btn-util {
  padding-left: 11px;
  margin-left: 9px;
  position: relative;
}
.content-head .btn-util + .btn-util::before {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 3px;
  left: 0;
  background-color: #e1e3e8;
}
.content-head .list-filter {
  margin-bottom: -6px;
}
.content-head .name {
  color: #1582ed;
  vertical-align: top;
}

.footer {
  padding: 10px;
  border-top: 1px solid #e1e3e8;
  background: #fff;
}
.footer .service {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 4px;
}
.footer .service li {
  flex-shrink: 0;
}
.footer .service li:first-child a::after {
  content: none;
}
.footer .service a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  position: relative;
  font-size: 1.1rem;
  font-weight: 400;
  color: #1d1d1e;
  text-align: center;
}
.footer .service a::after {
  content: "";
  display: block;
  width: 1px;
  height: 8px;
  position: absolute;
  top: 9px;
  left: 0;
  background-color: #e1e3e8;
}
.footer .company {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer .company.is-open > .wrap {
  height: auto;
}
.footer .company.is-open .btn-open::after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
/* 23.06.09_추가(.info-wrap)*/
.footer .company > .info-wrap {
  height: auto;
  transition: height 0.3s;
}
.footer .company > .info-wrap > .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer .company > .info-wrap > .inner li {
  display: flex;
}
/* // 23.06.09_추가 */
.footer .company > .wrap {
  height: auto;
  transition: height 0.3s;
}
.footer .company > .wrap > .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer .company > .wrap > .inner li {
  display: flex;
}
/* 23.06.09_추가 (h3 스타일적용)*/
.footer .company h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1d1d1e;
}
/* // 23.06.09_추가*/
.footer .company .btn-open {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 20px 0 8px;
  position: relative;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1d1d1e;
}
.footer .company .btn-open::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 5px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  display: inline-flex;
  width: 8px;
  height: 3.5px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -103px;
}
.footer .company dd {
  display: flex;
  margin-top: 2px;
  overflow: hidden;
}
.footer .company .item {
  font-size: 1rem;
  font-weight: 300;
  color: #78787d;
  letter-spacing: 0;
}
.footer .company .item + .item {
  padding-left: 6px;
  margin-left: 6px;
  position: relative;
}
.footer .company .item + .item::after {
  content: "";
  display: block;
  width: 1px;
  height: 7px;
  position: absolute;
  top: 3px;
  left: 0;
  background-color: #ababae;
}
.footer .company .link {
  font-weight: 600;
  text-decoration: underline;
  vertical-align: top;
}
.footer .company .email {
  font-weight: 600;
  text-decoration: underline;
  vertical-align: top;
}
.footer .sns {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.footer .sns a.blog {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.footer .sns a.blog::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -41px;
}
.footer .sns a.instagram {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.footer .sns a.instagram::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -76px;
}
.footer .sns a.youtube {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.footer .sns a.youtube::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -130px;
}
/* 23.09.13 ISMS 추가 */
.footer .sns .sns-bar {
  margin : 0 10px;
  position: relative;
}
.footer .sns .sns-bar::after {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 0;
  background-color: #ababae;
}
.footer .sns a.isms {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.footer .sns a.isms::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -232px -223px;
}
/* //23.09.13 ISMS 추가 */
.footer .copyright {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 300;
  color: #8d8e8f;
  text-align: center;
}

.gnb {
  width: 100%;
  height: var(--vh, 1vh);
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 95;
  transition: left 0.01s 1s;
}
.gnb button,
.gnb a {
  position: relative;
  z-index: 1;
}
.gnb .os-content {
  transition: visibility 0.01s 0.6s;
  visibility: hidden;
}
.gnb::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}
.gnb::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  transition: background 0.01s 0.01s;
}
.wrapper.open-gnb .gnb {
  left: 0;
  transition: left 0.01s 0.01s;
}
.wrapper.open-gnb .gnb::before {
  background-color: rgba(0, 0, 0, 0.7);
}
.wrapper.open-gnb .gnb::after {
  background-color: #fff;
  transition: background 0.01s 0.3s;
}
.wrapper.open-gnb .gnb .os-content {
  transition: visibility 0.01s 0.01s;
  visibility: visible;
}
.wrapper.open-gnb .gnb > .wrap {
  transition:visibility .01s .01s;
  visibility:visible
}
.wrapper.open-gnb .gnb .inner {
  transition:-webkit-transform .3s;
  transition:transform .3s;
  transition:transform .3s, -webkit-transform .3s;-webkit-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0)
}
.gnb > .wrap {
  height: 100%;
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
  z-index:1;
  transition:visibility .01s 1s;
  visibility:hidden
}
.gnb .inner {
  box-sizing:border-box;
  display:flex;flex-direction:column;
  height:100%;
  background-color:#fff;
  transition:-webkit-transform .3s;
  transition:transform .3s;transition:transform .3s, -webkit-transform .3s;
  -webkit-transform:translate3d(-100%, 0, 0);
  transform:translate3d(-100%, 0, 0)
}
.gnb .head {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0;
  background-color: #26479a;
}
.gnb .head .logo {
  display: inline-flex;
  width: 105px;
  height: 0;
  max-height: 0;
  padding-top: 35px;
  overflow: hidden;
  position: relative;
}
.gnb .head .logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 105px;
  height: 35px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -50px;
}
.gnb .head .action {
  display: flex;
  margin-right: -5px;
  margin-left: auto;
  position: absolute;
  top: 0;
  right: 17px;
}
.gnb .head .btn-search {
  display: inline-flex;
  width: 38px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.gnb .head .btn-search::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 23px;
  height: 23px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -50px;
}
.gnb .head .btn-close {
  display: inline-flex;
  display: inline-flex;
  width: 38px;
  height: 0;
  max-height: 0;
  padding-top: 38px;
  overflow: hidden;
  background-image: url("../img/common/btn-close-white.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  padding-top: 50px;
}
.gnb .body {
  flex-grow: 1;
  padding: 22px 0 0 0;
}
.gnb .user {
  box-sizing: border-box;
  padding: 27px 20px;
  margin-top: -22px;
  background-color: #26479a;
}
.gnb .user .thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background-color: #fff;
  background-size: contain;
  border-radius: 50%;
}
.gnb .user .thumb .img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.gnb .user .login {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.gnb .user .login .thumb {
  background: url("../img/@dummy/user-img.jpg") no-repeat center center;
  background-color: #fff;
  background-size: contain;
  border-radius: 50%;
}
.gnb .user .login .title {
  width: 100%;
  font-size: 2rem;
  color: #fff;
}
.gnb .user .login .title .str {
  font-weight: 600;
  color: #fff;
}
.gnb .user .login .btn-group {
  margin-top: 28px;
  background-color: unset;
}
.gnb .user .login .btn-group .btn {
  border-color: #fff;
  color: #fff;
}
.gnb .user .info {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.gnb .user .info .content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 2rem;
  color: #fff;
}
.gnb .user .info .content .title:after {
  content: "";
  margin-left: 7px;
  display: inline-flex;
  width: 8px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px 0px;
}
.gnb .user .info .content .str {
  font-weight: 600;
  color: #fff;
}
.gnb .user .info .content .status {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3rem;
}
.gnb .user .info .content .status > *:not(:first-child) {
  padding-left: 8px;
  margin-left: 8px;
  position: relative;
}
.gnb .user .info .content .status > *:not(:first-child)::after {
  content: "";
  width: 1px;
  height: 8px;
  position: absolute;
  top: 0.65em;
  left: 0;
  background-color: #fff;
  opacity: 0.05;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.gnb .user .info .content .status .grade {
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
}
.gnb .user .info .content .status .icon-blue,
.gnb .user .info .content .status .icon-silver,
.gnb .user .info .content .status .icon-gold,
.gnb .user .info .content .status .icon-vip,
.gnb .user .info .content .status .icon-vvip {
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.1538em, 0);
  transform: translate3d(0, -0.1538em, 0);
}
.gnb .user .info .content .status .cash {
  font-weight: 600;
}
.gnb .user .info .content .status .icon-cash {
  margin-top: -3px;
  margin-right: 5px;
  vertical-align: inherit;
  display: inline-flex;
  width: 13px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -34px -238px;
}
.gnb .user .info .content .status .coupon::before {
  content: "";
  margin-top: -3px;
  margin-right: 3px;
  vertical-align: inherit;
  display: inline-flex;
  width: 13px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -52px -238px;
}
.gnb .user .info .upload-profile {
  flex-shrink: 0;
  width: 48px;
}
.gnb .foot {
  flex-shrink: 0;
}
.gnb .txt-boxmenu {
  width: 100%;
  left: auto;
  z-index: 1;
}
.gnb .icon-menu {
  padding: 0 20px;
  margin: 20px 0 30px;
}
.gnb .nav {
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  position: relative;
}
.gnb .nav::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  background-color: #f0f1f4;
}
.gnb .nav > .list > li {
  position: relative;
  border-top: 1px solid #f0f1f4;
}
.gnb .nav > .list > li > a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 5.3rem;
  padding: 0 24px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.gnb .nav > .list > li > a.is-active ~ .sub-list::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.gnb .nav > .list > li > a.is-active ~ .sub-list > .list {
  transition: visibility 0.01s 0.01s;
  visibility: visible;
}
.gnb .nav > .list > li > a .icon-step-order::before {
  content: "";
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -179px -116px;
}
.gnb .nav > .list > li > a .icon-baby-food::before {
  content: "";
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -35px -130px;
}
.gnb .nav > .list > li > a .icon-child-food::before {
  content: "";
  vertical-align: sub;
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -93px -130px;
}
.gnb .nav > .list > li > a .icon-bstory::before {
  content: "";
  vertical-align: sub;
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -64px -130px;
}
/* 23.06.09_맘&키즈 추가 */
.gnb .nav > .list > li > a .icon-mom-kids::before {
  content: "";
  vertical-align: sub;
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -200px -228px;
}
/* 24.10.17_베베픽 추가 */
.gnb .nav > .list > li > a .icon-bebe-pick01::before {
  content: "";
  vertical-align: sub;
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common-02.png);
  background-size: 268px 253px;
  background-position: 0px 0px;
}
.gnb .nav > .list > li > a .icon-bebe-pick02::before {
  content: "";
  vertical-align: sub;
  display: inline-flex;
  width: 36px;
  height: 24px;
  background-image: url(../img/sprites/common-02.png);
  background-size: 268px 253px;
  background-position: -30px 0px;
}
/* // 24.10.17_베베픽 추가 */
.gnb .nav > .list > li > a .icon-service::before {
  content: "";
  vertical-align: sub;
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -179px -87px;
}
.gnb .nav > .list > li.step-order > a {
  color: #26479a;
}
.gnb .nav .sub-list {
  display: flex;
  align-items: flex-start;
  height: 0;
  padding: 0 24px;
  overflow: hidden;
  background-color: #f6f7f8;
  transition: height 0.3s;
}
.gnb .nav .sub-list::after {
  content: "";
  position: absolute;
  top: 2rem;
  right: 20px;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.gnb .nav .sub-list > .list {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 15px 0;
  transition: visibility 0.01s 0.3s;
  visibility: hidden;
}
.gnb .nav .sub-list > .list.bullet a {
  position: relative;
}
.gnb .nav .sub-list > .list.bullet a::before {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: calc(0.65em + 5px);
  left: 20px;
  background-color: #1d1d1e;
  border-radius: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.gnb .nav .sub-list li {
  position: relative;
}
.gnb .nav .sub-list li:not(:first-child) {
  margin-top: 5px;
}
.gnb .nav .sub-list li > a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 5px 0 5px 35px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.gnb .nav .sub-list li > a.is-active ~ ul::after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.gnb .nav .icon-fe {
  margin-left: 4px;
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.125em, 0);
  transform: translate3d(0, -0.125em, 0);
}
.gnb .nav .icon-hot {
  margin-left: 4px;
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.125em, 0);
  transform: translate3d(0, -0.125em, 0);
  display: inline-flex;
  width: 18px;
  height: 0;
  max-height: 0;
  padding-top: 18px;
  overflow: hidden;
  background-image: url("../img/common/icon-hot.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px auto;
}
.gnb .nav .icon-cold {
  margin-left: 4px;
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.125em, 0);
  transform: translate3d(0, -0.125em, 0);
  display: inline-flex;
  width: 18px;
  height: 0;
  max-height: 0;
  padding-top: 18px;
  overflow: hidden;
  background-image: url("../img/common/icon-cold.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px auto;
}
.gnb .banner {
  position: relative;
}
.gnb .banner .item a {
  display: block;
}
.gnb .banner .item .img {
  width: 100%;
}
.gnb .banner .item .img > img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.gnb .banner .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}
.gnb .banner .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.gnb .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.gnb .contact {
  box-sizing: border-box;
  width: 100%;
  padding: 20px 10px;
}
.gnb .contact .customer {
  text-align: center;
}
.gnb .contact .customer .title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.gnb .contact .customer .title .tel {
  display: inline-flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: #26479a;
  vertical-align: baseline;
}
.gnb .contact .customer .title .tel::before {
  content: "";
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-call.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  margin: 0 2px 0 2px;
  vertical-align: text-top;
}
.gnb .contact .customer .content {
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.gnb .contact .customer .content + .content {
  margin-top: 0;
}
.gnb .contact .sns {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.gnb .contact .sns a.blog {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.gnb .contact .sns a.blog::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -41px;
}
.gnb .contact .sns a.instagram {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.gnb .contact .sns a.instagram::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -76px;
}
.gnb .contact .sns a.youtube {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.gnb .contact .sns a.youtube::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -130px;
}

.header {
  box-sizing: border-box;
  flex-shrink: 0;
}
.header.primary .top > .wrap {
  background-color: #26479a;
}
.header.primary .title {
  color: #fff;
}
.header.primary .util-menu a.back,
.header.primary .util-menu button.back {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.primary .util-menu a.back::after,
.header.primary .util-menu button.back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 20px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -147px;
}
.header.primary .util-menu a.search,
.header.primary .util-menu button.search {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.primary .util-menu a.search::after,
.header.primary .util-menu button.search::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 23px;
  height: 23px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -50px;
}
.header.primary .util-menu a.home,
.header.primary .util-menu button.home {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.primary .util-menu a.home::after,
.header.primary .util-menu button.home::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -122px -130px;
}
.header.blue {
  background-color: #1582ed;
}
.header.blue .top > .wrap {
  background-color: #1582ed;
}
.header.blue .title {
  color: #fff;
}
.header.blue .util-menu a.back,
.header.blue .util-menu button.back {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.blue .util-menu a.back::after,
.header.blue .util-menu button.back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 20px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -147px;
}
.header.blue .util-menu a.search,
.header.blue .util-menu button.search {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.blue .util-menu a.search::after,
.header.blue .util-menu button.search::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 23px;
  height: 23px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -50px;
}
.header.blue .util-menu a.home,
.header.blue .util-menu button.home {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.blue .util-menu a.home::after,
.header.blue .util-menu button.home::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -122px -130px;
}
.header.mint .top > .wrap {
  background-color: #0fcbcb;
}
.header.mint .title {
  color: #fff;
}
.header.mint .util-menu a.back,
.header.mint .util-menu button.back {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.mint .util-menu a.back::after,
.header.mint .util-menu button.back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 20px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -147px;
}
.header.mint .util-menu a.search,
.header.mint .util-menu button.search {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.mint .util-menu a.search::after,
.header.mint .util-menu button.search::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 23px;
  height: 23px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -50px;
}
.header.mint .util-menu a.home,
.header.mint .util-menu button.home {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header.mint .util-menu a.home::after,
.header.mint .util-menu button.home::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -122px -130px;
}
.header .banner.is-fixed > .wrap {
  width: calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left));
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 91;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.header .banner.is-fixed.is-static > .wrap {
  position: static;
  left: 0;
  z-index: auto;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.header .banner.is-fixed.block-fixed > .wrap {
  position: static;
  left: 0;
  z-index: auto;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.header .banner > .wrap {
  width: 100%;
  position: relative;
}
.header .banner a {
  display: block;
}
.header .banner .img > img {
  width: 100%;
  vertical-align: top;
}
.header .banner .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}
.header .banner .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.header .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.header .top {
  min-height: 50px;
}
.header .top.is-fixed > .wrap {
  width: calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left));
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 91;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.header .top.is-fixed.is-static > .wrap {
  position: static;
  left: 0;
  z-index: auto;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.header .top.is-fixed.block-fixed > .wrap {
  position: static;
  left: 0;
  z-index: auto;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.header .top.open-dropmenu .drop-menu {
  height: var(--vh, 1vh);
  transition: height 0.01s 0.01s, visibility 0.01s 0.01s;
}
.header .top.open-dropmenu .drop-menu .dim {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s 0.01s, width 0.01s 0.01s, height 0.01s 0.01s;
}
.header .top.open-dropmenu .drop-menu .btn-open::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.header .top.open-dropmenu .drop-menu .list {
  height: auto;
}
.header .top.open-dropmenu .drop-menu .list > .wrap {
  transition: visibility 0.01s 0.01s;
  visibility: visible;
}
.header .top.open-dropmenu .drop-menu .list > .wrap .os-content {
  visibility: visible;
}
.header .top > .wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  position: relative;
  background-color: #fff;
}
.header .logo {
  width: 100%;
  position: relative;
}
.header .logo a {
  display: block;
  width: 130px;
  height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.header .logo .img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.header .logo .img > img {
  width: 375px;
  vertical-align: top;
  -o-object-fit: contain;
  object-fit: contain;
}
.header .title {
  font-size: 2rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.header .drop-menu {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: height 0.01s 0.3s, visibility 0.01s 0.3s;
}
.header .drop-menu .dim {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(29, 29, 30, 0.8);
  opacity: 0;
  transition: opacity 0.3s 0.01s, width 0.01s 0.3s, height 0.01s 0.3s;
}
.header .drop-menu .btn-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 2;
  background-color: #fff;
  font-size: 2rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.header .drop-menu .btn-open::after {
  content: "";
  display: block;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.header .drop-menu .list {
  width: 100%;
  height: 0;
  max-height: 60%;
  overflow: hidden;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 2;
  transition: height 0.3s, max-height 0.3s;
}
.header .drop-menu .list .os-content {
  visibility: hidden;
}
.header .drop-menu .list > .wrap {
  max-height: 100%;
  background-color: #fff;
  transition: visibility 0.01s 0.3s;
  visibility: hidden;
}
.header .drop-menu .list > .wrap .inner {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}
.header .drop-menu .list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 2rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.header .util-menu {
  display: flex;
  position: absolute;
  top: 50%;
  z-index: 2;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.header .util-menu.left {
  padding-left: 10px;
  margin-right: auto;
  left: 0;
}
.header .util-menu.right {
  padding-right: 10px;
  margin-left: auto;
  right: 0;
}
.header .util-menu button,
.header .util-menu a {
  box-sizing: border-box;
  display: inline-flex;
}
.header .util-menu button.back,
.header .util-menu a.back {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header .util-menu button.back::after,
.header .util-menu a.back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 20px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -167px;
}
.header .util-menu button.delivery,
.header .util-menu a.delivery {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header .util-menu button.delivery::after,
.header .util-menu a.delivery::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -179px -29px;
}
.header .util-menu button.search,
.header .util-menu a.search {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header .util-menu button.search::after,
.header .util-menu a.search::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -179px -58px;
}
.header .util-menu button.home,
.header .util-menu a.home {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.header .util-menu button.home::after,
.header .util-menu a.home::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -179px 0px;
}
.header .util-menu button.home::after,
.header .util-menu a.home::after {
  margin-top: -1px;
}
.header .menu {
  height: 50px;
}
.header .menu.is-fixed > .tab-menu {
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 91;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.header .menu.is-fixed.is-static .tab-menu {
  padding: 0;
  position: static;
  top: 0;
  left: 0;
  z-index: 91;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.header .menu.is-fixed.block-fixed .tab-menu {
  padding: 0;
  position: static;
  top: 0;
  left: 0;
  z-index: 91;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.header .menu > .tab-menu {
  width: 100%;
  height: 50px;
  position: static;
  background-color: #fff;
}
.header .menu > .tab-menu li a {
  padding: 0 20px;
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .header .banner > .wrap {
    width: 524px;
  }
  .side-area ~ .inner .header .banner.is-fixed > .wrap {
    width: calc(524px - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin-left: -245px;
  }
  .side-area ~ .inner .header .banner.is-fixed.is-static > .wrap {
    margin-left: 0;
  }
  .side-area ~ .inner .header .banner.is-fixed.block-fixed > .wrap {
    margin-left: 0;
  }
  .side-area ~ .inner .header .top > .wrap {
    width: 524px;
  }
  .side-area ~ .inner .header .top.is-fixed > .wrap {
    width: calc(524px - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin-left: -245px;
  }
  .side-area ~ .inner .header .top.is-fixed.is-static > .wrap {
    margin-left: 0;
  }
  .side-area ~ .inner .header .top.is-fixed.block-fixed > .wrap {
    margin-left: 0;
  }
  .side-area ~ .inner .header .menu > .wrap {
    width: 524px;
    margin-left: -245px;
  }
  .side-area ~ .inner .header .menu > .tab-menu .wrap::after {
    width: 100%;
    left: 0;
  }
  .side-area ~ .inner .header .menu.is-fixed > .tab-menu {
    width: calc(524px - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin-left: -245px;
  }
  .side-area ~ .inner .header .menu.is-fixed.is-static > .tab-menu {
    margin-left: 0;
  }
  .side-area ~ .inner .header .menu.is-fixed.block-fixed > .tab-menu {
    margin-left: 0;
  }
}

.side-area {
  display: none;
  align-items: stretch;
  width: 370px;
  height: var(--vh, 1vh);
  position: relative;
}
.side-area:focus {
  outline: 0;
}
.side-area > .wrap {
  width: 370px;
  height: var(--vh, 1vh);
  padding: 0 60px;
  margin-left: -60px;
  position: fixed;
  top: 0;
}
.side-area .inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: var(--vh, 1vh);
  padding: 20px;
}
.side-area .box {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 500px;
  padding: 30px 0;
  margin: auto 0;
}
.side-area .box + .qrcode {
  margin-top: 20px;
}
.side-area .box .logo {
  width: 133px;
  height: 0;
  max-height: 0;
  padding-top: 45px;
  overflow: hidden;
  position: relative;
  display: block;
  width: 134px !important;
  padding-top: 46px !important;
  margin: 0 auto;
  margin-bottom: 30px;
}
.side-area .box .logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 133px;
  height: 45px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px 0px;
}
.side-area .box .title {
  font-size: 4.3rem;
  font-weight: 400;
  line-height: 1.2;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.02em;
}
.side-area .box .title strong {
  display: block;
  margin-bottom: 2px;
  font-size: 6rem;
  font-weight: 700;
  color: #26479a;
}
.side-area .box .desc {
  margin-top: 15px;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.side-area .box .search {
  margin-top: 30px;
}
.side-area .box .search .input {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.side-area .box .search .input.has-value .btn-clear {
  display: block;
}
.side-area .box .search .input input[type=text] {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 15px;
  padding-right: 40px;
  background: url("../img/common/icon-search-primary.png") no-repeat;
  background-color: #fff;
  background-position: calc(100% - 7px) center;
  background-size: 24px 24px;
  border: 2px solid #26479a;
  border-radius: 0;
  font-family: "SUIT", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
.side-area .box .search .input input[type=text]:focus {
  border-color: #26479a;
  border-radius: 0;
  outline: 0;
}
.side-area .box .search .input .btn-clear {
  display: inline-flex;
  width: 36px;
  height: 0;
  max-height: 0;
  padding-top: 36px;
  overflow: hidden;
  background-image: url("../img/common/btn-del.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 9px auto;
  display: none;
  position: absolute;
  top: 2px;
  right: 35px;
  background-color: #fff;
}
.side-area .box .search .input .btn-submit {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #fff;
  display: inline-flex;
  width: 36px;
  height: 0;
  max-height: 0;
  padding-top: 36px;
  overflow: hidden;
  background-image: url("../img/common/icon-search-primary.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px auto;
}
.side-area .box .keyword {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
}
.side-area .box .keyword .btn {
  margin-bottom: 5px;
}
.side-area .box .menu {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.side-area .box .menu a,
.side-area .box .menu button {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.side-area .box .menu a::before,
.side-area .box .menu button::before {
  content: "";
  display: block;
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.side-area .box .menu .btn-delivery::before {
  background-image: url("../img/common/btn-delivery.png");
}
.side-area .box .menu .btn-guide::before {
  background-image: url("../img/common/btn-guide.png");
}
.side-area .box .menu .btn-event::before {
  background-image: url("../img/common/btn-event.png");
}
.side-area .qrcode {
  display: flex;
  margin-top: auto;
}
.side-area .qrcode .img {
  flex-shrink: 0;
  align-self: flex-start;
  margin-right: 20px;
}
.side-area .qrcode .img img {
  width: 80px;
  vertical-align: top;
}
.side-area .qrcode .desc {
  align-self: center;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.side-area .qrcode .desc b {
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .wrapper .side-area {
    display: block;
  }
  .side-area .box .title {
    font-size: 3.6rem;
  }
  .side-area .box .title strong {
    font-size: 5rem;
  }
  .side-area .box .desc {
    font-size: 1.7rem;
  }
  .side-area .box .menu a,
  .side-area .box .menu button {
    font-size: 1.3rem;
  }
  .side-area .qrcode .desc {
    font-size: 1.4rem;
  }
}

.sub-nav {
  width: 100%;
  height: var(--vh, 1vh);
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 95;
  transition: left 0.01s 0.6s;
}
.sub-nav::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}
.sub-nav::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  transition: background 0.01s 0.01s;
}
.wrapper.open-subnav .sub-nav {
  left: 0;
  transition: left 0.01s 0.01s;
}
.wrapper.open-subnav .sub-nav::before {
  background-color: rgba(0, 0, 0, 0.7);
}
.wrapper.open-subnav .sub-nav::after {
  background-color: #fff;
  transition: background 0.01s 0.3s;
}
.wrapper.open-subnav .sub-nav .inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.sub-nav > .wrap {
  height: 100%;
  position: relative;
  z-index: 1;
}
.sub-nav .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.sub-nav .head {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.sub-nav .head .title {
  font-size: 2rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.sub-nav .head .action {
  display: flex;
  margin-right: -5px;
  margin-left: auto;
  position: absolute;
  top: 0;
  right: 17px;
}
.sub-nav .head .btn-close {
  display: inline-flex;
  display: inline-flex;
  width: 38px;
  height: 0;
  max-height: 0;
  padding-top: 38px;
  overflow: hidden;
  background-image: url("../img/common/btn-close.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  padding-top: 50px;
}
.sub-nav .body {
  flex-grow: 1;
  padding: 22px env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.sub-nav .foot {
  flex-shrink: 0;
  margin-top: 30px;
}
.sub-nav .txt-boxmenu {
  width: 100%;
  left: auto;
  z-index: 1;
}
.sub-nav .icon-menu {
  padding: 0 20px;
  margin-bottom: 30px;
}
.sub-nav .nav {
  position: relative;
}
.sub-nav .nav::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  background-color: #f0f1f4;
}
.sub-nav .nav > li {
  position: relative;
  border-top: 1px solid #f0f1f4;
}
.sub-nav .nav > li > a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 53px;
  padding: 0 20px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.sub-nav .nav > li > a.is-active ~ .sub-list:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sub-nav .nav .sub-list {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}
.sub-nav .nav .sub-list:before, .sub-nav .nav .sub-list:after {
  content: "";
  width: 14px;
  height: 2px;
  position: absolute;
  top: 25px;
  right: 20px;
  background-color: #1d1d1e;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.sub-nav .nav .sub-list:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sub-nav .nav .sub-list > .list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 5px 24px 15px;
}
.sub-nav .nav .sub-list li > a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 0 6px 14px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.sub-nav .nav .sub-list li > a::before {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: 14px;
  left: 0;
  background-color: #1d1d1e;
  border-radius: 50%;
}
.sub-nav .nav .sub-list li > a.is-active ~ ul:after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.sub-nav .banner {
  position: relative;
}
.sub-nav .banner .item a {
  display: block;
}
.sub-nav .banner .item .img {
  width: 100%;
}
.sub-nav .banner .item .img > img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.sub-nav .banner .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: auto;
  right: 2.6%;
  bottom: 64%;
  left: auto;
}
.sub-nav .banner .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #fff;
  opacity: 1;
}
.sub-nav .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}
.sub-nav .contact {
  box-sizing: border-box;
  width: 100%;
  padding: 20px 10px;
}
.sub-nav .contact .customer {
  text-align: center;
}
.sub-nav .contact .customer .title {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.sub-nav .contact .customer .title .tel {
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  color: #26479a;
  vertical-align: baseline;
}
.sub-nav .contact .customer .title .tel::before {
  content: "";
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-call.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  margin: 2px 2px 0 2px;
  vertical-align: text-top;
}
.sub-nav .contact .customer .content {
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.sub-nav .contact .customer .content + .content {
  margin-top: 0;
}
.sub-nav .contact .sns {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.sub-nav .contact .sns a.blog {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.sub-nav .contact .sns a.blog::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -41px;
}
.sub-nav .contact .sns a.instagram {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.sub-nav .contact .sns a.instagram::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -76px;
}
.sub-nav .contact .sns a.youtube {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.sub-nav .contact .sns a.youtube::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -130px;
}

.wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: var(--vh, 1vh);
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
}
.wrapper > .inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--vh, 1vh);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .wrapper {
    background-color: #f8fbfe;
  }
  .wrapper::before {
    content: "";
    width: 100%;
    min-width: 1920px;
    height: 37.03%;
    position: fixed;
    bottom: 0;
    left: 50%;
    background: url("../img/common/bg-wave.png") no-repeat;
    background-color: #e9f3fd;
    background-position: top left;
    background-size: 100% auto;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  .wrapper .side-area ~ .inner {
    width: 524px;
    margin-right: 120px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.16);
  }
}

.banner-bar a {
  display: block;
}
.banner-bar .img {
  width: 100%;
  height: 0;
  padding-top: 23.8805970149%;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
.banner-bar .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.banner-bar-scroll {
  position: relative;
}
.banner-bar-scroll .swiper {
  overflow: visible;
}
.banner-bar-scroll .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}
.banner-bar-scroll .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.banner-bar-scroll .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.banner-bar-scroll.full {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}

.banner-box {
  margin-top: 20px;
}
.banner-box a {
  display: block;
}
.banner-box .img {
  width: 100%;
}
.banner-box .img > img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.banner-box.full {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.banner-box + .banner-box {
  margin-top: 10px;
}

.banner-box-scroll {
  position: relative;
}
.banner-box-scroll .banner-box {
  margin-top: 0;
}
.banner-box-scroll .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}
.banner-box-scroll .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.banner-box-scroll .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.banner-box-scroll.full {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}

.banner-line {
  width: calc(100% + 40px);
  margin-top: 30px;
  position: relative;
  left: -20px;
}
.banner-line a {
  display: block;
}
.banner-line .img > img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.banner-line-scroll {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.banner-line-scroll .banner-line {
  width: 100%;
  margin-top: 0;
  position: static;
}
.banner-line-scroll .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: auto;
  right: 2.6%;
  bottom: 64%;
  left: auto;
}
.banner-line-scroll .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.banner-line-scroll .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}

.board-detail {
  width: calc(100% + 40px);
  position: relative;
  top: 0;
  left: -20px;
}
.board-detail > .title {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #e1e3e8;
}
.board-detail > .title > .wrap {
  flex-grow: 1;
}
.board-detail > .title .tit {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
}
.board-detail > .title .date {
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #8d8e8f;
  word-break: break-word;
}
.board-detail > .title .location {
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #8d8e8f;
  word-break: break-word;
}
.board-detail > .title .util {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
  font-size: 1.8rem;
}
.board-detail > .title .util .share {
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-share-gray.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  position: relative;
  top: 0.65em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.board-detail > .title .util .bookmark {
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-bookmark-gray.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  position: relative;
  top: 0.65em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.board-detail > .title .util .bookmark.is-active {
  background-image: url("../img/common/icon-bookmark-active.png");
}
.board-detail > .content {
  padding: 0 20px;
}
.board-detail > .content > img {
  display: block;
  width: calc(100% + 40px) !important;
  height: auto !important;
  position: relative;
  left: -20px;
}
.board-detail > .content > a {
  display: block;
  width: calc(100% + 40px) !important;
  position: relative;
  left: -20px;
  text-align: top;
}
.board-detail > .content > a img {
  width: 100% !important;
  height: auto !important;
}
.board-detail > .content button {
  display: block;
}
.board-detail + .btn-group {
  padding-top: 20px;
  margin-top: 20px;
  position: relative;
}
.board-detail + .btn-group::after {
  content: "";
  width: calc(100% + 40px);
  height: 1px;
  position: absolute;
  top: 0;
  left: -20px;
  background-color: #e1e3e8;
}
.board-detail ~ *:not(.content-head, .accordion, .col-img, .roulette-event) {
  margin-bottom: 30px;
}

.board-intro {
  box-sizing: border-box;
  height: 340px;
  padding: 40px 24px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
.board-intro .title .sub {
  display: block;
  margin-bottom: 2px;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.board-intro .title .main {
  display: block;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.board-intro .tip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.board-intro .tip .bubble {
  box-sizing: border-box;
  display: inline-block;
  min-width: 160px;
  padding: 10px;
  margin-bottom: 5px;
  position: relative;
  background-color: #1582ed;
  border-radius: 4px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}
.board-intro .tip .bubble::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 70px;
  bottom: -3px;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #1582ed;
  border-left: 4px solid #1582ed;
  border-radius: 2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.board-detail .board-intro {
  width: calc(100% + 40px);
  left: -20px;
}
.board-intro + :is(.paragraph-1, .paragraph-2, .paragraph-3, .paragraph-4) {
  margin-top: 20px;
}

.board-list li {
  display: flex;
  flex-direction: column;
}
.board-list li:not(:first-child) {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #e1e3e8;
}
.board-list li a {
  display: flex;
  flex-direction: column;
}
.board-list .title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.board-list .info {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2px;
}
.board-list .date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}

.board-menu {
  width: calc(100% + 40px);
  height: 50px;
  position: relative;
  left: -20px;
}
.board-menu .wrap {
  display: flex;
  width: 100%;
  height: 50px;
  background-color: #fff;
}
.board-menu a,
.board-menu button {
  box-sizing: border-box;
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 16px;
  background-color: #fff;
  border: 1px solid #26479a;
  border-radius: 0;
  font-family: "SUIT", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 50px;
  color: #26479a;
  text-align: center;
  letter-spacing: -0.03em;
  white-space: nowrap;
  vertical-align: middle;
}
.board-menu a.is-active,
.board-menu button.is-active {
  background-color: #26479a;
  color: #fff;
}
.board-menu.is-fixed .wrap {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 4;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.board-menu.is-fixed.is-hidden .wrap {
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .board-menu.is-fixed > .wrap {
    width: 524px;
    margin-left: -245px;
  }
}

.btn-group {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  background-color: #fff;
}
.btn-group.right {
  justify-content: flex-end;
}
.btn-group.center {
  justify-content: center;
}
.btn-group.between {
  justify-content: space-between;
}
.btn-group.row {
  flex-wrap: wrap;
  gap: 0;
}
.btn-group.row > a, .btn-group.row > button, .btn-group.row > .btn {
  flex: 1 1 auto;
}
.btn-group.row .btn.full {
  border-top: 1px solid #fff;
}
.btn-group.col {
  flex-wrap: wrap;
  gap: 5px;
}
.btn-group.col > a, .btn-group.col > button, .btn-group.col > .btn {
  width: 100%;
}
.btn-group > .wrap {
  display: flex;
  gap: 10px;
}
.btn-group.fixed {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .btn-group.fixed {
    width: 524px;
    margin-left: -245px;
  }
}
.btn-group .btn.full {
  flex: auto;
  width: 100%;
}
.bullet-list-1 .btn-group, .bullet-list-2 .btn-group, .bullet-list-3 .btn-group, .bullet-list-4 .btn-group {
  margin-top: 10px;
}

.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 85px;
  height: 40px;
  padding: 0 16px;
  position: relative;
  background-color: #b4b8c0;
  border: 1px solid #b4b8c0;
  border-radius: 0;
  font-family: "SUIT", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 40px;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
.btn.gray {
  background-color: #8d8e8f;
  border-color: #8d8e8f;
}
.btn.primary {
  background-color: #26479a;
  border-color: #26479a;
}
.btn.blue {
  background-color: #1582ed;
  border-color: #1582ed;
}
.btn.skyblue {
  background-color: #e2effd;
  border-color: #e2effd;
  color: #1d1d1e;
}
.btn.mint {
  background-color: #0fcbcb;
  border-color: #0fcbcb;
}
.btn.black {
  background-color: #1d1d1e;
  border-color: #1d1d1e;
}
.btn[disabled], .btn.disabled {
  background-color: #f0f1f4;
  border-color: #f0f1f4;
  color: #b4b8c0;
}
.btn.outline {
  background: 0 0;
  color: #b4b8c0;
}
.btn.outline.gray {
  color: #78787d;
}
.btn.outline.primary {
  border-color: rgba(38, 71, 154, 0.8);
  color: #26479a;
}
.btn.outline.blue {
  color: #1582ed;
}
.btn.outline.mint {
  color: #0fcbcb;
}
.btn.outline.black {
  color: #1d1d1e;
}
.btn.round {
  padding: 0 30px;
  border-radius: 20px;
}
.btn.round.xsmall {
  padding: 0 10px;
  border-radius: 12px;
}
.btn.round.small {
  padding: 0 20px;
  border-radius: 15px;
}
/* 24.10.18 .btn.round.small 타입 추가*/
.btn.round.small.type01 {
  padding: 0px;
  border-radius: 15px;
}
/* //24.10.18 .btn.round.small 타입 추가*/
.btn.round.large {
  padding: 0 40px;
  border-radius: 25px;
}
.btn.xsmall {
  min-width: 40px;
  height: 24px;
  padding: 0 10px;
  font-size: 1.2rem;
  line-height: 24px;
}
.btn.small {
  min-width: 75px;
  height: 30px;
  padding: 0 14px;
  font-size: 1.2rem;
  line-height: 30px;
}
.btn.large {
  min-width: 115px;
  height: 50px;
  padding: 0 16px;
  font-size: 1.6rem;
  line-height: 50px;
}
.btn.full {
  flex: auto;
  width: 100%;
}
.btn span {
  display: block;
}
.btn.bebecook {
  border: 0;
}
.btn.bebecook::before {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url("../img/common/icon-bebecook.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-left: -4px;
}
.btn.naver {
  background-color: #03cf5d;
  border: 0;
}
.btn.naver::before {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url("../img/common/icon-naver.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-left: -4px;
}
.btn.naver.outline {
  background-color: transparent;
  border: 1px solid #03cf5d;
  color: #1d1d1e;
}
.btn.naver.outline::before {
  content: "";
  display: inline-block;
  margin-left: -4px;
  background-image: url("../img/common/icon-naver-outline.png");
}
.btn.kakao {
  background-color: rgba(248, 223, 0, 0.8);
  border: 0;
  color: #1d1d1e;
}
.btn.kakao::before {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url("../img/common/icon-kakao.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-left: -4px;
}
.btn.kakao.outline {
  background-color: transparent;
  border: 1px solid rgba(248, 223, 0, 0.8);
}
.btn.kakao.outline::before {
  margin-left: -4px;
}
.btn.apple {
  background-color: #1d1d1e;
  border: 0;
  color: #fff;
}
.btn.apple::before {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url("../img/common/icon-apple.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-left: -4px;
}
.btn.gift::before {
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-gift-black.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  content: "";
  display: block;
  flex-shrink: 0;
}
.btn .price {
  margin-right: 3px;
}
.btn.apple-guide {
  font-size: 2.15rem;
}
@media screen and (min-width: 768px) {
  .btn.apple-guide {
    font-size: 1.79167rem;
  }
}
.btn .motion-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  border-radius: 80px;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn .motion-loading.is-active {
  opacity: 1;
}
.btn .motion-loading .dot {
  width: 6px;
  height: 6px;
  background-color: #26479a;
  border-radius: 50%;
  -webkit-animation-name: loading;
  animation-name: loading;
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes loading {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.btn .motion-loading .dot:not(:first-child) {
  margin-left: 8px;
}
.btn .motion-loading .dot:first-child {
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
.btn .motion-loading .dot:nth-child(2) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.btn .motion-loading .dot:nth-child(3) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.btn.disabled .motion-loading {
  background-color: #f0f1f4;
}
.btn.disabled .motion-loading .dot {
  background-color: #8d8d8d;
}
.btn .icon-plus {
  display: block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background: url("../img/common/icon-plus.png") no-repeat;
  background-size: cover;
}

.btn-cart {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-cart::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 17px;
  height: 17px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -187px;
}
.btn-cart.is-disabled::before {
  background-color: #f0f1f4;
}
.btn-cart::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(180, 184, 192, 0.9);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn-gift {
  width: 40px;
  height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-gift.is-disabled::before {
  background-color: #f0f1f4;
}
.btn-gift::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #9d30e0;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn-gift::after {
  display: inline-flex;
  width: 18px;
  height: 0;
  max-height: 0;
  padding-top: 18px;
  overflow: hidden;
  background-image: url("../img/common/icon-gift.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px auto;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn-bookmark {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
  display: inline-flex;
}
.btn-bookmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 12px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -17px -238px;
}
.btn-bookmark::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(29, 29, 30, 0.8);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn-bookmark.is-active {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-bookmark.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -27px -165px;
}
.btn-bookmark.is-disabled, .btn-bookmark[disabled] {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-bookmark.is-disabled::after, .btn-bookmark[disabled]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 12px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -238px;
}
.btn-bookmark.is-disabled::before, .btn-bookmark[disabled]::before {
  background-color: #f0f1f4;
}

.btn-favorite {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  border-radius: 50%;
}
.btn-favorite::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -84px -217px;
}
.btn-favorite.is-active {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-favorite.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -179px -145px;
}
.btn-favorite.is-disabled, .btn-favorite[disabled] {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-favorite.is-disabled::after, .btn-favorite[disabled]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -63px -217px;
}

.btn-like {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  border-radius: 50%;
}
.btn-like::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 19px;
  height: 19px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -123px;
}
.btn-like.is-active {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-like.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 19px;
  height: 19px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -75px;
}
.btn-like.is-disabled, .btn-like[disabled] {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-like.is-disabled::after, .btn-like[disabled]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 19px;
  height: 19px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -99px;
}

.btn-naver {
  display: inline-flex;
  width: 70px;
  height: 0;
  max-height: 0;
  padding-top: 70px;
  overflow: hidden;
  background-image: url("../img/common/btn-naver.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70px auto;
  display: inline-flex;
}

.btn-kakao {
  display: inline-flex;
  width: 70px;
  height: 0;
  max-height: 0;
  padding-top: 70px;
  overflow: hidden;
  background-image: url("../img/common/btn-kakao.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70px auto;
  display: inline-flex;
}

.btn-apple {
  display: inline-flex;
  width: 70px;
  height: 0;
  max-height: 0;
  padding-top: 70px;
  overflow: hidden;
  background-image: url("../img/common/btn-apple.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70px auto;
  display: inline-flex;
}

.btn-bebecook {
  display: inline-flex;
  width: 70px;
  height: 0;
  max-height: 0;
  padding-top: 70px;
  overflow: hidden;
  background-image: url("../img/common/btn-bebecook.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70px auto;
  display: inline-flex;
}

.btn-text {
  display: inline-flex;
  width: 70px;
  height: 0;
  max-height: 0;
  padding-top: 70px;
  overflow: hidden;
  background-image: url("../img/common/btn-text.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70px auto;
  display: inline-flex;
}

.btn-more-icon {
  display: inline-flex;
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  background-image: url("../img/common/btn-more-link.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px auto;
}

.btn-more-txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.btn-more-txt.small {
  font-size: 1.1rem;
  font-weight: 700;
}
.btn-more-txt.small::after {
  display: inline-flex;
  width: 6px;
  height: 10px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -88px;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.btn-more-txt::after {
  display: inline-flex;
  width: 7px;
  height: 11.5px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -71.5px;
  content: "";
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.btn-more-arrow {
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  background-image: url("../img/common/btn-more-arrow.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px auto;
}

.btn-report-txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.btn-report-txt::before {
  display: inline-flex;
  width: 11.5px;
  height: 12px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -121.5px -238px;
  content: "";
}

.btn-tooltip {
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  position: relative;
}
.btn-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 16px;
  height: 16px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -217px;
}

.btn-play {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 11.5px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -88px -238px;
}
.btn-play::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(29, 29, 30, 0.8);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn-pause {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-pause::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 8px;
  height: 12px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -38px;
}
.btn-pause::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(29, 29, 30, 0.8);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn-muted {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-muted::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 17px;
  height: 11px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -124px -217px;
}
.btn-muted::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(29, 29, 30, 0.8);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn-unmuted {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.btn-unmuted::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 16.5px;
  height: 12px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -111px;
}
.btn-unmuted::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(29, 29, 30, 0.8);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.delivery-calendar {
  position: relative;
  border-radius: 5px;
}
.delivery-calendar .title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  margin-bottom: 10px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
}
.delivery-calendar table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.delivery-calendar table > thead > tr > th {
  box-sizing: border-box;
  height: 27px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1d1d1e;
  text-align: center;
  vertical-align: middle;
}
.delivery-calendar table > thead > tr > th:first-child {
  color: #ed1515;
}
.delivery-calendar table > tbody {
  height: 100%;
}
.delivery-calendar table > tbody > tr {
  height: 100%;
}
.delivery-calendar table > tbody > tr > td {
  box-sizing: border-box;
  height: 100%;
  padding-top: 5px;
  border: 1px solid #fff;
  text-align: center;
  vertical-align: middle;
}
.delivery-calendar table > tbody > tr > td:first-child .num {
  color: #ed1515;
}
.delivery-calendar .day {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px;
  overflow: hidden;
  position: relative;
}
.delivery-calendar .day::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: transparent;
  border-radius: 25px;
}
.delivery-calendar .day.check::after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: url("../img/mypage/check-calendar.png") no-repeat;
  background-size: cover;
  border-radius: 50%;
}
.delivery-calendar .day.past .num {
  color: #e1e3e8;
}
.delivery-calendar .day.past.check::after {
  background-image: url("../img/mypage/check-calendar-disabled.png");
}
.delivery-calendar .day.holiday .num {
  color: #ed1515;
}
.delivery-calendar .day.holiday .status {
  color: #ed1515;
}
.delivery-calendar .day.close .num {
  color: #ed1515;
}
.delivery-calendar .day.close .status {
  color: #ed1515;
}
.delivery-calendar .day.set1::before {
  background-color: rgba(21, 130, 237, 0.1);
}
.delivery-calendar .day.set1 .set {
  background-color: #1582ed;
}
.delivery-calendar .day.set1.past::before {
  background-color: #f6f7f8;
}
.delivery-calendar .day.set1.past .num {
  color: #b4b8c0;
}
.delivery-calendar .day.set1.past label::after {
  content: none;
}
.delivery-calendar .day.set1.past label select {
  color: #b4b8c0;
}
.delivery-calendar .day.set2::before {
  background-color: rgba(15, 203, 203, 0.1);
}
.delivery-calendar .day.set2 .set {
  background-color: #0fcbcb;
}
.delivery-calendar .day.set2.past::before {
  background-color: #f6f7f8;
}
.delivery-calendar .day.set2.past .num {
  color: #b4b8c0;
}
.delivery-calendar .day.set2.past label::after {
  content: none;
}
.delivery-calendar .day.set2.past label select {
  color: #b4b8c0;
}
.delivery-calendar .day.set3::before {
  background-color: rgba(255, 82, 109, 0.1);
}
.delivery-calendar .day.set3 .set {
  background-color: #ff526d;
}
.delivery-calendar .day.set3.past::before {
  background-color: #f6f7f8;
}
.delivery-calendar .day.set3.past .num {
  color: #b4b8c0;
}
.delivery-calendar .day.set3.past label::after {
  content: none;
}
.delivery-calendar .day.set3.past label select {
  color: #b4b8c0;
}
.delivery-calendar .day.set4::before {
  background-color: rgba(157, 48, 224, 0.1);
}
.delivery-calendar .day.set4 .set {
  background-color: #9d30e0;
}
.delivery-calendar .day.set4.past::before {
  background-color: #f6f7f8;
}
.delivery-calendar .day.set4.past .num {
  color: #b4b8c0;
}
.delivery-calendar .day.set4.past label::after {
  content: none;
}
.delivery-calendar .day.set4.past label select {
  color: #b4b8c0;
}
.delivery-calendar .day.set5::before {
  background-color: rgba(255, 206, 49, 0.1);
}
.delivery-calendar .day.set5 .set {
  background-color: #ffce31;
}
.delivery-calendar .day.set5.past::before {
  background-color: #f6f7f8;
}
.delivery-calendar .day.set5.past .num {
  color: #b4b8c0;
}
.delivery-calendar .day.set5.past label::after {
  content: none;
}
.delivery-calendar .day.set5.past label select {
  color: #b4b8c0;
}
.delivery-calendar .day .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 4px;
  margin-left: -1px;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.delivery-calendar .day label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}
.delivery-calendar .day label::after {
  content: "";
  display: block;
  width: 6px;
  height: 4px;
  background: url("../img/mypage/arrow-select-small.png") no-repeat;
  background-size: cover;
}
.delivery-calendar .day label + label {
  margin-top: 8px;
  margin-bottom: 8px;
}
.delivery-calendar .day label select {
  background-color: transparent;
  border: 0;
  font-size: 1.1rem;
  font-weight: 400;
  color: #1d1d1e;
}
.delivery-calendar .day .status {
  margin: auto 0;
  position: relative;
  z-index: 2;
  font-weight: 600;
}
.delivery-calendar .day .btn-noti {
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/mypage/btn-noti.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px auto;
  margin-top: auto;
  position: relative;
  z-index: 3;
  cursor: pointer;
}

.delivery-calendar-list {
  position: relative;
}
.delivery-calendar-list .list {
  width: 100%;
  overflow: visible;
}
.delivery-calendar-list .btn-prev {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.delivery-calendar-list .btn-prev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.delivery-calendar-list .btn-prev::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}
.delivery-calendar-list .btn-prev.swiper-button-disabled {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
}
.delivery-calendar-list .btn-prev.swiper-button-disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
.delivery-calendar-list .btn-prev.swiper-button-disabled::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}
.delivery-calendar-list .btn-next {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.delivery-calendar-list .btn-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.delivery-calendar-list .btn-next::after {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  transform: translate(-50%, -50%) rotate(-90deg);
}
.delivery-calendar-list .btn-next.swiper-button-disabled {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
}
.delivery-calendar-list .btn-next.swiper-button-disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
.delivery-calendar-list .btn-next.swiper-button-disabled::after {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.food-calendar .title {
  margin-bottom: 5px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 31px;
  color: #1d1d1e;
  text-align: center;
}
.food-calendar table {
  width: 100%;
}
.food-calendar table > thead > tr > th {
  box-sizing: border-box;
  height: 37px;
  border-bottom: 1px solid #f0f1f4;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1d1d1e;
  text-align: center;
  vertical-align: middle;
}
.food-calendar table > thead > tr > th:first-child {
  color: #ed1515;
}
.food-calendar table > tbody > tr:first-child > td {
  height: 58px;
  padding-top: 1px;
}
.food-calendar table > tbody > tr > td {
  box-sizing: border-box;
  height: 55px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #1d1d1e;
  text-align: center;
  vertical-align: middle;
}
.food-calendar table > tbody > tr > td:first-child {
  color: #ed1515;
}
.food-calendar .day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.food-calendar .day::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  background-color: transparent;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.food-calendar .day.past .num {
  color: #e1e3e8;
}
.food-calendar .day.holiday .status {
  font-weight: 600;
  color: #ed1515;
}
.food-calendar .day.close .status {
  font-weight: 600;
  color: #ed1515;
}
.food-calendar .day.set1 {
  line-height: 14px;
}
.food-calendar .day.set1::before {
  background-color: rgba(21, 130, 237, 0.1);
}
.food-calendar .day.set1 .set {
  background-color: #1582ed;
}
.food-calendar .day.set1.past .num {
  background-color: #f6f7f8;
  color: #1d1d1e;
}
.food-calendar .day.set1.past .set {
  background-color: #e1e3e8;
}
.food-calendar .day.set2 {
  line-height: 14px;
}
.food-calendar .day.set2::before {
  background-color: rgba(15, 203, 203, 0.1);
}
.food-calendar .day.set2 .set {
  background-color: #0fcbcb;
}
.food-calendar .day.set2.past .num {
  background-color: #f6f7f8;
  color: #1d1d1e;
}
.food-calendar .day.set2.past .set {
  background-color: #e1e3e8;
}
.food-calendar .day.set3 {
  line-height: 14px;
}
.food-calendar .day.set3::before {
  background-color: rgba(255, 82, 109, 0.1);
}
.food-calendar .day.set3 .set {
  background-color: #ff526d;
}
.food-calendar .day.set3.past .num {
  background-color: #f6f7f8;
  color: #1d1d1e;
}
.food-calendar .day.set3.past .set {
  background-color: #e1e3e8;
}
.food-calendar .day.set4 {
  line-height: 14px;
}
.food-calendar .day.set4::before {
  background-color: rgba(157, 48, 224, 0.1);
}
.food-calendar .day.set4 .set {
  background-color: #9d30e0;
}
.food-calendar .day.set4.past .num {
  background-color: #f6f7f8;
  color: #1d1d1e;
}
.food-calendar .day.set4.past .set {
  background-color: #e1e3e8;
}
.food-calendar .day.set5 {
  line-height: 14px;
}
.food-calendar .day.set5::before {
  background-color: rgba(255, 206, 49, 0.1);
}
.food-calendar .day.set5 .set {
  background-color: #ffce31;
}
.food-calendar .day.set5.past .num {
  background-color: #f6f7f8;
  color: #1d1d1e;
}
.food-calendar .day.set5.past .set {
  background-color: #e1e3e8;
}
.food-calendar .day .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  border-radius: 50%;
}
.food-calendar .day .set {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 8px;
  left: calc(50% + 6px);
  z-index: 2;
  background-color: transparent;
  border-radius: 50%;
  font-size: 1.1rem;
  color: #fff;
}

.food-calendar-list {
  position: relative;
}
.food-calendar-list .list {
  width: 100%;
  overflow: visible;
}
.food-calendar-list .btn-prev {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.food-calendar-list .btn-prev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.food-calendar-list .btn-prev::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}
.food-calendar-list .btn-prev.swiper-button-disabled {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
}
.food-calendar-list .btn-prev.swiper-button-disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
.food-calendar-list .btn-prev.swiper-button-disabled::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}
.food-calendar-list .btn-next {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.food-calendar-list .btn-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.food-calendar-list .btn-next::after {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  transform: translate(-50%, -50%) rotate(-90deg);
}
.food-calendar-list .btn-next.swiper-button-disabled {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
}
.food-calendar-list .btn-next.swiper-button-disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
.food-calendar-list .btn-next.swiper-button-disabled::after {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.schedule-calendar {
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid #e1e3e8;
  border-radius: 5px;
}
.schedule-calendar table {
  width: 100%;
}
.schedule-calendar table > thead > tr > th {
  box-sizing: border-box;
  height: 46px;
  padding-top: 8px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1d1d1e;
  text-align: center;
  vertical-align: middle;
}
.schedule-calendar table > tbody > tr > td {
  box-sizing: border-box;
  height: 50px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #1d1d1e;
  text-align: center;
  vertical-align: middle;
}
.schedule-calendar table > tbody > tr > td:first-child {
  color: #ed1515;
}
.schedule-calendar table > tbody > tr > td:first-child .day::before {
  width: calc(100% + 26px);
  margin-left: -13px;
}
.schedule-calendar table > tbody > tr > td:first-child .day.start::before {
  margin-left: 0;
}
.schedule-calendar table > tbody > tr > td:first-child .day.end::before {
  margin-left: 0;
}
.schedule-calendar table > tbody > tr > td:last-child .day::before {
  width: calc(100% + 26px);
  margin-left: 13px;
}
.schedule-calendar table > tbody > tr > td:last-child .day.start::before {
  margin-left: 0;
}
.schedule-calendar table > tbody > tr > td:last-child .day.end::before {
  margin-left: 0;
}
.schedule-calendar .day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.schedule-calendar .day::before {
  content: none;
  width: calc(100% + 2px);
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  background-color: #f6f7f8;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.schedule-calendar .day.start::before {
  content: "";
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  -webkit-transform: translate(-15px, -50%);
  transform: translate(-15px, -50%);
}
.schedule-calendar .day.end::before {
  content: "";
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  -webkit-transform: translate(calc(-100% + 15px), -50%);
  transform: translate(calc(-100% + 15px), -50%);
}
.schedule-calendar .day.close .status {
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  background-color: #fff;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 30px;
  color: #ed1515;
  text-align: center;
  white-space: nowrap;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.schedule-calendar .day.close .num {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.schedule-calendar .day.close .count {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.schedule-calendar .day.ongoing::before {
  content: "";
}
.schedule-calendar .day.event .num {
  background-color: #fff;
}
.schedule-calendar .day.gray .num {
  color: #e1e3e8;
}
.schedule-calendar .day .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  border-radius: 50%;
}
.schedule-calendar .day .count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 5px;
  left: calc(50% + 5px);
  z-index: 2;
  background-color: #0fcbcb;
  border-radius: 50%;
  font-size: 1.1rem;
  color: #fff;
}

.weekly-calendar .list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.weekly-calendar .list li {
  width: calc((100% - 12px) / 7);
}
.weekly-calendar .list li:nth-child(7n+1) .day .txt {
  color: #ed1515;
}
.weekly-calendar .list li:nth-child(7n+1) .day .num {
  color: #ed1515;
}
.weekly-calendar .list li:nth-child(7n+1) .day.past .txt {
  color: #b4b8c0;
}
.weekly-calendar .list li:nth-child(7n+1) .day.past .num {
  color: #b4b8c0;
}
.weekly-calendar .day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 6px;
  border-radius: 25px;
}
.weekly-calendar .day.blue {
  background-color: rgba(21, 130, 237, 0.1);
}
.weekly-calendar .day.mint {
  background-color: rgba(15, 203, 203, 0.1);
}
.weekly-calendar .day.pink {
  background-color: rgba(255, 82, 109, 0.1);
}
.weekly-calendar .day.purple {
  background-color: rgba(157, 48, 224, 0.1);
}
.weekly-calendar .day.past .txt {
  color: #b4b8c0;
}
.weekly-calendar .day.past .num {
  color: #b4b8c0;
}
.weekly-calendar .day.past.blue, .weekly-calendar .day.past.mint, .weekly-calendar .day.past.pink, .weekly-calendar .day.past.purple {
  background-color: #f6f7f8;
}
.weekly-calendar .day.past.blue .menu, .weekly-calendar .day.past.mint .menu, .weekly-calendar .day.past.pink .menu, .weekly-calendar .day.past.purple .menu {
  color: #b4b8c0;
}
.weekly-calendar .day .txt {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.weekly-calendar .day .num {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.weekly-calendar .day .num + .menu {
  margin-top: 5px;
}
.weekly-calendar .day .menu {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
}
.weekly-calendar .day .menu + .menu {
  margin-top: 2px;
}
.weekly-calendar .day .menu.blue {
  color: #1582ed;
}
.weekly-calendar .day .menu.mint {
  color: #0fcbcb;
}
.weekly-calendar .day .menu.pink {
  color: #ff526d;
}
.weekly-calendar .day .menu.purple {
  color: #9d30e0;
}

.gift-card {
  overflow: hidden;
  border-radius: 10px;
}
.gift-card .img > img {
  width: 100%;
  height: auto;
  vertical-align: top;
  -o-object-fit: contain;
  object-fit: contain;
}

.message-card {
  overflow: hidden;
  border-radius: 10px;
}
.message-card .img > img {
  width: 100%;
  height: auto;
  vertical-align: top;
  -o-object-fit: contain;
  object-fit: contain;
}

.coupon-bar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  position: relative;
  background-color: #0fcbcb;
  border-radius: 5px;
}
.coupon-bar .txt {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: calc(100% - 44px);
  padding: 10px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.coupon-bar .txt::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 30px;
  height: 20px;
  background: url("../img/common/icon-coupon-bebecook-2.png") no-repeat center;
  background-size: cover;
}
.coupon-bar::after {
  content: "";
  box-sizing: border-box;
  display: block;
  width: 44px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/common/icon-download-primary.png") no-repeat center;
  background-color: #fff;
  background-size: 16px 20px;
  border: 1px solid #0fcbcb;
  border-left: 0;
  border-radius: 0 5px 5px 0;
}
.coupon-bar.large {
  min-height: 80px;
}
.coupon-bar.large .txt {
  gap: 20px;
  max-width: calc(100% - 60px);
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: left;
  letter-spacing: -0.03em;
}
.coupon-bar.large .txt::before {
  width: 75px;
  height: 50px;
  background: url("../img/common/icon-coupon-bebecook-3.png") no-repeat center;
  background-size: cover;
}
.coupon-bar.large::after {
  width: 60px;
  background: url("../img/common/icon-download-primary-large.png") no-repeat center;
  background-color: #fff;
  background-size: 29px 36px;
}

.coupon-item {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 142px;
  position: relative;
  background-color: #fff;
  border: 2px solid #0fcbcb;
}
.coupon-item > .wrap {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 12px 20px 12px 24px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
}
.coupon-item > .wrap .title {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 60px;
}
.coupon-item > .wrap .title > *:not(.name) {
  order: 0;
}
.coupon-item > .wrap .title .name {
  display: block;
  order: 1;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.coupon-item > .wrap .title .discount {
  display: block;
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 480px) {
  .coupon-item > .wrap .title .discount {
    line-height: 1.2;
  }
}
.coupon-item > .wrap .title .discount .txt {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0fcbcb;
  letter-spacing: -0.03em;
  word-break: break-all;
  vertical-align: baseline;
}
.coupon-item > .wrap .title .num {
  font-weight: 600;
  line-height: 1.3;
  color: #0fcbcb;
  letter-spacing: -0.03em;
  word-break: break-all;
  vertical-align: baseline;
}
.coupon-item > .wrap .title .won {
  margin-left: -4px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #0fcbcb;
  letter-spacing: -0.03em;
  vertical-align: baseline;
}
.coupon-item > .wrap .title .per {
  margin-left: -4px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #0fcbcb;
  letter-spacing: -0.03em;
  vertical-align: baseline;
}
.coupon-item > .wrap .title + .content {
  padding-top: 8px;
  border-top: 1px solid #e1e3e8;
}
.coupon-item > .wrap .content {
  display: flex;
  flex-direction: column;
}
.coupon-item > .wrap .content .date {
  position: absolute;
  top: 22px;
  right: 15px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #b4b8c0;
}
.coupon-item > .wrap .content .keyword {
  display: block;
  padding-right: 40px;
  position: relative;
  font-size: 0;
}
.coupon-item > .wrap .content .keyword > * {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #78787d;
}
.coupon-item > .wrap .content .keyword > * + * {
  padding-left: 6px;
  margin-left: 4px;
  position: relative;
}
.coupon-item > .wrap .content .keyword > * + *::before {
  content: "";
  width: 1px;
  height: 8px;
  position: absolute;
  top: 3px;
  left: 0;
  background-color: #e1e3e8;
}
.coupon-item > .wrap .content .keyword > *.due {
  padding-left: 0;
  margin-left: 0;
  position: absolute;
  top: 0;
  right: 0;
  color: #ed1515;
}
.coupon-item > .wrap .content .keyword > *.due::before {
  content: none;
}
.coupon-item > .wrap .content .info {
  display: flex;
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #78787d;
}
.coupon-item > .wrap .content .info + .info {
  margin-top: 0;
}
.coupon-item > .wrap .content .info .tit {
  flex-shrink: 0;
  margin-right: 1px;
}
.coupon-item > .wrap .content .info .con {
  flex-grow: 1;
}
.coupon-item .action {
  flex-shrink: 0;
  width: 73px;
  background: url("../img/common/logo-coupon.png") no-repeat center;
  background-color: #0fcbcb;
  background-size: 20px 59px;
}
.coupon-item .action .btn-submit {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #0fcbcb;
}
.coupon-item .action .btn-submit::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/icon-download.png") no-repeat center;
  background-color: #0fcbcb;
  background-size: 32px 40px;
}
.coupon-item.is-disabled {
  border-color: #e1e3e8;
}
.coupon-item.is-disabled > .wrap .title .name {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap .title .discount .txt {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap .title .discount .num {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap .title .discount .won {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap .title .discount .per {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap .content .keyword > * {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap .content .keyword > *.due {
  color: #ed1515;
}
.coupon-item.is-disabled > .wrap .content .info .tit {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap .content .info .con {
  color: #b4b8c0;
}
.coupon-item.is-disabled > .wrap::after {
  display: none;
}
.coupon-item.is-disabled .action {
  background-color: #e1e3e8;
  background-image: url("../img/common/logo-coupon-disabled.png");
}
.coupon-item.is-disabled .action .btn-submit {
  background-color: #e1e3e8;
}
.coupon-item.is-disabled .action .btn-submit::after {
  background-color: #e1e3e8;
}
.coupon-item.is-disabled::before, .coupon-item.is-disabled::after {
  border-color: #e1e3e8;
}
.coupon-item::before {
  content: "";
  width: 10px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: -2px;
  z-index: 1;
  background-color: #fff;
  border: 2px solid #0fcbcb;
  border-left: 0;
  border-radius: 0 20px 20px 0;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.coupon-item::after {
  content: "";
  width: 10px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: -2px;
  z-index: 1;
  background-color: #fff;
  border: 2px solid #0fcbcb;
  border-right: 0;
  border-radius: 20px 0 0 20px;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.coupon-item.large {
  flex-direction: column;
  min-height: 200px;
}
.coupon-item.large > .wrap {
  padding: 19px 23px;
}
.coupon-item.large > .wrap .title {
  align-items: center;
  min-height: auto;
}
.coupon-item.large > .wrap .title .name {
  order: 0;
  font-size: 1.4rem;
}
.coupon-item.large > .wrap .title .name + .discount {
  margin-top: -4px;
}
.coupon-item.large > .wrap .title .discount .txt {
  font-size: 2.7rem;
}
.coupon-item.large > .wrap .title .num {
  font-size: 4.2rem;
}
.coupon-item.large > .wrap .title .won {
  font-size: 1.8rem;
  color: #1d1d1e;
}
.coupon-item.large > .wrap .title .per {
  font-size: 3.8rem;
}
.coupon-item.large > .wrap .title + .content {
  padding-top: 10px;
}
.coupon-item.large > .wrap .content {
  position: relative;
}
.coupon-item.large > .wrap .content .keyword {
  padding-right: 0;
}
.coupon-item.large > .wrap .content .keyword > * + .due {
  padding-left: 6px;
  margin-left: 4px;
}
.coupon-item.large > .wrap .content .keyword > * + .due::before {
  content: "";
  width: 1px;
  height: 8px;
  position: absolute;
  top: 3px;
  left: 0;
  background-color: #e1e3e8;
}
.coupon-item.large > .wrap .content .keyword > *.due {
  position: relative;
  top: auto;
  left: auto;
}
.coupon-item.large > .wrap .content .date {
  top: 8px;
  right: 0;
}
.coupon-item.large .action {
  width: 100%;
  height: 45px;
  margin-bottom: -2px;
  background: url("../img/common/logo-coupon-horizontal.png") no-repeat center;
  background-color: #0fcbcb;
  background-size: 75px 26px;
  line-height: 45px;
}
.coupon-item.large .action .btn-submit {
  height: 0;
  padding-top: 45px;
  overflow: hidden;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
}
.coupon-item.large .action .btn-submit::after {
  content: "쿠폰 다운로드 받기";
  width: auto;
  height: auto;
  padding-right: 23px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../img/common/icon-download-small.png") no-repeat;
  background-position: right center;
  background-size: 18px 18px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.coupon-item.large.is-disabled .action {
  background-color: #e1e3e8;
  background-image: url("../img/common/logo-coupon-disabled-horizontal.png");
}
.coupon-item.large.is-disabled .action .btn-submit::after {
  content: "쿠폰 다운로드 완료";
}

.coupon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.coupon-list .coupon-item.small {
  width: calc((100% - 10px) / 2);
}
.coupon-list li {
  width: 100%;
}
.coupon-list .radio-circle {
  width: 100%;
}
.coupon-list .radio-circle input[type=radio] + span {
  align-items: center;
  width: 100%;
  padding: 0 0 0 40px;
}
.coupon-list .radio-circle input[type=radio] + span::before {
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.coupon-list .radio-circle input[type=radio] + span .coupon-item > .wrap .title .main .num {
  -webkit-transform: translate3d(2px, 0, 0);
  transform: translate3d(2px, 0, 0);
}
.coupon-list .radio-circle input[type=radio] + span .coupon-item > .wrap .title .main .unit {
  -webkit-transform: translate3d(-4px, 6px, 0);
  transform: translate3d(-4px, 6px, 0);
}
.coupon-list .radio-circle input[type=radio] + span .coupon-item .hidden {
  display: block;
  flex-shrink: 0;
  width: 73px;
  position: relative;
}
.coupon-list .radio-circle input[type=radio] + span .coupon-item .hidden::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/logo-coupon.png") no-repeat center;
  background-color: #0fcbcb;
  background-size: 20px 59px;
}
.coupon-list .radio-circle input[type=radio] + span .coupon-item.is-disabled .hidden::after {
  background: url("../img/common/logo-coupon-disabled.png") no-repeat center;
  background-color: #e1e3e8;
  background-size: 20px 59px;
}

.agreement-area .agreement-all {
  padding: 0 4px;
}
.agreement-area .agreement-all + .agreement-list {
  padding-top: 24px;
  margin-top: 27px;
  border-top: 1px solid #e1e3e8;
}
.agreement-area .agreement-all input[type=checkbox] + label {
  display: flex;
  flex-direction: column;
  padding: 3px 5px 3px 30px;
}
.agreement-area .agreement-all input[type=checkbox] + label::before {
  top: calc(0.65em + 3px);
}
.agreement-area .agreement-all input[type=checkbox] + label .title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1d1d1e;
  word-break: break-word;
}
.agreement-area .agreement-all input[type=checkbox] + label .desc {
  margin-top: 7px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  letter-spacing: 0;
  word-break: break-word;
}
.agreement-area .agreement-list {
  padding: 0 14px;
  letter-spacing: -0.03em;
}

.agreement-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agreement-list input[type=checkbox] + label {
  display: flex;
  flex-direction: column;
}
.agreement-list input[type=checkbox] + label .tit {
  word-break: break-word;
}
.agreement-list input[type=checkbox] + label .str {
  vertical-align: top;
}
.agreement-list input[type=checkbox] + label .desc {
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  letter-spacing: 0;
  word-break: break-word;
}
.agreement-list > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.agreement-list .input {
  flex-grow: 1;
  width: calc(100% - 75px);
}
.agreement-list .btn-group {
  flex-shrink: 0;
  width: 75px;
  padding: 6px 0;
}
.agreement-list ul {
  display: flex;
  gap: 28px;
  width: 100%;
  padding-left: 24px;
  margin-top: -3px;
}

.agreement-area2 .agreement-list2 {
  padding-top: 40px;
}
.agreement-area2 .agreement-list2 > li + li {
  margin-top: 25px;
}
.agreement-area2 .agreement-list2 + .agreement-all {
  border-top: 1px dashed #e1e3e8;
}
.agreement-area2 .agreement-all {
  padding-top: 8px;
  margin-top: 21px;
}
.agreement-area2 .agreement-all label.check {
  margin-top: 5px;
}
.agreement-area2 .agreement-all label.check input[type=checkbox] + span {
  font-weight: 400;
}
.agreement-area2 .agreement-all label + .attention {
  padding-left: 30px;
}
.agreement-area2 .agreement-all .attention {
  display: block;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1582ed;
}

.agreement-list2 {
  display: flex;
  flex-direction: column;
}
.agreement-list2 .heading-5 + .paragraph-3 {
  margin-top: 10px;
}
.agreement-list2 .heading-5 + .bullet-list-3 {
  margin-top: 10px;
}
.agreement-list2 .paragraph-3 {
  letter-spacing: 0;
}
.agreement-list2 .bullet-list-3 > li {
  letter-spacing: 0;
}
.agreement-list2 .bullet-list-3 > li + li {
  margin-top: 5px;
}
.agreement-list2 .comment-list.reference {
  padding: 0;
  margin-top: 5px;
}
.agreement-list2 label.check {
  margin-top: 5px;
}
.agreement-list2 label.check input[type=checkbox] + span {
  font-weight: 400;
}

.form-layout {
  display: flex;
  flex-direction: column;
}
.form-layout.vertical .content-head {
  margin-top: 40px;
}
.form-layout.vertical .content-head:first-child {
  margin-top: 0;
}
.form-layout.vertical .content-head + .row {
  margin-top: 0;
}
.form-layout.vertical .content-head + .row:not(:first-child) {
  margin-top: 0;
}
.form-layout > .row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.form-layout > .row:not(:first-child) {
  margin-top: 10px;
}
.form-layout > .row:last-child {
  padding-bottom: 0;
}
.form-layout > .row:last-child .content {
  padding-bottom: 0;
}
.form-layout > .row > * {
  align-self: flex-start;
}
.form-layout > .row > .title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100px;
  min-height: 40px;
  padding: 0 6px 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: left;
  vertical-align: top;
}
.form-layout > .row > .title label {
  display: inline-block;
}
.form-layout > .row > .title .btn-tooltip {
  margin-left: 4px;
}
.form-layout > .row > .title .sub {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #78787d;
  letter-spacing: -0.03em;
}
.form-layout > .row > .content {
  box-sizing: border-box;
  width: calc(100% - 100px);
  margin-left: auto;
  font-size: 1.4rem;
  color: #1d1d1e;
  text-align: left;
  vertical-align: middle;
}
.form-layout > .row > .content + .content {
  margin-top: 10px;
}
.form-layout .status-msg {
  display: none;
  margin-top: 6px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: #ed1515;
  text-align: left;
}
.form-layout .status-msg.is-invalid {
  display: block;
}
.form-layout .status-msg.is-invalid + .input-text {
  margin-top: 6px;
}
.form-layout .status-msg.is-valid {
  display: block;
  font-weight: 700;
  color: #1582ed;
}
.form-layout .status-msg.is-valid span {
  vertical-align: top;
}
.form-layout.vertical > .row {
  flex-direction: column;
}
.form-layout.vertical > .row:not(:first-child) {
  margin-top: 20px;
}
.form-layout.vertical > .row > .title {
  width: 100%;
  min-height: auto;
  padding: 0;
  margin-bottom: 6px;
}
.form-layout.vertical > .row > .title.hide {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.form-layout.vertical > .row > .title label {
  margin-top: 0;
}
.form-layout.vertical > .row > .content {
  width: 100%;
  padding: 0;
}
.form-layout .mark-essen {
  display: inline-block;
  margin-left: 2px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ed1515;
  vertical-align: middle;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
}
.form-layout .comment-list {
  padding-left: 0;
  margin-top: 6px;
}

.ingredient-col > a {
  display: block;
}
.ingredient-col > a > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ingredient-col > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ingredient-col .img {
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.ingredient-col .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: contain;
  object-fit: contain;
}
.ingredient-col .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 5px;
  position: relative;
}
.ingredient-col .title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
  word-break: break-word;
}
.ingredient-col .desc {
  margin-top: 2px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  color: #78787d;
  text-align: center;
  letter-spacing: -0.03em;
  word-break: break-word;
}
.ingredient-col .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, calc(-100% - 5px));
  transform: translate(-50%, calc(-100% - 5px));
}
.ingredient-col .info .item {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 15px;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
}
.ingredient-col .info .item.blue {
  background-color: #1582ed;
}
.ingredient-col .info .item.mint {
  background-color: #0fcbcb;
}

.ingredient-col-list {
  display: flex;
  flex-wrap: wrap;
}
.ingredient-col-list li {
  width: calc((100% - 20px) / 3);
}
.ingredient-col-list li:nth-child(n+4) {
  margin-top: 30px;
}
.ingredient-col-list li:not(:nth-child(3n-2)) {
  margin-left: 10px;
}

.ingredient-row > a {
  display: block;
}
.ingredient-row > a > .wrap {
  display: flex;
}
.ingredient-row > .wrap {
  display: flex;
}
.ingredient-row .img {
  flex-shrink: 0;
  align-self: flex-start;
  width: 26.8656716418%;
  padding-top: 26.8656716418%;
  margin-right: 20px;
  overflow: hidden;
  position: relative;
}
.ingredient-row .img::before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #f0f1f4;
}
.ingredient-row .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.ingredient-row .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: calc(73.1343283582% - 20px);
}
.ingredient-row .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  color: #8d8e8f;
}
.ingredient-row .title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}

.ingredient-row-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label.check {
  display: inline-flex;
  vertical-align: middle;
}
label.check input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.check input[type=checkbox]:checked + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -54px;
}
label.check input[type=checkbox][disabled] + span {
  color: #b4b8c0;
}
label.check input[type=checkbox][disabled] + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -154px;
}
label.check input[type=checkbox][disabled]:checked + span {
  color: #b4b8c0;
}
label.check input[type=checkbox][disabled]:checked + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -129px;
}
label.check input[type=checkbox] + span {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-wrap: break-word;
  vertical-align: middle;
}
label.check input[type=checkbox] + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -50px -192px;
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

input.check {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
input.check:checked + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -54px;
}
input.check[disabled] + label {
  color: #b4b8c0;
}
input.check[disabled] + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -154px;
}
input.check[disabled]:checked + label {
  color: #b4b8c0;
}
input.check[disabled]:checked + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -129px;
}
input.check + label {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
input.check + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -50px -192px;
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.check-only {
  display: inline-flex;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: middle;
}
.check-only input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}
.check-only input:checked + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -54px;
}
.check-only input[disabled] + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -154px;
}
.check-only input[disabled]:checked + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -129px;
}
.check-only input + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -50px -192px;
  width: 100%;
  height: 0;
  max-height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

label.check-btn {
  display: inline-flex;
  vertical-align: middle;
}
label.check-btn input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.check-btn input[type=checkbox]:checked + span {
  background-color: #1582ed;
  color: #fff;
}
label.check-btn input[type=checkbox][disabled] + span {
  background-color: #b4b8c0;
  color: #b4b8c0;
}
label.check-btn input[type=checkbox] + span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 30px;
  padding: 0 14px;
  background-color: rgba(21, 130, 237, 0.1);
  border-radius: 15px;
  font-family: "SUIT", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
  white-space: nowrap;
  vertical-align: middle;
  transition: color 0.3s, background 0.3s;
}
label.check-btn.small input[type=checkbox] + span {
  min-width: 66px;
  height: 20px;
  border-radius: 10px;
  font-size: 1rem;
}
label.check-btn.large input[type=checkbox] + span {
  min-width: 130px;
  height: 40px;
  border-radius: 20px;
  font-size: 1.8rem;
}

label.check-circle {
  display: inline-flex;
  vertical-align: middle;
}
label.check-circle input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.check-circle input[type=checkbox]:checked + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -79px;
}
label.check-circle input[type=checkbox] + span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-wrap: break-word;
  vertical-align: middle;
}
label.check-circle input[type=checkbox] + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -104px;
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

input.check-circle {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
input.check-circle:checked + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -79px;
}
input.check-circle + label {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
input.check-circle + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -104px;
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.check-circle-only {
  display: inline-flex;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: middle;
}
.check-circle-only input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}
.check-circle-only input:checked + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -79px;
}
.check-circle-only input + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -104px;
  width: 100%;
  height: 0;
  max-height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

label.check-line {
  display: inline-flex;
  vertical-align: middle;
}
label.check-line input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.check-line input[type=checkbox]:checked + span {
  color: #1d1d1e;
}
label.check-line input[type=checkbox]:checked + span::before {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -189px -165px;
}
label.check-line input[type=checkbox] + span {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 24px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #8d8e8f;
  letter-spacing: -0.03em;
  word-wrap: break-word;
  vertical-align: middle;
}
label.check-line input[type=checkbox] + span::before {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -105px -217px;
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

input.check-line {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
input.check-line:checked + label {
  color: #1d1d1e;
}
input.check-line:checked + label::before {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -189px -165px;
}
input.check-line + label {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 24px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #8d8e8f;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
input.check-line + label::before {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -105px -217px;
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.datepicker {
  display: flex;
  gap: 5px;
  width: 100%;
  position: relative;
}
.datepicker .text {
  width: calc(100% - 40px - 5px);
  cursor: default;
}
.datepicker .text[readonly] {
  background-color: #fff;
}
.datepicker label {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  width: 40px;
  background-color: #b4b8c0;
  cursor: pointer;
}
.datepicker label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 19px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -50px;
}

.datepicker-range {
  display: flex;
  width: 100%;
  position: relative;
}
.datepicker-range label:nth-of-type(1) {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 5px;
  background-color: #b4b8c0;
  cursor: pointer;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.datepicker-range label:nth-of-type(1)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 19px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -50px;
}
.datepicker-range .tilde {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 40px;
}
.datepicker-range .text {
  flex-grow: 1;
  width: calc((100% - 65px) / 2);
  text-align: center;
  cursor: default;
}
.datepicker-range .text[readonly] {
  background-color: #fff;
}

.daterangepicker {
  width: 300px;
  -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
  border: 0;
}
.daterangepicker::before {
  content: none;
}
.daterangepicker::after {
  content: none;
}
.daterangepicker .title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 59px;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #0fcbcb;
  font-family: "SUIT";
  font-size: 2.4rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: -0.025em;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.daterangepicker .title .hyphen {
  display: inline-block;
  width: 14px;
  position: relative;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
.daterangepicker .title .hyphen::after {
  content: "";
  width: 10px;
  height: 2px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.daterangepicker.show-calendar .ranges {
  margin-top: 0;
}
.daterangepicker .drp-calendar.left {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 0;
}
.daterangepicker .drp-calendar.left .calendar-table {
  padding: 0;
  border: 0;
  border-radius: 5px;
}
.daterangepicker .drp-calendar.right {
  display: none;
}
.daterangepicker .calendar-table {
  border-radius: 20px;
}
.daterangepicker .calendar-table table {
  border-collapse: unset;
  border-radius: 5px;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  border: 0;
  border-radius: 0;
  font-family: "SUIT";
  font-size: 1.6rem;
  font-weight: 500;
}
.daterangepicker .calendar-table td {
  height: 50px;
  position: relative;
  background-color: transparent;
  outline: 0 !important;
  line-height: 50px;
}
.daterangepicker .calendar-table td:first-child {
  padding-left: 10px;
  background-position: calc(50% + 5px) center;
}
.daterangepicker .calendar-table td:last-child {
  padding-right: 10px;
  background-position: calc(50% - 4px) center;
}
.daterangepicker .calendar-table td.off {
  color: #e1e3e8;
}
.daterangepicker .calendar-table td.in-range {
  background-color: #fff;
  background-image: url("../img/common/bg-calendar.png");
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 30px;
}
.daterangepicker .calendar-table td.active {
  background: url("../img/common/bg-calendar-active.png") no-repeat;
  background-color: #fff;
  background-position: center center;
  background-size: auto 30px;
  color: #fff;
}
.daterangepicker .calendar-table td.active.start-date {
  background-image: url("../img/common/bg-calendar-start-active.png");
  background-position: 50% center;
  background-size: auto 30px;
}
.daterangepicker .calendar-table td.active.start-date:first-child {
  background-position: calc(50% + 5px) center;
}
.daterangepicker .calendar-table td.active.start-date.end-date {
  background-image: url("../img/common/bg-calendar-active.png");
  background-position: center center;
}
.daterangepicker .calendar-table td.active.end-date {
  background-image: url("../img/common/bg-calendar-end-active.png");
  background-position: 50% center;
}
.daterangepicker .calendar-table td.active.end-date:last-child {
  background-position: calc(50% - 5px) center;
}
.daterangepicker .calendar-table thead tr {
  border-radius: 5px;
}
.daterangepicker .calendar-table thead tr:first-child th {
  height: 54px;
  padding-top: 5px;
  position: relative;
  background-color: #0fcbcb;
  border: 1px solid #0fcbcb;
}
.daterangepicker .calendar-table thead tr:first-child th:first-child {
  border-top-left-radius: 5px;
}
.daterangepicker .calendar-table thead tr:first-child th:last-child {
  border-top-right-radius: 5px;
}
.daterangepicker .calendar-table thead tr:nth-child(2) th {
  padding-top: 16px;
  padding-bottom: 7px;
  font-size: 1.3rem;
  font-weight: 400;
}
.daterangepicker .calendar-table thead tr:nth-child(2) th:first-child {
  padding-left: 10px;
}
.daterangepicker .calendar-table thead tr:nth-child(2) th:last-child {
  padding-right: 10px;
}
.daterangepicker .calendar-table tbody td:first-child {
  color: #ed1515;
}
.daterangepicker .calendar-table tbody td:first-child.off {
  color: #e1e3e8;
}
.daterangepicker .calendar-table tbody td:first-child.active {
  color: #fff;
}
.daterangepicker .calendar-table tbody td:first-child.active.start-date.end-date {
  background-position: calc(50% + 5px) center;
}
.daterangepicker .calendar-table tbody td:last-child.active.start-date.end-date {
  background-position: calc(50% - 5px) center;
}
.daterangepicker .calendar-table .prev span {
  display: inline-flex;
  width: 8px;
  height: 14px;
  margin-top: -5px;
  top: 18px;
  left: 2px;
  border: 0;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
}
.daterangepicker .calendar-table .prev span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 8px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -19px;
}
.daterangepicker .calendar-table .next span {
  display: inline-flex;
  width: 8px;
  height: 14px;
  margin-top: -5px;
  top: 18px;
  right: 2px;
  border: 0;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: absolute;
}
.daterangepicker .calendar-table .next span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 8px;
  height: 14px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -19px;
}
.daterangepicker .calendar-table .next span {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.common-container.open-datepicker {
  position: relative;
}

.member-container.open-datepicker {
  padding-bottom: 250px;
}

.dropdown-option {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}
.dropdown-option + .dropdown-option {
  margin-top: 10px;
}
.dropdown-option.is-active {
  z-index: 3;
}
.dropdown-option.is-active .title button {
  border-color: #1582ed;
  box-shadow: 0 0 0 1px #1582ed inset;
}
.dropdown-option.is-active .title button::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -179px;
}
.dropdown-option.is-active .list {
  display: block;
  height: auto;
  border-color: #e1e3e8;
}
.dropdown-option.is-active .list > .wrap {
  height: auto;
}
.dropdown-option.is-readonly .title button {
  background-color: #f6f7f8;
  color: #78787d;
}
.dropdown-option.is-readonly .title button::after {
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
.dropdown-option.purple.is-active .title button {
  border-color: #9d30e0;
  box-shadow: 0 0 0 1px #9d30e0 inset;
}
.dropdown-option.purple.is-active .title button::after {
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -184px -217px;
}
.dropdown-option.purple label.radio input[type=radio]:checked + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px 0px;
}
.dropdown-option .title button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 42px 0 16px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  border: 1px solid #e1e3e8;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1d1d1e;
  text-align: left;
  word-wrap: break-word;
}
.dropdown-option .title button .free {
  margin-right: 5px;
  color: #0fcbcb;
  vertical-align: baseline;
}
.dropdown-option .title button::after {
  content: "";
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
  position: absolute;
  top: 14px;
  right: 12px;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.dropdown-option .list {
  display: none;
  width: 100%;
  height: 0;
  padding-bottom: 30px;
  overflow: hidden;
  background-color: #fff;
}
.dropdown-option .list > .wrap {
  display: block;
  height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #e1e3e8;
  border-top: 0;
}
.dropdown-option .list > .wrap > li, .dropdown-option .list > .wrap > span {
  display: block;
}
.dropdown-option label.radio,
.dropdown-option label.check-circle {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  cursor: pointer;
}
.dropdown-option label.radio input:disabled ~ .box .tit,
.dropdown-option label.radio input:disabled ~ .box .price,
.dropdown-option label.check-circle input:disabled ~ .box .tit,
.dropdown-option label.check-circle input:disabled ~ .box .price {
  color: #b4b8c0;
}
.dropdown-option label.radio .box,
.dropdown-option label.check-circle .box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.dropdown-option label.radio .box::before,
.dropdown-option label.check-circle .box::before {
  top: 50%;
}
.dropdown-option label.radio .tit,
.dropdown-option label.check-circle .tit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 40px;
  color: #1d1d1e;
}
.dropdown-option label.radio .tit .free,
.dropdown-option label.check-circle .tit .free {
  margin-right: 5px;
  color: #0fcbcb;
  vertical-align: baseline;
}
.dropdown-option label.radio .price,
.dropdown-option label.check-circle .price {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1d1d1e;
  word-wrap: break-word;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.dropdown-option label.radio .price .num,
.dropdown-option label.check-circle .price .num {
  margin-right: -2px;
  font-weight: 800;
  vertical-align: top;
}

.upload-file {
  display: flex;
  flex-wrap: wrap;
}
.upload-file + .upload-img {
  margin-top: 10px;
}
.upload-file .input {
  width: 85px;
  margin-right: 20px;
}
.upload-file .input .input-file {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.upload-file .input .btn-area {
  flex-shrink: 0;
  width: 85px;
}
.upload-file .content {
  display: flex;
  align-items: center;
  width: calc(100% - 85px - 20px);
  min-height: 40px;
  margin-left: auto;
}
.upload-file .content .btn-del {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background: url("../img/common/btn-clear.png") no-repeat center;
  background-size: 20px 20px;
}

.upload-img .list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.upload-img .list li {
  width: calc((100% - 30px) / 4);
}
.upload-img .file {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.upload-img .file .input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.upload-img .file .input > input[type=file] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.upload-img .file .input > input[type=file] + label {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f6f7f8;
}
.upload-img .file .input > input[type=file] + label::after {
  content: "사진 첨부";
  width: 100%;
  padding-top: 21px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../img/common/icon-picture.png") no-repeat;
  background-position: center top;
  background-size: 20px 20px;
  font-size: 1.1rem;
  color: #78787d;
  text-align: center;
  letter-spacing: -0.03em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.upload-img .file .result {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.upload-img .file .result .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.upload-img .file .result .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.upload-img .file .result .btn-del {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/common/btn-clear.png") no-repeat calc(100% - 3px) 3px;
  background-size: 20px 20px;
  text-indent: -9999px;
}

.upload-profile {
  width: 72px;
  position: relative;
}
.upload-profile::after {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: url("../img/member/icon-camera.png") no-repeat;
  background-color: #26479a;
  background-position: center center;
  background-size: 12px 12px;
  border-radius: 50%;
}
.upload-profile .input {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.upload-profile .input > input[type=file] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.upload-profile .input > input[type=file] + label {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.upload-profile .result {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/user-img.png") no-repeat;
  background-color: #f6f7f8;
  background-position: center center;
  background-size: 51px 33px;
  border-radius: 50%;
}
.upload-profile .result .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}

.gift-message .message-card {
  margin-bottom: 10px;
}
.gift-message .message {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 128px;
  padding: 20px;
  position: relative;
  background-color: #f6f7f8;
  border-radius: 10px;
}
.gift-message .message .textarea {
  width: 100%;
  height: 88px;
  padding: 0;
  background-color: transparent;
  border: 0;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.gift-message .message .textarea:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.gift-message .message .txt {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.gift-message > .date {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.gift-message > .date::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 5px;
  background: url("../img/common/icon-gift-black.png") no-repeat;
  background-size: cover;
}
.gift-message > .date .num {
  margin-left: 2px;
}
.gift-message .action {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.gift-message .action .btn-select {
  width: 11.9402985075%;
  height: 0;
  padding-top: 11.9402985075%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 200% auto;
  opacity: 0.2;
}
.gift-message .action .btn-select.is-active {
  opacity: 1;
}

.input-text {
  display: flex;
  width: 100%;
}

.input-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -6px;
}
.input-radio + * {
  margin-top: -6px;
}

.input-check {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -6px;
}
.input-check + * {
  margin-top: -6px;
}

.input-select {
  display: flex;
  width: 100%;
}
.input-select select.select {
  width: 100%;
}
.input-select select.select + .select2 {
  width: 100% !important;
}
.input-select + .input-text-btn {
  margin-top: 10px;
}

.input-text-btn {
  display: flex;
  gap: 8px;
  width: 100%;
}
.input-text-btn .text {
  width: calc(100% - 5px - 85px);
}
.input-text-btn .btn {
  flex-shrink: 0;
  width: 85px;
}

.input-ymd {
  display: flex;
  gap: 5px;
  width: 100%;
}
.input-ymd .select,
.input-ymd .select2 {
  width: calc((100% - 10px) / 3) !important;
}

.input-email {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}
.input-email .text {
  width: calc((100% - 16px - 10px) / 2);
}
.input-email .at {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 40px;
  font-size: 1.4rem;
}
.input-email .select,
.input-email .select2 {
  width: 100% !important;
}

.input-tel {
  display: flex;
  gap: 5px;
  width: 100%;
}
.input-tel .select,
.input-tel .select2 {
  width: 100px !important;
}
.input-tel .text {
  width: calc(100% - 100px - 5px);
}

.input-tel-btn {
  display: flex;
  gap: 5px;
  width: 100%;
}
.input-tel-btn .input-tel {
  flex-grow: 1;
}
.input-tel-btn .btn {
  flex-shrink: 0;
  width: 110px;
}

.input-address {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.input-address > .noti {
  margin-bottom: 2px;
}
.input-address > .noti .desc {
  display: block;
  font-size: 1.3rem;
  font-weight: 300;
  color: #1d1d1e;
}
.input-address > .noti .address {
  display: block;
  margin-top: 5px;
}
.input-address > .noti .address .tit {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
}
.input-address > .noti .address .con {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1582ed;
}
.input-address > .row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.input-address > .row .text {
  flex-grow: 1;
  order: 1;
}
.input-address > .row .btn {
  flex-shrink: 0;
  order: 2;
}

.input-search {
  display: flex;
  gap: 5px;
  width: 100%;
}
.input-search .select {
  width: 100px;
}
.input-search .input-text-btn {
  width: calc(100% - 100px - 5px);
}

.input-search-clear {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.input-search-clear.has-value .btn-clear {
  display: block;
}
.input-search-clear .text {
  width: 100%;
  padding-right: 40px;
  background: url("../img/common/icon-search.png") no-repeat;
  background-color: #fff;
  background-position: calc(100% - 7px) center;
  background-size: 24px 24px;
}
.input-search-clear .btn-clear {
  display: inline-flex;
  width: 36px;
  height: 0;
  max-height: 0;
  padding-top: 36px;
  overflow: hidden;
  background-image: url("../img/common/btn-del.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 9px auto;
  display: none;
  position: absolute;
  top: 2px;
  right: 35px;
  background-color: #fff;
}
.input-search-clear .btn-submit {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #fff;
  display: inline-flex;
  width: 36px;
  height: 0;
  max-height: 0;
  padding-top: 36px;
  overflow: hidden;
  background-image: url("../img/common/icon-search.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px auto;
}

.input-show-pwd {
  display: flex;
  position: relative;
}
.input-show-pwd .text {
  padding-right: 38px;
}
.input-show-pwd .btn-view {
  width: 38px;
  height: 0;
  min-height: 0;
  padding-top: 38px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/common/btn-view.png") no-repeat;
  background-position: calc(100% - 12px) center;
  background-size: 16px 16px;
}
.input-show-pwd .btn-view .bar {
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  top: 13px;
  left: 12px;
}
.input-show-pwd .btn-view .bar::after {
  content: "";
  display: block;
  width: 1px;
  height: 19px;
  position: absolute;
  top: -18px;
  left: 23px;
  background-color: #656565;
  transition: all 0.1s;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.input-show-pwd .btn-view.is-visible .bar::after {
  top: -3px;
  left: 7px;
}

.input-count-character {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.input-count-character ~ .status-msg {
  margin-top: 3px;
}
.input-count-character .textarea {
  width: 100%;
}
.input-count-character .add {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.input-count-character .count {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
.input-count-character .count .num {
  font-size: 1.4rem;
  font-weight: 500;
  color: #8d8e8f;
}
.input-count-character .count .slash::before {
  content: "/";
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: #8d8e8f;
}
.input-count-character .count .max {
  font-size: 1.4rem;
  font-weight: 500;
  color: #8d8e8f;
}
.input-count-character .comment {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.input-count-character + .status-msg {
  width: calc(100% - 70px);
  margin-top: -20px;
}

.input-login-id {
  position: relative;
}
.input-login-id input.text {
  padding: 0 15px 0 50px;
}
.input-login-id::after {
  content: "";
  display: block;
  width: 18px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 17px;
  background: url("../img/common/icon-member-id.png") no-repeat center;
  background-size: cover;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.input-login-pwd {
  position: relative;
}
.input-login-pwd input.text {
  padding: 0 15px 0 45px;
}
.input-login-pwd::after {
  content: "";
  display: block;
  width: 18px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 17px;
  background: url("../img/common/icon-member-pwd.png") no-repeat center;
  background-size: cover;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.input-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.input-list-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.input-delivery-address {
  display: flex;
  flex-direction: column;
}
.input-delivery-address .main {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.input-delivery-address .sub {
  width: 100%;
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-delivery-address .tel {
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
}
.input-delivery-address .comment {
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1582ed;
}

.input-radio-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.input-refund-reason select.select + .select2 {
  min-width: 100%;
}
.input-refund-reason .input-count-character {
  margin-top: 5px;
}
.input-refund-reason .upload-file {
  margin-top: 10px;
}

.input-refund-account {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.input-refund-account select.select + .select2 {
  min-width: 100%;
}

.input-button {
  display: flex;
  gap: 10px;
}
.input-button > a, .input-button > button {
  flex: 1;
}

.input-text-unut {
  display: flex;
  align-items: center;
}
.input-text-unut .text {
  flex: 1;
}
.input-text-unut .unit {
  flex: 1;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}

.input-grownth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-text-textarea .input-count-character {
  margin-top: 10px;
}

.input-sns-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-delivery-howto .input-text {
  margin-top: 10px;
}

.input-select-ymd {
  display: flex;
  justify-content: space-between;
}
.input-select-ymd .input-select:first-child {
  width: 38.8379204893%;
}
.input-select-ymd .input-select:nth-child(2) {
  width: 29.0519877676%;
}
.input-select-ymd .input-select:nth-child(3) {
  width: 29.0519877676%;
}

.input-radio-textarea .input-count-character {
  margin-top: 4px;
}

input.text {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #e1e3e8;
  border-radius: 0;
  font-family: "SUIT", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
  transition: border 0.2s;
  resize: none;
}
input.text:focus {
  border-color: #1582ed;
  outline: 0;
  box-shadow: 0 0 0 1px #1582ed inset;
  color: #1d1d1e;
}
input.text::-webkit-input-placeholder {
  color: #8d8e8f;
}
input.text::placeholder {
  color: #8d8e8f;
}
input.text[readonly] {
  background-color: #f0f1f4;
  border-color: #e1e3e8;
  box-shadow: none;
}
input.text[readonly]:focus {
  outline: 0;
  box-shadow: none;
}
input.text[disabled] {
  background-color: #f0f1f4;
  border-color: #e1e3e8;
  box-shadow: none;
  color: #b4b8c0;
}
input.text.underline {
  padding: 0 2px;
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
input.text.underline:focus {
  border-width: 2px;
  box-shadow: none;
  transition: none;
}
input.text.underline[readonly] {
  background-color: #fff;
}
input.text.underline[readonly]:focus {
  border-width: 1px;
}
input.text.underline[disabled] {
  background-color: #fff;
}
input.text.is-invalid {
  border-color: #ed1515;
}
input.text.is-invalid:focus {
  box-shadow: none;
}

textarea.textarea {
  box-sizing: border-box;
  height: 200px;
  padding: 14px 15px;
  border: 1px solid #e1e3e8;
  border-radius: 0;
  font-family: "SUIT", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
  transition: border 0.2s;
  resize: none;
}
textarea.textarea:focus {
  border-color: #1582ed;
  outline: 0;
  box-shadow: 0 0 0 1px #1582ed inset;
  color: #1d1d1e;
}
textarea.textarea::-webkit-input-placeholder {
  color: #8d8e8f;
}
textarea.textarea::placeholder {
  color: #8d8e8f;
}
textarea.textarea[readonly] {
  background-color: #f0f1f4;
  border-color: #e1e3e8;
}
textarea.textarea[readonly]:focus {
  outline: 0;
  box-shadow: none;
}
textarea.textarea[disabled] {
  background-color: #f0f1f4;
  border-color: #e1e3e8;
  color: #b4b8c0;
}
textarea.textarea.is-invalid {
  border-color: #ed1515;
}

select.select {
  box-sizing: border-box;
  display: inline-flex;
  width: 200px;
  height: 40px;
  padding-left: 16px;
  border: 1px solid #e1e3e8;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
  transition: border 0.2s;
  -webkit-appearance: auto;
  appearance: auto;
}
select.select[disabled] {
  background-color: #f0f1f4;
  color: #b4b8c0;
}
select.select:focus {
  border-color: #1582ed;
  border-radius: 0;
  outline: 0;
  color: #1d1d1e;
}

/* stylelint-disable */
select.select.is-invalid ~ .select2 ~ .status-msg {
  margin-top: -2px;
}
select.select.is-invalid ~ .select2 .select2-selection {
  border-color: #ed1515;
}
select.select + .select2 {
  display: inline-flex;
  height: 40px;
  -webkit-appearance: none;
  appearance: none;
}
select.select + .select2.select2-container--focus .select2-selection {
  border: 1px solid #1582ed;
  box-shadow: 0 0 0 1px #1582ed inset;
}
select.select + .select2.select2-container--focus .select2-selection__arrow b {
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -179px;
}
select.select + .select2.select2-container--open .select2-selection {
  border: 1px solid #1582ed;
}
select.select + .select2.select2-container--open .select2-selection__arrow b {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -179px;
}
select.select + .select2.select2-container--disabled.select2-container--focus .select2-selection {
  border: 1px solid #e1e3e8;
}
select.select + .select2.select2-container--disabled .select2-selection {
  background-color: #f0f1f4;
}
select.select + .select2.select2-container--disabled .select2-selection__rendered {
  background-color: #f6f7f8;
  color: #b4b8c0;
}
select.select + .select2.select2-container--disabled .select2-selection__arrow b {
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
select.select + .select2 .selection {
  display: inline-block;
  width: 100%;
  height: 100%;
}
select.select + .select2 .select2-selection {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid #e1e3e8;
  border-radius: 0;
  font-family: "SUIT", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1d1d1e;
  transition: border 0.2s;
}
select.select + .select2 .select2-selection__rendered {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 36px 0 16px;
}
select.select + .select2 .select2-selection__arrow {
  width: 16px;
  height: 9px;
  top: 15px;
  right: 15px;
  left: auto;
}
select.select + .select2 .select2-selection__arrow b {
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  border: 0;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
select.select.underline + .select2 .select2-selection {
  border-top: 0;
  border-right: 0;
  border-left: 0;
  box-shadow: none;
}
select.select.underline + .select2 .select2-selection__rendered {
  padding-left: 2px;
}
select.select.underline + .select2.select2-container--open .select2-selection {
  border-width: 2px;
  transition: none;
}
select.select.underline + .select2.select2-container--disabled.select2-container--focus .select2-selection {
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
select.select.underline + .select2.select2-container--disabled .select2-selection {
  background-color: #f0f1f4;
}
select.select.underline + .select2.select2-container--disabled .select2-selection__rendered {
  background-color: #fff;
}

.select2-container .select2-dropdown {
  background-color: transparent;
  border: 0;
}
.select2-container .select2-dropdown.underline {
  top: 10px;
}
.select2-container .select2-dropdown.select2-dropdown--above .select2-results__options {
  border-top: 1px solid #e1e3e8;
  border-bottom: 0;
}
.select2-container .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #1582ed;
  border-right: 1px solid #1582ed;
  border-left: 1px solid #1582ed;
}
.select2-container .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable:last-child {
  border-bottom: 1px solid #1582ed;
}
.select2-container .select2-dropdown .select2-results__option--selected {
  background-color: #e1e3e8;
}
.select2-container .select2-dropdown .select2-results__options {
  background-color: #fff;
  border-bottom: 1px solid #e1e3e8;
}
.select2-container .select2-dropdown .select2-results__options::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #e1e3e8;
}
.select2-container .select2-dropdown .select2-results__options::after {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: #e1e3e8;
}
.select2-container .select2-dropdown .select2-results__option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border-right: 1px solid #e1e3e8;
  border-left: 1px solid #e1e3e8;
}

/* stylelint-enable */
label.radio {
  display: inline-flex;
  vertical-align: middle;
}
label.radio input[type=radio] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.radio input[type=radio]:checked + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -100px -192px;
}
label.radio input[type=radio][disabled] + span {
  color: #b4b8c0;
}
label.radio input[type=radio][disabled] + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -150px -192px;
}
label.radio input[type=radio][disabled]:checked + span {
  color: #b4b8c0;
}
label.radio input[type=radio][disabled]:checked + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -125px -192px;
}
label.radio > span {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
label.radio > span::before {
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -25px;
}

input.radio {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
input.radio:checked + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -100px -192px;
}
input.radio[disabled] + label {
  color: #b4b8c0;
}
input.radio[disabled] + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -150px -192px;
}
input.radio[disabled]:checked + label {
  color: #b4b8c0;
}
input.radio[disabled]:checked + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -125px -192px;
}
input.radio + label {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
input.radio + label::before {
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -25px;
}

.radio-only {
  display: inline-flex;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: middle;
}
.radio-only input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}
.radio-only input[disabled] + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -150px -192px;
}
.radio-only input:checked + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -100px -192px;
}
.radio-only input[disabled]:checked + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -125px -192px;
}
.radio-only input + span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -25px;
}

label.radio-circle {
  display: inline-flex;
  vertical-align: middle;
}
label.radio-circle input[type=radio] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.radio-circle input[type=radio]:checked + span {
  color: #b4b8c0;
}
label.radio-circle input[type=radio]:checked + span::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -79px;
}
label.radio-circle input[type=radio] + span {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
label.radio-circle input[type=radio] + span::before {
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -104px;
}

input.radio-circle {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
input.radio-circle:checked + label {
  color: #b4b8c0;
}
input.radio-circle:checked + label::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -79px;
}
input.radio-circle + label {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 60px;
  padding: 6px 5px 6px 30px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  vertical-align: middle;
}
input.radio-circle + label::before {
  content: "";
  position: absolute;
  top: calc(0.65em + 6px);
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -104px;
}

label.radio-btn {
  display: inline-flex;
  vertical-align: middle;
}
label.radio-btn input[type=radio] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.radio-btn input[type=radio]:checked + span {
  background-color: #1582ed;
  color: #fff;
}
label.radio-btn input[type=radio][disabled] + span {
  background-color: #b4b8c0;
  color: #b4b8c0;
}
label.radio-btn input[type=radio] + span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 20px;
  background-color: rgba(21, 130, 237, 0.1);
  border-radius: 15px;
  font-family: "SUIT", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
  white-space: nowrap;
  vertical-align: middle;
  transition: color 0.3s, background 0.3s;
}
label.radio-btn.small input[type=radio] + span {
  min-width: 66px;
  height: 20px;
  border-radius: 10px;
  font-size: 1rem;
}
label.radio-btn.large input[type=radio] + span {
  min-width: 130px;
  height: 40px;
  border-radius: 20px;
  font-size: 1.8rem;
}

.radio-circle-only {
  display: inline-flex;
  width: 20px;
  height: 20px;
  position: relative;
  vertical-align: middle;
}
.radio-circle-only input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}
.radio-circle-only input:checked + span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -79px;
}
.radio-circle-only input + span {
  width: 100%;
  height: 0;
  max-height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -104px;
}

.select-quantity {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 90px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #e1e3e8;
  border-radius: 15px;
}
.select-quantity.is-disabled .num {
  color: #f0f1f4;
}
.select-quantity.is-disabled .btn-minus {
  display: inline-flex;
  width: 28px;
  height: 0;
  max-height: 0;
  padding-top: 28px;
  overflow: hidden;
  background-image: url("../img/common/icon-minus-disabled.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px auto;
}
.select-quantity.is-disabled .btn-plus {
  display: inline-flex;
  width: 28px;
  height: 0;
  max-height: 0;
  padding-top: 28px;
  overflow: hidden;
  background-image: url("../img/common/icon-plus-disabled.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px auto;
}
.select-quantity .btn-minus {
  flex-shrink: 0;
  display: inline-flex;
  width: 28px;
  height: 0;
  max-height: 0;
  padding-top: 28px;
  overflow: hidden;
  background-image: url("../img/common/icon-minus.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px auto;
}
.select-quantity .btn-minus.is-disabled {
  display: inline-flex;
  width: 28px;
  height: 0;
  max-height: 0;
  padding-top: 28px;
  overflow: hidden;
  background-image: url("../img/common/icon-minus-disabled.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px auto;
}
.select-quantity .btn-plus {
  flex-shrink: 0;
  display: inline-flex;
  width: 28px;
  height: 0;
  max-height: 0;
  padding-top: 28px;
  overflow: hidden;
  background-image: url("../img/common/icon-plus.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px auto;
}
.select-quantity .btn-plus.is-disabled {
  display: inline-flex;
  width: 28px;
  height: 0;
  max-height: 0;
  padding-top: 28px;
  overflow: hidden;
  background-image: url("../img/common/icon-plus-disabled.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px auto;
}
.select-quantity .num {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}

label.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0;
  vertical-align: middle;
}
label.switch input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
label.switch input[type=checkbox]:checked ~ .img {
  background-color: #1582ed;
}
label.switch input[type=checkbox]:checked ~ .img::before {
  left: calc(100% - 18px);
}
label.switch input[type=checkbox]:checked ~ .img::after {
  padding: 0 20px 0 0;
}
label.switch input[type=checkbox][disabled] ~ .img {
  background-color: #f0f1f4;
}
label.switch .img {
  box-sizing: border-box;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  position: relative;
  background-color: #b4b8c0;
  border-radius: 13px;
  font-size: 0;
  transition: all 0.4s;
}
label.switch .img::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  left: 2px;
  background-color: #fff;
  border-radius: 11px;
  transition: all 0.2s;
}
label.switch .img::after {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 0 0 20px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  text-align: center;
  transition: all 0.2s;
}
label.switch .txt {
  font-size: 1.6rem;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
label.switch.hide-txt {
  gap: 0;
}
label.switch.hide-txt .txt {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.accordion {
  border-bottom: 1px solid #f0f1f4;
}
.accordion.small > .item > .title {
  height: 44px;
  font-size: 1.4rem;
  font-weight: 600;
  transition: font 0.3s;
}
.accordion.small > .item > .content::before {
  position: absolute;
  top: 19px;
  right: 1px;
  display: inline-flex;
  width: 12px;
  height: 7.5px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -222px -217px;
}
.accordion.small > .item > .content > .wrap {
  padding: 20px;
}
.accordion > .item {
  position: relative;
}
.accordion > .item:not(:first-child) {
  margin-top: -2px;
}
.accordion > .item.is-active > .content {
  height: auto;
}
.accordion > .item.is-active > .content::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.accordion > .item.is-active > .content > .wrap {
  transition: visibility 0.01s 0.01s;
  visibility: visible;
}
.accordion > .item.is-block > .content {
  height: auto;
}
.accordion > .item.is-block > .content::before {
  content: none;
}
.accordion > .item.is-block > .content > .wrap {
  visibility: visible;
}
.accordion > .item > .title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 5px 54px 5px 20px;
  margin-top: 5px;
  border-top: 1px solid #f0f1f4;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-wrap: break-word;
}
.accordion > .item > .title:first-child {
  margin-top: 0;
}
.accordion > .item > .title a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: calc(100% + 20px + 54px);
  height: calc(100% + 5px + 5px);
  padding: 5px 54px 5px 20px;
  margin: -5px -54px -5px -20px;
  position: relative;
  z-index: 1;
}
.accordion > .item > .content {
  box-sizing: border-box;
  height: 0;
  overflow: hidden;
  word-wrap: break-word;
  transition: height 0.3s, padding 0.3s;
}
.accordion > .item > .content::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 16px;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.accordion > .item > .content > .wrap {
  padding: 10px 24px 30px;
  transition: visibility 0.01s 0.3s;
  visibility: hidden;
}
.board-detail ~ .accordion {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

.company-history .list .item {
  display: flex;
  gap: 6px;
  padding-top: 7px;
  padding-left: 18px;
  position: relative;
  font-size: 1.3rem;
  word-break: break-all;
}
.company-history .list .item::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 1.15em;
  left: 6px;
  background-color: #e1e3e8;
}
.company-history .list .item:first-child {
  padding-top: 2px;
}
.company-history .list .item:last-child::before {
  height: 0;
}
.company-history .title {
  flex-shrink: 0;
  width: 28px;
  position: relative;
  font-size: 1.6rem;
  font-weight: 600;
}
.company-history .title::after {
  content: "";
  width: 3px;
  height: 3px;
  position: absolute;
  top: 0.65em;
  left: -14px;
  z-index: 1;
  background: #fff;
  border: 1px solid #8d8e8f;
  border-radius: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.company-history .content {
  padding-top: 2px;
}
.company-history.chinese {
  margin-top: 20px;
  margin-bottom: 40px;
}
.company-history.chinese .item {
  padding-top: 3px;
  padding-bottom: 5px;
}
.company-history.chinese .item .year {
  width: 50px;
  font-size: 2rem;
  color: #26479a;
}
.company-history.chinese .item .year + .content {
  padding-top: 5px;
}
@media screen and (min-width: 768px) {
  .company-history.chinese .item .year {
    width: 60px;
  }
  .company-history.chinese .item .year + .content {
    padding-top: 6px;
  }
}

.delivery-history {
  position: relative;
}
.delivery-history.is-hidden .list li {
  display: none;
}
.delivery-history.is-hidden .list li:last-child {
  margin-top: 90px;
}
.delivery-history.is-hidden .item.start::after {
  opacity: 1;
}
.delivery-history.is-hidden .btn-more {
  display: flex;
}
.delivery-history .list {
  padding-left: 30px;
  overflow: hidden;
}
.delivery-history .list li {
  display: block;
  margin-top: 29px;
  position: relative;
}
.delivery-history .list li:first-child {
  display: block;
  margin-top: 0;
}
.delivery-history .list li:first-child::before {
  content: "";
  width: 1px;
  height: 3000px;
  position: absolute;
  top: 8px;
  left: -20px;
  z-index: 1;
  background-color: #fff;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.delivery-history .list li:first-child::after {
  top: 8px;
}
.delivery-history .list li:last-child {
  display: block;
  margin-top: 29px;
}
.delivery-history .list li:last-child::before {
  content: "";
  width: 1px;
  height: 3000px;
  position: absolute;
  top: 10px;
  left: -20px;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.delivery-history .item::before {
  content: "";
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 10px;
  left: -22px;
  z-index: 1;
  background-color: #fff;
  border: 1px solid #8d8e8f;
  border-radius: 50%;
}
.delivery-history .item.current::after {
  content: "";
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: -29px;
  z-index: 1;
  background: url("../img/mypage/arrow-delivery.png") no-repeat;
  background-color: #1582ed;
  background-position: 5px 5px;
  background-size: 10px 11px;
  border-radius: 50%;
}
.delivery-history .item.current .title {
  color: #1582ed;
}
.delivery-history .item.start::before {
  border-color: #26479a;
}
.delivery-history .item.start::after {
  content: "";
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: -29px;
  z-index: 1;
  background: url("../img/mypage/arrow-delivery.png") no-repeat;
  background-color: #26479a;
  background-position: 5px 5px;
  background-size: 10px 11px;
  border-radius: 50%;
  opacity: 0;
}
.delivery-history .item.start .title {
  font-weight: 600;
  color: #26479a;
}
.delivery-history .item.end {
  position: relative;
}
.delivery-history .item.end::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: -30px;
  z-index: 2;
  background: url("../img/mypage/icon-check-complete.png") no-repeat;
  background-size: cover;
  border: 0;
}
.delivery-history .item.end .title {
  font-weight: 600;
  color: #0fcbcb;
}
.delivery-history .title {
  display: block;
  margin-bottom: 5px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.delivery-history .title .location + .status::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 14px 0 11px;
  background-color: #e1e3e8;
  vertical-align: middle;
  -webkit-transform: translateY(-0.06em);
  transform: translateY(-0.06em);
}
.delivery-history .address {
  display: block;
  margin-top: 2px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #8d8e8f;
}
.delivery-history .messenger {
  display: block;
  margin-top: 2px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #8d8e8f;
}
.delivery-history .date {
  display: block;
  margin-top: 2px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #8d8e8f;
}
.delivery-history .btn-more {
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(100% + 40px);
  height: 60px;
  position: absolute;
  top: 40px;
  left: -20px;
  z-index: 1;
  background-color: #fff;
  border-top: 1px dashed #e1e3e8;
  border-bottom: 1px dashed #e1e3e8;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.delivery-history .btn-more::after {
  content: "";
  display: block;
  margin-left: 6px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  display: inline-flex;
  width: 6px;
  height: 10px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -88px;
}

.history-list .list {
  padding-left: 25px;
}
.history-list .list li {
  position: relative;
}
.history-list .list li::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 10px;
  left: -13px;
  background-color: #e1e3e8;
}
.history-list .list li:first-child::after {
  top: 8px;
}
.history-list .list li:last-child::before {
  height: 16px;
}
.history-list .list li:not(:first-child) {
  padding-top: 10px;
}
.history-list .list li.brown::after {
  background-color: #cc8b3e;
}
.history-list .list li.brown .head .date {
  background-color: #cc8b3e;
}
.history-list .head {
  display: flex;
  align-items: center;
}
.history-list .head .date {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 20px;
  padding: 0 6px;
  margin-right: 6px;
  position: relative;
  background-color: #0fcbcb;
  border-radius: 3px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.03em;
}
.history-list .head .date::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: -15px;
  z-index: 1;
  background-color: #0fcbcb;
  border-radius: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.history-list .head .date::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  border-top: 3px solid transparent;
  border-right: 5px solid #0fcbcb;
  border-bottom: 3px solid transparent;
  border-left: 5px solid transparent;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.history-list .head .date.brown {
  background-color: #cc8b3e;
}
.history-list .head .date.brown::before {
  background-color: #cc8b3e;
}
.history-list .head .date.brown::after {
  border-right: 5px solid #cc8b3e;
}
.history-list .head .date.dark-brown {
  background-color: #693926;
}
.history-list .head .date.dark-brown::before {
  background-color: #693926;
}
.history-list .head .date.dark-brown::after {
  border-right: 5px solid #693926;
}
/* 24.11.15 베이커리 컬러 추가*/
.history-list .head .date.orange {
  background-color: #ff7e00;
}
.history-list .head .date.orange::before {
  background-color: #ff7e00;
}
.history-list .head .date.orange::after {
  border-right: 5px solid #ff7e00;
}
/* //24.11.15 베이커리 컬러 추가*/
.history-list .head .title {
  flex-grow: 1;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.history-list .head .btn-more-txt {
  flex-shrink: 0;
  margin-left: auto;
}
.history-list .menu:not(:first-child) {
  padding-bottom: 20px;
  margin-top: 10px;
}
.history-list .menu > a {
  display: block;
}
.history-list .menu > a > .wrap {
  display: flex;
}
.history-list .menu > .wrap {
  display: flex;
}
.history-list .menu .img {
  flex-shrink: 0;
  align-self: flex-start;
  width: 29.0322580645%;
  padding-top: 29.0322580645%;
  margin-right: 12px;
  overflow: hidden;
  position: relative;
}
.history-list .menu .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.history-list .menu .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: 29.0322580645%;
}
.history-list .menu .title {
  width: 100%;
  font-size: 1.3rem;
  font-weight: 400;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.history-list .menu .desc {
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-list .prod:not(:first-child) {
  margin-top: 10px;
}
.history-list .prod > a {
  display: block;
}
.history-list .prod > a > .wrap {
  display: flex;
}
.history-list .prod > .wrap {
  display: flex;
}
.history-list .prod .img {
  flex-shrink: 0;
  align-self: flex-start;
  width: 29.0322580645%;
  padding-top: 29.0322580645%;
  margin-right: 15px;
  overflow: hidden;
  position: relative;
}
.history-list .prod .img::before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #f0f1f4;
}
.history-list .prod .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.history-list .prod .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: 29.0322580645%;
}
.history-list .prod .title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.history-list .prod .price {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.history-list .prod .price .sale {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1e;
}
.history-list .prod .price .regular {
  margin-left: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-decoration: line-through;
}
.history-list + :is(.paragraph-1, .paragraph-2, .paragraph-3, .paragraph-4) {
  margin-top: 20px;
}

.notification-accordion li {
  border-top: 1px solid #f0f1f4;
}
.notification-accordion li:last-child {
  border-bottom: 1px solid #f0f1f4;
}
.notification-accordion .item {
  padding: 20px 24px;
}
.notification-accordion .item > .wrap {
  position: relative;
}
.notification-accordion .item .head {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px 0 0;
  margin-bottom: 6px;
}
.notification-accordion .item .head > *:not(:first-child) {
  padding-left: 11px;
  margin-left: 11px;
  position: relative;
}
.notification-accordion .item .head > *:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.notification-accordion .item .name {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.notification-accordion .item .date {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.notification-accordion .item .body {
  overflow: hidden;
  transition: height 0.3s;
}
.notification-accordion .item .body::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 4px;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.notification-accordion .item .body.is-open {
  height: auto;
}
.notification-accordion .item .body.is-open::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.notification-accordion .item .btn-readmore {
  width: 100%;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
}
.notification-accordion .item .content {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.notification-accordion .item .content b {
  font-weight: 600;
}
.notification-accordion .item .content a {
  color: #1582ed;
}
.notification-accordion .item .action {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 10px;
}

.order-history {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 20px;
  position: relative;
  left: -20px;
}
.order-history .item:not(:first-child) {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px dashed #e1e3e8;
}
.order-history .head {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.order-history .head > .row {
  display: flex;
  align-items: baseline;
}
.order-history .head .date {
  max-width: calc(100% - 70px);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.order-history .head .action {
  display: flex;
  margin-left: auto;
}
.order-history .head .info {
  display: flex;
  align-items: center;
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #8d8e8f;
}
.order-history .head .info:first-child {
  margin-top: 5px;
}
.order-history .head .info .tit + .con::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 6px 0 7px;
  background-color: #e1e3e8;
}

.menu-col {
  position: relative;
}
.menu-col.is-disabled .img {
  opacity: 0.2;
}
.menu-col.is-disabled .info {
  opacity: 0.2;
}
.menu-col.is-disabled .title {
  color: rgba(29, 29, 30, 0.2);
}
.menu-col > a {
  display: block;
  cursor: pointer;
}
.menu-col > a > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.menu-col > label input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.menu-col > label input[type=checkbox] ~ .wrap {
  display: block;
  position: relative;
}
.menu-col > label input[type=checkbox] ~ .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -50px -192px;
}
.menu-col > label input[type=checkbox]:checked ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -54px;
}
.menu-col > label input[type=checkbox][disabled] ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -154px;
}
.menu-col > label input[type=checkbox][disabled]:checked ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -129px;
}
.menu-col > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.menu-col .img {
  display: block;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.menu-col .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.menu-col .content {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}
.menu-col .title {
  width: 100%;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.menu-col .info {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  height: 0;
  padding: calc(100% - 5px) 5px 0 0;
  position: absolute;
  top: 0;
  right: 0;
}
.menu-col .util .check-only {
  position: absolute;
  top: 0;
  left: 0;
}

.menu-col-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.menu-col-list .menu-info {
  display: none;
}
.menu-col-list li {
  width: calc((100% - 20px) / 3);
}
.menu-col-list li.is-active .menu-info {
  display: block;
}
.menu-col-list li .menu-info {
  display: none;
  width: calc(300% + 20px);
  position: relative;
  left: 0;
}
.menu-col-list li:nth-child(3n-1) .menu-info {
  left: calc(-100% - 10px);
}
.menu-col-list li:nth-child(3n-1) .menu-info::after {
  left: 50%;
}
.menu-col-list li:nth-child(3n-3) .menu-info {
  left: calc(-200% - 20px);
}
.menu-col-list li:nth-child(3n-3) .menu-info::after {
  left: 83.33%;
}

.menu-info {
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  margin-top: 29px;
  background-color: #f6f7f8;
}
.menu-info::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 5px;
  left: 16.66%;
  border-right: 7px solid transparent;
  border-bottom: 14px solid #f6f7f8;
  border-left: 7px solid transparent;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.menu-info .item {
  padding: 20px 12px;
  background-color: #fff;
}
.menu-info .head {
  display: flex;
  align-items: flex-end;
  margin-top: 20px;
  margin-bottom: 6px;
}
.menu-info .head:first-child {
  margin-top: 0;
}
.menu-info .head + .table-layout, .menu-info .head + .check-table {
  margin-top: 0;
}
.menu-info .head .left {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
}
.menu-info .head .right {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
.menu-info .head .title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.menu-info .head .info {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.menu-info .table-layout {
  margin-top: 20px;
}
.menu-info .check-table {
  margin-top: 20px;
}

.button-menu {
  width: 100%;
  position: relative;
}
.button-menu.js-tabscroll .swiper {
  height: 35px;
}
.button-menu.is-fixed {
  height: 35px;
}
.button-menu.is-fixed > .wrap.swiper {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 4;
  background-color: #fff;
}
.button-menu.is-fixed .swiper-slide:first-child {
  margin-left: 20px;
}
.button-menu.is-fixed .swiper-slide:last-child {
  margin-right: 20px;
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .button-menu.is-fixed > .wrap.swiper {
    width: calc(524px - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin-left: -245px;
    overflow: hidden;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
.button-menu.js-floating.is-fixed .wrap {
  height: 40px;
}
.button-menu .wrap {
  width: 100%;
}
.button-menu .wrap.swiper {
  overflow: visible;
}
.button-menu .wrap.swiper .swiper-wrapper .swiper-slide {
  width: auto;
}
.button-menu .list {
  display: flex;
  width: 100%;
  z-index: auto;
}
.button-menu li:not(:first-child) {
  margin-left: 5px;
}
.button-menu li a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 10px;
  position: relative;
  z-index: 1;
  border: 1px solid #26479a;
  border-radius: 5px;
  font-size: 1.4rem;
  line-height: 40px;
  color: #26479a;
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s;
}
.button-menu li a.disabled {
  border-color: #b4b8c0;
  color: #b4b8c0;
}
.button-menu li.is-active a {
  z-index: 3;
  background-color: #26479a;
  border-color: #26479a;
  font-weight: 500;
  color: #fff;
}
.button-menu .action .play .btn-prev {
  width: 42px;
  height: 0;
  max-height: 0;
  padding-top: 42px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}
.button-menu .action .play .btn-next {
  width: 42px;
  height: 0;
  max-height: 0;
  padding-top: 42px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}

.common-fraction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.common-fraction .btn-prev {
  display: block;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.common-fraction .btn-prev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 7.5px;
  height: 11.5px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -55px;
}
.common-fraction .btn-next {
  display: block;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.common-fraction .btn-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 7.5px;
  height: 11.5px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -55px;
}
.common-fraction .num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.common-fraction .current {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1d1d1e;
}
.common-fraction .slash {
  font-size: 1.6rem;
  font-weight: 300;
  color: #1d1d1e;
}
.common-fraction .total {
  font-size: 1.6rem;
  font-weight: 300;
  color: #1d1d1e;
}

.common-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 100%;
}
.common-pagination .btn-prev {
  display: block;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.common-pagination .btn-prev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -117px;
}
.common-pagination .btn-prev.is-disabled {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.common-pagination .btn-prev.is-disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
.common-pagination .btn-next {
  display: block;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.common-pagination .btn-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -117px;
}
.common-pagination .btn-next.is-disabled {
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.common-pagination .btn-next.is-disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -146px -217px;
}
.common-pagination .paging-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  vertical-align: middle;
}
.common-pagination .paging-num a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0 2px;
  border-radius: 50%;
  font-size: 1.6rem;
  text-align: center;
}
.common-pagination .paging-num a:first-child {
  margin-left: 0;
}
.common-pagination .paging-num a:hover {
  color: #26479a;
  text-decoration: underline;
}
.common-pagination .paging-num a.on {
  background-color: #26479a;
  color: #fff;
}

.icon-menu {
  display: flex;
  flex-wrap: wrap;
}
.icon-menu.row {
  justify-content: space-between;
}
.icon-menu.row a {
  flex-direction: row;
}
.icon-menu.row li {
  width: auto;
}
.icon-menu.row li:nth-child(n+5) {
  margin-top: 0;
}
.icon-menu li {
  width: 25%;
}
.icon-menu li:nth-child(n+5) {
  margin-top: 20px;
}
.icon-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.icon-menu a::after {
  margin-bottom: 7px;
}
/* 24.06.21 햄버거 메뉴 0원 패키지 추가 */
.icon-menu .icon-calendar::after {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: 0px -45px;
}
.icon-menu .icon-click::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -90px 0px;
}
.icon-menu .icon-truck::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -135px -90px;
}
.icon-menu .icon-chef::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -45px -45px;
}
.icon-menu .icon-food::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: 0px -90px;
}
.icon-menu .icon-baby::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: 0px 0px;
}
.icon-menu .icon-event::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -90px -45px;
}
.icon-menu .icon-sale::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -135px -45px;
}
.icon-menu .icon-guide::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -90px -90px;
}
.icon-menu .icon-manager::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -135px 0px;
}
.icon-menu .icon-giftcard::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -45px -90px;
}
.icon-menu .icon-bstory::before {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -45px 0px;
}
.icon-menu .icon-zero::after {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -180px 0px;
}
/* //24.06.21 햄버거 메뉴 0원 패키지 추가 */
/* 24.09.13 햄버거 메뉴 이유식 패키지 추가 */
.icon-menu .icon-babyfood::after {
  content: "";
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/menu.png?v=2);
  background-size: 220px 130px;
  background-position: -180px -45px;
}
/* //24.09.13 햄버거 메뉴 이유식 패키지 추가 */
.icon-menu .icon-benefit {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../img/event/icon-benefit.png") no-repeat;
  background-size: cover;
}
.icon-menu .icon-gostop {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../img/event/icon-gostop.png") no-repeat;
  background-size: cover;
}
/* 24.12.23 이벤트/혜택 아이키움뱃지 추가 */
.icon-menu .icon-badge {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../img/event/icon-badge.png") no-repeat;
  background-size: cover;
}
/* //24.12.23 이벤트/혜택 아이키움뱃지 추가 */
.icon-menu .icon-crown {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../img/event/icon-crown.png") no-repeat;
  background-size: cover;
}

.tab-menu {
  box-sizing: border-box;
  width: 100%;
  position: relative;
}
.tab-menu.full .list li {
  flex: 1;
}
.tab-menu.js-tabscroll .swiper {
  height: 50px;
}
.tab-menu.is-fixed {
  height: 50px;
}
.tab-menu.is-fixed > .wrap.swiper {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 4;
  background-color: #fff;
}
.tab-menu.is-fixed .swiper-slide:first-child {
  margin-left: 20px;
}
.tab-menu.is-fixed .swiper-slide:last-child {
  margin-right: 20px;
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .tab-menu.is-fixed > .wrap.swiper {
    width: calc(524px - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin-left: -245px;
    overflow: hidden;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
.tab-menu .wrap {
  width: 100%;
  position: relative;
}
.tab-menu .wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #e1e3e8;
}
.tab-menu .wrap.swiper {
  overflow-x: hidden;
  overflow-y: visible;
}
.tab-menu .wrap.swiper::after {
  width: calc(100% + 40px);
  left: -20px;
}
.tab-menu .wrap.swiper .swiper-wrapper .swiper-slide {
  width: auto;
}
.tab-menu .wrap.swiper .swiper-wrapper .swiper-slide.is-active {
  z-index: 3;
}
.tab-menu .list {
  display: flex;
  width: 100%;
  z-index: 3;
}
.tab-menu li {
  overflow: hidden;
  position: relative;
}
.tab-menu li::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 5;
  background-color: #1d1d1e;
}
.tab-menu li a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  z-index: 1;
  border-right: 0;
  border-bottom: 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 40px;
  color: #8d8e8f;
  text-align: center;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: all 0.3s;
}
.tab-menu li.is-active::after {
  bottom: 0;
}
.tab-menu li.is-active a {
  padding: 0 20px;
  z-index: 3;
  font-weight: 600;
  color: #1d1d1e;
}
.tab-menu .action .play .btn-prev {
  width: 42px;
  height: 0;
  max-height: 0;
  padding-top: 42px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}
.tab-menu .action .play .btn-next {
  width: 42px;
  height: 0;
  max-height: 0;
  padding-top: 42px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}
.tab-menu.center .list {
  justify-content: center;
}
.tab-menu.right .list {
  justify-content: flex-end;
}

.tab-menu2 {
  box-sizing: border-box;
  width: 100%;
  position: relative;
}
.tab-showhide .tab-menu2.full .wrap::after {
  width: calc(100% + 40px);
  left: -20px;
}
.tab-menu2.full .list {
  justify-content: center;
}
.tab-menu2.js-tabscroll .swiper {
  height: 50px;
}
.tab-menu2.is-fixed {
  height: 50px;
}
.tab-menu2.is-fixed > .wrap.swiper {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 4;
  background-color: #fff;
}
.tab-menu2.is-fixed .swiper-slide:first-child {
  margin-left: 20px;
}
.tab-menu2.is-fixed .swiper-slide:last-child {
  margin-right: 20px;
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .tab-menu2.is-fixed > .wrap.swiper {
    width: calc(524px - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin-left: -245px;
    overflow: hidden;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
.tab-menu2 .wrap {
  width: 100%;
  position: relative;
}
.tab-menu2 .wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #e1e3e8;
}
.tab-menu2 .wrap.swiper {
  overflow: visible;
}
.tab-menu2 .wrap.swiper::after {
  width: calc(100% + 40px);
  left: -20px;
}
.tab-menu2 .wrap.swiper .swiper-wrapper .swiper-slide {
  width: auto;
}
.tab-menu2 .wrap.swiper .swiper-wrapper .swiper-slide.is-active {
  z-index: 3;
}
.tab-menu2 .list {
  display: flex;
  width: 100%;
  z-index: 3;
}
.tab-menu2 li {
  overflow: hidden;
  position: relative;
}
.tab-menu2 li a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 15px;
  z-index: 1;
  border-right: 0;
  border-bottom: 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 40px;
  color: #8d8e8f;
  text-align: center;
  white-space: nowrap;
}
.tab-menu2 li a .txt {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding-top: 3px;
  position: relative;
  letter-spacing: -0.03em;
}
.tab-menu2 li a .txt::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 5;
  background-color: #1d1d1e;
}
.tab-menu2 li.is-active a {
  z-index: 3;
  font-weight: 600;
  color: #1d1d1e;
}
.tab-menu2 li.is-active a .txt::after {
  bottom: 0;
}
.tab-menu2 .action .play .btn-prev {
  width: 42px;
  height: 0;
  max-height: 0;
  padding-top: 42px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}
.tab-menu2 .action .play .btn-next {
  width: 42px;
  height: 0;
  max-height: 0;
  padding-top: 42px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}

.order-bill {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
  background-color: #fff;
  border-top: 1px solid #e1e3e8;
}
.order-bill .prod-order-list {
  margin-top: 10px;
}
.order-bill .prod-order .img {
  width: 29.5081967213%;
  padding-top: 29.5081967213%;
}
.order-bill .prod-order .content {
  width: calc(70.4918032787% - 15px);
}
.order-bill .item {
  padding: 15px 0 15px;
}
.order-bill .item + .item {
  border-top: 1px solid #e1e3e8;
}
.order-bill .item.total .row {
  display: flex;
  align-items: center;
}
.order-bill .item.total .row > .title {
  display: flex;
  align-items: center;
}
.order-bill .item.total .row > .content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.order-bill .item.total .row > .content .num {
  margin-right: 2px;
  font-size: 2.8rem;
  font-weight: 600;
  -webkit-transform: translate(0);
  transform: translate(0);
}
.order-bill .item .row {
  display: table;
  width: 100%;
}
.order-bill .item .row:not(:first-child) {
  margin-top: 10px;
}
.order-bill .item .row > dd {
  width: 100%;
}
.order-bill .item .row > .title {
  display: table-cell;
  width: 120px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-bill .item .row > .title + .content, .order-bill .item .row > .title + .text {
  width: calc(100% - 120px);
}
.order-bill .item .row > .title.top {
  vertical-align: top;
}
.order-bill .item .row > .title .count {
  margin-left: 10px;
  font-size: 1.8rem;
  letter-spacing: -0.03em;
}
.order-bill .item .row > .text {
  display: table-cell;
  width: 100%;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-bill .item .row > .content {
  display: table-cell;
  width: 100%;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: right;
}
.order-bill .item .row > .content.mint {
  color: #0fcbcb;
}
.order-bill .item .row > .content.pink {
  color: #ff526d;
}
.order-bill .item .row > .content .txt {
  margin-right: 15px;
  color: #1d1d1e;
}
.order-bill .item .row > .content .num {
  display: inline-block;
  margin-right: 1px;
  font-size: 2rem;
  letter-spacing: -0.03em;
  vertical-align: middle;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.order-info {
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
}
.order-info .order-bill {
  padding: 0;
  border-top: 0;
}
.order-info .order-bill .item {
  padding: 15px 15px;
}
.order-info .head {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: rgba(21, 130, 237, 0.1);
}
.order-info .head:not(:first-child) {
  margin-top: 15px;
}
.order-info .head + .prod-order-list {
  margin-top: 10px;
}
.order-info .head .title {
  flex-grow: 1;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-info .head .action {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
.order-info .head .action .btn-more-txt {
  margin-right: -10px;
}
.order-info .head .status {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1582ed;
}

.countdown {
  display: flex;
  gap: 2px;
}
.countdown .hour,
.countdown .minute,
.countdown .second {
  display: flex;
  gap: 2px;
}
.countdown .hour:not(.hour),
.countdown .minute:not(.hour),
.countdown .second:not(.hour) {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}
.countdown .hour:not(.hour)::before,
.countdown .minute:not(.hour)::before,
.countdown .second:not(.hour)::before {
  content: ":";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: 2.4rem;
  font-weight: 500;
  color: #1d1d1e;
}
.countdown .number {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 30px;
  padding: 0 4px;
  background-color: #1d1d1e;
  border-radius: 4px;
  font-size: 2.4rem;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.customer-center {
  width: calc(100% + 40px);
  padding: 22px 10px;
  position: relative;
  left: -20px;
  background-color: #f6f7f8;
  text-align: center;
}
.customer-center .title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.customer-center .title .tel {
  display: inline-flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: #26479a;
  vertical-align: baseline;
}
.customer-center .title .tel::before {
  content: "";
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-call.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
  margin: 0 2px 0 2px;
  vertical-align: text-top;
}
.customer-center .content {
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.customer-center .content + .content {
  margin-top: 0;
}

.delivery-address {
  box-sizing: border-box;
  padding: 20px 4px;
  position: relative;
}
.delivery-address + .delivery-address {
  border-top: 1px dashed #e1e3e8;
}
.form-layout .delivery-address {
  padding: 0;
}
.delivery-address label > dl .title {
  padding-right: 25px;
}
.delivery-address label ~ .util {
  position: static;
}
.delivery-address label ~ .util .btn-group {
  margin-top: 10px;
}
.delivery-address dl .title {
  padding-right: 90px;
  margin-bottom: 8px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #1d1d1e;
}
.delivery-address dl .title .str {
  color: #1582ed;
  vertical-align: text-top;
}
.delivery-address dl .content {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  word-break: keep-all;
}
.delivery-address dl .content:last-child {
  margin-bottom: 0;
}
.delivery-address dl .address {
  font-size: 1.3rem;
  color: #1d1d1e;
}
.delivery-address dl .address .num {
  margin-right: 2px;
  font-weight: 600;
  vertical-align: baseline;
}
.delivery-address dl .explain {
  width: 100%;
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-address dl .attention {
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1582ed;
}
.delivery-address dl .attention.error {
  color: #ed1515;
}
.delivery-address dl .tel {
  margin-top: 10px;
  font-size: 1.3rem;
  color: #1d1d1e;
}
.delivery-address .util {
  position: absolute;
  top: 20px;
  right: 0;
}
.delivery-address .util .select {
  position: absolute;
  top: calc(20px + 0.65em);
  right: 0;
  font-size: 1.8rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.delivery-address .util .btn-group {
  gap: 5px;
}
.delivery-address .util .btn-group > button {
  min-width: 41px;
  height: 24px;
  border-color: #8d8e8f;
  color: #8d8e8f;
}
.delivery-address .util .btn-tel {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  white-space: nowrap;
}
.delivery-address .util .btn-tel::after {
  content: "";
  margin: 0 4px 0 5px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-call-2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.delivery-address .util .btn-tel .txt {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1582ed;
}

.delivery-location {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: calc(100% + 40px);
  padding: 7px 20px;
  position: relative;
  left: -20px;
  border-top: 1px solid #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
}
.delivery-location > .wrap {
  display: flex;
  flex-grow: 1;
  align-items: center;
  width: calc(100% - 100px);
}
.delivery-location .txt {
  flex-grow: 1;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-location .txt::before {
  content: "";
  margin-right: 5px;
  vertical-align: middle;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  display: inline-flex;
  width: 13px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -70px -238px;
}
.delivery-location .btn-group {
  display: flex;
  justify-content: flex-end;
  margin-left: 4px;
}
.delivery-location .result {
  flex-shrink: 0;
  width: 100px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1582ed;
  text-align: right;
}
.delivery-location .result + .wrap {
  width: calc(100% - 100px);
}
.delivery-location .result .error {
  color: #ed1515;
}

.error-info {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--vh, 1vh);
  padding: 50px;
}
.error-info > .wrap {
  width: 100%;
  min-height: 100%;
}
.error-info .code {
  margin-bottom: 5px;
  font-size: 9rem;
  font-weight: 800;
  line-height: 1.2;
  color: #26479a;
  text-align: center;
  letter-spacing: 0.05em;
}
.error-info .title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.03em;
}
.error-info .desc {
  margin-top: 5px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
}
.error-info .desc b {
  margin: 0 -2px;
}
.error-info .btn-group {
  margin-top: 34px;
}

.grade-star {
  display: block;
  width: 83px;
  height: 15px;
  position: relative;
  background: url("../img/common/grade-star.png") no-repeat;
  background-position: left center;
  background-size: 83px 15px;
}
.grade-star .fill {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/grade-star-active.png") no-repeat;
  background-position: left center;
  background-size: 83px 15px;
}

.slider-star {
  display: flex;
  align-items: flex-end;
}
.slider-star .bar {
  display: block;
  width: 227px;
  height: 40px;
}
.slider-star .slider {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/common/grade-star-large.png") no-repeat;
  background-position: left center;
  background-size: 227px 40px;
  border: 0;
}
.slider-star .slider .ui-slider-range {
  background: url("../img/common/grade-star-large-active.png") no-repeat;
  background-color: transparent;
  background-position: left center;
  background-size: 227px 40px;
}
.slider-star .slider .ui-slider-handle {
  width: 40px;
  height: 40px;
  margin-left: -40px;
  top: 0;
  background-color: transparent;
  border: 0;
}
.slider-star .slider .ui-slider-handle:focus {
  outline: 0;
}
.slider-star .result {
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-size: 2rem;
  font-weight: 600;
  color: #0fcbcb;
}

.guide-box {
  padding: 20px;
  background-color: #f6f7f8;
  border-radius: 5px;
}
.guide-box + .guide-box {
  margin-top: 5px;
}
.guide-box .comment-list {
  padding: 0;
  margin-top: 4px;
}
.guide-box .comment-list li {
  padding-left: 14px;
}
.guide-box .comment-list li::after {
  left: 7px;
}
.guide-box .mark-essen {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ed1515;
  vertical-align: middle;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
}
.guide-box > .title {
  display: flex;
  flex-wrap: wrap;
}
.guide-box > .title + .content, .guide-box > .title + .list {
  margin-top: 8px;
}
.guide-box > .title .icon {
  flex-shrink: 0;
  align-self: baseline;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  position: relative;
  top: 0.65em;
  background-color: #1582ed;
  border-radius: 50%;
  font-size: 1.6rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.guide-box > .title .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.guide-box > .title .icon.microwave::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: -46px -23px;
}
.guide-box > .title .icon.pot::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: -23px -46px;
}
.guide-box > .title .icon.cold::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: -23px 0px;
}
.guide-box > .title .icon.saliva::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: -46px -46px;
}
.guide-box > .title .icon.frozen::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: -23px -23px;
}
.guide-box > .title .icon.pan::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: 0px -46px;
}
.guide-box > .title .icon + .tit {
  width: calc(100% - 34px);
}
.guide-box > .title .icon + .tit + .con {
  width: calc(100% - 34px);
  margin-left: 34px;
}
.guide-box > .title .tit {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.guide-box > .title .con {
  width: 100%;
  margin-top: 2px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.guide-box .list {
  box-sizing: border-box;
  width: calc(100% + 20px);
  padding: 0 10px;
  position: relative;
  left: -10px;
}
.guide-box .list + .list {
  padding-top: 20px;
  margin-top: 15px;
  border-top: 1px dashed #e1e3e8;
}
.guide-box .list .title {
  margin-bottom: 4px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.guide-box .list .title:not(:first-child) {
  margin-top: 10px;
}
.guide-box .list .title .icon-baby {
  margin-right: 5px;
  vertical-align: middle;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
  display: inline-flex;
  width: 17px;
  height: 0;
  max-height: 0;
  padding-top: 17px;
  overflow: hidden;
  background-image: url("../img/order/icon-baby.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px auto;
}
.guide-box .list .title .icon-child {
  margin-right: 5px;
  vertical-align: middle;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
  display: inline-flex;
  width: 17px;
  height: 0;
  max-height: 0;
  padding-top: 17px;
  overflow: hidden;
  background-image: url("../img/order/icon-child.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px auto;
}
.guide-box .list .title .icon-qa {
  margin-right: 5px;
  vertical-align: middle;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
  display: inline-flex;
  width: 17px;
  height: 0;
  max-height: 0;
  padding-top: 17px;
  overflow: hidden;
  background-image: url("../img/order/icon-qa.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px auto;
}
.guide-box .list .content p {
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.guide-box .list .content ol,
.guide-box .list .content ul {
  margin-top: 5px;
}
.guide-box .list .content ol li,
.guide-box .list .content ul li {
  padding-left: 15px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  text-indent: -10px;
}
.guide-box .list .content .comment {
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
}
.guide-box .box-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -10px;
}
.guide-box .box-list > .item {
  box-sizing: border-box;
  width: 50%;
  padding: 67px 4px 36px;
  position: relative;
  text-align: center;
}
.guide-box .box-list > .item:nth-child(n+3) {
  border-top: 1px solid #e1e3e8;
}
.guide-box .box-list > .item:nth-child(2n+1) {
  border-right: 1px solid #e1e3e8;
}
.guide-box .box-list > .item .title {
  margin-bottom: 3px;
  font-size: 1.4rem;
  font-weight: 600;
}
.guide-box .box-list > .item .title .icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  position: absolute;
  top: 26px;
  left: 50%;
  background-color: #1582ed;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.guide-box .box-list > .item .title .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.guide-box .box-list > .item .title .icon.calendar::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: 0px 0px;
}
.guide-box .box-list > .item .title .icon.haccp::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: -46px 0px;
}
.guide-box .box-list > .item .title .icon.cook::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: 0px -23px;
}
.guide-box .box-list > .item .title .icon.windmill::after {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url(../img/sprites/product.png);
  background-size: 87px 64px;
  background-position: -69px 0px;
}
.guide-box .notice {
  padding-left: 20px;
}
.guide-box .notice .title {
  display: inline-block;
  margin-bottom: 4px;
  word-break: keep-all;
}
.guide-box .notice .title::before {
  content: "";
  display: inline-block;
  margin-right: 6px;
  margin-left: -20px;
  display: inline-flex;
  width: 11.5px;
  height: 12px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -121.5px -238px;
}
.guide-box .notice .title ~ .title::before {
  content: none;
}
.guide-box .notice .desc {
  display: inline-block;
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.guide-box .answer {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  left: -10px;
}
.guide-box .answer .icon-writer {
  width: 24px;
  height: 24px;
  position: relative;
  top: 0.65em;
  background: url("../img/common/thumb-bebecook.png") no-repeat;
  background-size: cover;
  font-size: 1.4rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.guide-box .answer .icon-writer ~ .tit {
  width: calc(100% - 38px);
  margin-left: auto;
}
.guide-box .answer .icon-writer ~ .con {
  width: calc(100% - 38px);
  margin-left: auto;
}
.guide-box .answer .comment-attention {
  width: calc(100% - 38px);
  margin-left: auto;
}
.guide-box .answer .tit {
  width: 100%;
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.guide-box .answer .con {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 16px;
  line-height: 1.4;
  color: #1d1d1e;
}
.agreement-list + .guide-box {
  margin-top: 20px;
}
.guide-box .btn-group {
  margin-top: 10px;
  background-color: transparent;
}
.guide-box .btn-group .btn {
  background-color: transparent;
}

.icon-boxmenu {
  display: flex;
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  border-top: 1px solid #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
}
.icon-boxmenu li {
  flex: 1;
}
.icon-boxmenu li:not(:first-child) .link {
  border-left: 1px solid #e1e3e8;
}
.icon-boxmenu li .link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
}
.icon-boxmenu li .link.step::before {
  content: "";
  margin-right: 13px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-step.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu li .link.menu::before {
  content: "";
  margin-right: 13px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-menu.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu li .link.baby::before {
  content: "";
  margin-right: 13px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-baby.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu li .link.child::before {
  content: "";
  margin-right: 13px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-child.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu li .link.point::before {
  content: "";
  margin-right: 8px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-point.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.icon-boxmenu li .link.card::before {
  content: "";
  margin-right: 8px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-card.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.icon-boxmenu li .link.delivery::before {
  content: "";
  margin-right: 8px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-delivery.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}

.guide-qna {
  width: 100%;
  padding: 30px 20px;
  margin-top: 40px;
  margin-bottom: 30px;
  position: relative;
  left: -20px;
  background-color: rgba(21, 130, 237, 0.1);
}
.guide-qna:first-child {
  margin-top: 0;
}
.guide-qna .title {
  font-size: 2rem;
  font-weight: 300;
  text-align: center;
  letter-spacing: -0.03em;
}
.guide-qna .title + .content {
  margin-top: 15px;
}
.guide-qna .title + .form-content {
  margin-top: 15px;
}
.guide-qna .title + .img-box {
  margin-top: 15px;
}
.guide-qna .title .desc {
  display: block;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.guide-qna .content {
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 5px;
}
.guide-qna .content .tit {
  display: block;
  padding-left: 30px;
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.guide-qna .content .tit .icon-qna {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 0.65em;
  left: 0;
  background: url("../img/common/icon-qna.png") center no-repeat;
  background-size: cover;
  font-size: 1.8rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.guide-qna .content .tit + .con {
  margin-top: 5px;
}
.guide-qna .content .con .list {
  padding-right: 5px;
  padding-left: 30px;
}
.guide-qna .content .con .list > li {
  position: relative;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.guide-qna .content .con .list > li + li {
  margin-top: 5px;
}
.guide-qna .content .con .list > li::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 0.65em;
  left: -20px;
  background: url("../img/common/icon-check-black.png") no-repeat center;
  background-size: cover;
  font-size: 1.4rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.guide-qna .content .img {
  margin-top: 10px;
}
.guide-qna .content .img img {
  width: 100%;
  vertical-align: top;
}
.guide-qna .img-box + .bullet-list-2 {
  margin-top: 15px;
}
.guide-qna .visual {
  position: absolute;
  right: 25px;
  bottom: 15px;
}
.guide-qna .visual ~ .content .con {
  padding-right: 80px;
}
.guide-qna .input-search-clear .text[readonly] {
  background-color: #fff;
}
.guide-qna .bullet-list-1,
.guide-qna .bullet-list-2,
.guide-qna .bullet-list-3,
.guide-qna .bullet-list-4 {
  margin-top: 10px;
}

.txt-boxmenu {
  display: flex;
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  background-color: #fff;
  border-top: 1px solid #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
}
.txt-boxmenu li {
  flex: 1;
  position: relative;
}
.txt-boxmenu li:not(:first-child)::after {
  content: "";
  width: 1px;
  height: calc(100% - 30px);
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.txt-boxmenu li .link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
}

.icon-boxmenu {
  display: flex;
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  border-top: 1px solid #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
}
.icon-boxmenu li {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 15px 10px;
}
.icon-boxmenu li:not(:first-child) {
  border-left: 1px solid #e1e3e8;
}
.icon-boxmenu li a {
  box-sizing: border-box;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  margin: -15px -10px;
}
.icon-boxmenu li a > *:not(.txt) {
  flex-shrink: 0;
  align-self: flex-start;
}
.icon-boxmenu li > *:not(a, .txt) {
  flex-shrink: 0;
  align-self: flex-start;
}
.icon-boxmenu .txt {
  flex-grow: 1;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1d1d1e;
  word-break: keep-all;
}
.icon-boxmenu .txt small {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 400;
  word-break: break-all;
}
.icon-boxmenu .icon-guide-step {
  margin-right: 10px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-step.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu .icon-guide-menu {
  margin-right: 10px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-menu.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu .icon-guide-baby {
  margin-right: 10px;
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-baby.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px auto;
}
.icon-boxmenu .icon-guide-child {
  margin-right: 10px;
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-child.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px auto;
}
.icon-boxmenu .icon-guide-manage {
  margin-right: 10px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-manage.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu .icon-guide-schedule {
  margin-right: 10px;
  display: inline-flex;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-schedule.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
}
.icon-boxmenu .icon-guide-point {
  margin-right: 10px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-point.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.icon-boxmenu .icon-guide-card {
  margin-right: 10px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-card.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.icon-boxmenu .icon-guide-delivery {
  margin-right: 10px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-delivery.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.icon-boxmenu .icon-guide-topping {
  margin-right: 10px;
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  background-image: url("../img/common/icon-guide-topping.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px auto;
}
.icon-boxmenu .icon-consult-kakao {
  margin-right: 8px;
  display: inline-flex;
  width: 38px;
  height: 0;
  max-height: 0;
  padding-top: 38px;
  overflow: hidden;
  background-image: url("../img/common/icon-consult-kakao.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 36px auto;
}
.icon-boxmenu .icon-consult-menu {
  margin-right: 8px;
  display: inline-flex;
  width: 39px;
  height: 0;
  max-height: 0;
  padding-top: 39px;
  overflow: hidden;
  background-image: url("../img/common/icon-consult-menu.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 38px auto;
}

.icon-blue {
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.icon-blue::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url("../img/common/icon-blue.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.icon-blue.white::after {
  background-image: url("../img/common/icon-blue-white.png");
}
.icon-blue.small {
  width: 17px;
  padding-top: 17px;
}
.icon-blue.small::after {
  width: 17px;
  height: 17px;
}
.icon-blue.large {
  width: 80px;
  padding-top: 80px;
}
.icon-blue.large::after {
  width: 80px;
  height: 80px;
}

.icon-silver {
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.icon-silver::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url("../img/common/icon-silver.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.icon-silver.white::after {
  background-image: url("../img/common/icon-silver-white.png");
}
.icon-silver.small {
  width: 17px;
  padding-top: 17px;
}
.icon-silver.small::after {
  width: 17px;
  height: 17px;
}
.icon-silver.large {
  width: 80px;
  padding-top: 80px;
}
.icon-silver.large::after {
  width: 80px;
  height: 80px;
}

.icon-gold {
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.icon-gold::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url("../img/common/icon-gold.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.icon-gold.white::after {
  background-image: url("../img/common/icon-gold-white.png");
}
.icon-gold.small {
  width: 17px;
  padding-top: 17px;
}
.icon-gold.small::after {
  width: 17px;
  height: 17px;
}
.icon-gold.large {
  width: 80px;
  padding-top: 80px;
}
.icon-gold.large::after {
  width: 80px;
  height: 80px;
}

.icon-vip {
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.icon-vip::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url("../img/common/icon-vip.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.icon-vip.white::after {
  background-image: url("../img/common/icon-vip-white.png");
}
.icon-vip.small {
  width: 17px;
  padding-top: 17px;
}
.icon-vip.small::after {
  width: 17px;
  height: 17px;
}
.icon-vip.large {
  width: 80px;
  padding-top: 80px;
}
.icon-vip.large::after {
  width: 80px;
  height: 80px;
}

.icon-vvip {
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.icon-vvip::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url("../img/common/icon-vvip.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.icon-vvip.white::after {
  background-image: url("../img/common/icon-vvip-white.png");
}
.icon-vvip.small {
  width: 17px;
  padding-top: 17px;
}
.icon-vvip.small::after {
  width: 17px;
  height: 17px;
}
.icon-vvip.large {
  width: 80px;
  padding-top: 80px;
}
.icon-vvip.large::after {
  width: 80px;
  height: 80px;
}

.icon-new {
  background-color: #ffce31;
  border-radius: 50%;
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/common/icon-new.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 9px auto;
}

.icon-best {
  background-color: #1582ed;
  border-radius: 50%;
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/common/icon-best.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 8px auto;
}

.icon-spicy {
  background-color: #ff6767;
  border-radius: 50%;
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/common/icon-spicy.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 11px auto;
}

.icon-fe {
  background-color: #ff6f31;
  border-radius: 50%;
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/common/icon-fe.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 13px auto;
}

.icon-zn {
  background-color: #50dfff;
  border-radius: 50%;
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/common/icon-zn.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px auto;
}

.icon-noti {
  display: inline-block;
  margin-right: 8px;
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/common/icon-noti.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px auto;
}

.img-box {
  margin-top: 15px;
}
.common-container .hide:first-child + .img-box {
  margin-top: 0;
}
.img-box:first-child {
  margin-top: 0;
}
.img-box.full {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.img-box a {
  display: block;
}
.img-box img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.img-box + .bullet-list-1, .img-box + .bullet-list-2, .img-box + .bullet-list-3, .img-box + .bullet-list-4 {
  margin-top: 10px;
}
.step-info + .img-box {
  margin-top: 20px;
}

.img-box-scroll {
  margin-top: 15px;
  position: relative;
}
.common-container .hide:first-child + .img-box-scroll {
  margin-top: 0;
}
.img-box-scroll:first-child {
  margin-top: 0;
}
.img-box-scroll.full {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.img-box-scroll .img-box {
  margin-top: 0;
}
.img-box-scroll .swiper {
  overflow: visible;
}
.img-box-scroll .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}
.img-box-scroll .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.img-box-scroll .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}

.col-img {
  width: calc(100% + 40px);
  margin: 0;
  position: relative;
  left: -20px;
}
.col-img img {
  width: 100%;
  height: auto;
  vertical-align: top;
  -o-object-fit: contain;
  object-fit: contain;
}
.col-img a {
  display: block;
}
.col-img a.btn-play {
  display: block;
  width: 100%;
  position: relative;
}
.col-img a.btn-play::before {
  content: none;
}
.col-img a.btn-play::after {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  background: url("../img/bstory/btn-play-video.png") no-repeat;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.col-img a ~ span {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.info-box {
  padding: 20px 30px;
  background-color: rgba(21, 130, 237, 0.1);
  border-radius: 5px;
}
.info-box .icon-pot {
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-left: 2px;
  background: url("../img/common/icon-pot.png") no-repeat;
  background-size: cover;
  vertical-align: top;
}
.info-box .title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1d1d1e;
}
.info-box .title + .content {
  margin-top: 5px;
}
.info-box .content {
  padding-left: 10px;
  margin-top: -1px;
  position: relative;
  font-size: 1.3rem;
  font-weight: 400;
  color: #1d1d1e;
  letter-spacing: 0;
}
.info-box .content::before {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 8px;
  left: 2px;
  background-color: #1d1d1e;
}

.info-intake {
  padding: 20px;
  background-color: #f6f7f8;
  border-radius: 5px;
}
.info-intake + .history-list {
  margin-top: 15px;
}
.info-intake .item {
  display: flex;
}
.info-intake .item:not(:first-child) {
  margin-top: 5px;
}
.info-intake .title {
  width: 100px;
  margin-right: 8px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}
.info-intake .title + .content {
  position: relative;
}
.info-intake .title + .content::before {
  content: "";
  width: 1px;
  height: 11px;
  position: absolute;
  top: 0.65em;
  left: -8px;
  background-color: #d9d9d9;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.info-intake .content {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .info-intake .title {
    width: 116px;
  }
}

.list-filter {
  display: inline-flex;
  position: relative;
  z-index: 2;
}
.list-filter.is-active .btn-open::after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.list-filter.is-active .content {
  height: auto;
  max-height: 300px;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.15);
}
.list-filter.is-active .list {
  visibility: visible;
}
.list-filter .btn-open {
  padding: 6px 14px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #1d1d1e;
}
.list-filter .btn-open::after {
  content: "";
  position: absolute;
  top: calc(0.7em + 6px - 2px);
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  display: inline-flex;
  width: 7px;
  height: 4px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -260px -111.5px;
}
.list-filter .content {
  height: 0;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 30px;
  right: 0;
  background-color: #fff;
  border-radius: 5px;
  transition: max-height 0.3s;
}
.list-filter .list {
  display: block;
  padding: 5px;
  visibility: hidden;
}
.list-filter .item {
  display: block;
  min-width: 100px;
  padding: 6px 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: left;
  white-space: nowrap;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 130;
  background-color: transparent;
  transition: background 0.3s, visibility 0.3s;
  visibility: hidden;
}
.loading-indicator .content {
  opacity: 0;
  transition: opacity 0.3s;
}
.loading-indicator .dot-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.loading-indicator .dot-box .dot {
  width: 6px;
  height: 6px;
  background-color: #1582ed;
  border-radius: 5px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: loadingAni 1.6s infinite linear;
  animation: loadingAni 1.6s infinite linear;
}
@-webkit-keyframes loadingAni {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes loadingAni {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.loading-indicator .dot-box .dot:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.loading-indicator .dot-box .dot:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.loading-indicator .dot-box .dot:nth-child(4) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.loading-indicator.is-active {
  background-color: #fff;
  transition: background 0.01s, visibility 0.01s;
  visibility: visible;
}
.loading-indicator.is-active .content {
  opacity: 1;
  transition: opacity 0.9s;
}
@media screen and (min-width: 768px) {
  .loading-indicator .dot-box {
    gap: 16px;
  }
  .loading-indicator .dot-box .dot {
    width: 8px;
    height: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .loading-indicator {
    width: 524px;
    left: calc((100% - 1014px) / 2);
  }
}

.noti-box {
  padding: 30px;
  margin-bottom: 30px;
  background-color: rgba(21, 130, 237, 0.1);
  border-radius: 10px;
  text-align: center;
}
.noti-box .title {
  margin-bottom: 10px;
}
.noti-box .title .icon-noti {
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-noti.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.noti-box .desc {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.noti-box .btn-group {
  margin-top: 10px;
  background-color: transparent;
}

.read-more .content {
  overflow: hidden;
  transition: height 0.3s;
}

.result-info .visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
.result-info .visual .character-group-type3 {
  width: 209px;
}
.result-info .visual + .title {
  margin-top: 10px;
}
.result-info .visual + .sub-title {
  margin-top: 10px;
}
.result-info .quote {
  margin-bottom: 5px;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.result-info .title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.result-info .sub-title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.result-info .sub-title .comment {
  margin-top: 5px;
}
.result-info .greeting {
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.result-info .desc {
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  color: #78787d;
  text-align: center;
  letter-spacing: -0.03em;
}
.result-info .comment {
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.4;
  color: #78787d;
  text-align: center;
}
.result-info .result {
  margin-top: 10px;
  text-align: center;
}
.result-info .result strong {
  position: relative;
  font-size: 2rem;
  font-weight: 600;
  color: #1582ed;
  letter-spacing: -0.04em;
}
.result-info .result strong::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #1582ed;
}
.result-info .btn-group {
  margin-top: 20px;
}

.select-customer {
  position: relative;
  z-index: 10;
}
.select-customer.is-active .btn-open::after {
  display: block;
}
.select-customer.is-active.is-open .btn-open::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.select-customer.is-active.is-open .content {
  height: auto;
  max-height: 300px;
  overflow: hidden;
}
.select-customer .btn-open {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 2rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.025em;
}
@media screen and (min-width: 768px) {
  .select-customer .btn-open {
    font-size: 1.8rem;
  }
}
.select-customer .btn-open::after {
  content: "";
  display: none;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  background: url("../img/main/arrow-select-customer.png") no-repeat;
  background-position: center center;
  background-size: 12px auto;
  border: 1px solid #8d8e8f;
  border-radius: 50%;
}
.select-customer .content {
  height: 0;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 5;
  transition: max-height 0.6s;
}
.select-customer .list {
  padding: 10px 10px;
  background-color: #f6f7f8;
  border-radius: 5px;
}
.select-customer .item {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
}
.select-customer .img {
  display: block;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.select-customer .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.select-customer .tit {
  font-size: 2rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .select-customer .tit {
    font-size: 1.8rem;
  }
}

.snackbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: 0;
  padding-bottom: 0;
  margin: 0 auto;
  overflow: hidden;
  z-index: 110;
  opacity: 0;
  transition: opacity 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.snackbar.is-active {
  max-height: 1000px;
  padding-bottom: 16px;
  opacity: 1;
  transition: opacity 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.snackbar.is-active > .wrap {
  visibility: visible;
}
.snackbar.is-disabled, .snackbar.isdisabled.is-active {
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: opacity 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s;
  transition: opacity 0.6s, transform 0.6s, max-height 0.6s, padding 0.6s, -webkit-transform 0.6s;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.snackbar > .wrap {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 38px;
  padding: 10px 50px 10px 20px;
  position: relative;
  background-color: #1d1d1e;
  border-radius: 10px;
  transition: visibility 0.6s;
  visibility: hidden;
}
.snackbar .thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.snackbar .thumb > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.snackbar .character {
  display: flex;
  flex-shrink: 0;
  margin-right: 10px;
}
.snackbar .icon {
  flex-shrink: 0;
  margin-right: 10px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -81px -165px;
}
.snackbar .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: calc(100% - 100px);
}
.snackbar .tit {
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
}
.snackbar .message {
  font-size: 1.3rem;
  font-weight: 300;
  color: #fff;
  text-align: center;
}
.snackbar .message span,
.snackbar .message b {
  vertical-align: baseline;
}
.snackbar .desc {
  margin-top: 3px;
  font-size: 1.3rem;
  font-weight: 300;
  color: #fff;
}
.snackbar .desc span,
.snackbar .desc b {
  vertical-align: baseline;
}
.snackbar .txt {
  margin-top: 3px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
}
.snackbar .btn-link {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-image: url("../img/common/arrow-snackbar-link.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) center;
  background-size: 9px 16px;
}
.snackbar .btn-close {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  background-image: url("../img/common/btn-snackbar-close.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.snackbar .btn-close + .btn-link {
  background: none;
}

/* 한줄메세지 스낵바 */
.message-snackbar > .wrap {
  display: inline-flex;
  width: auto;
  padding: 10px 20px;
}

.tab-showhide .tab-content {
  margin-top: 30px;
}
.tab-showhide .tab-content > .content {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.tab-showhide .tab-content > .content.is-active {
  height: auto;
  overflow: visible;
  visibility: visible;
}
.tab-showhide .tab-content > .content > *:first-child.tab-showhide {
  margin-top: -20px;
}
.tab-showhide .tab-content > .content > *:first-child.guide-qna {
  margin-top: -30px;
}
.tab-showhide .tab-content > .content > *:first-child.banner-box.full {
  margin-top: -30px;
}
.tab-showhide .tab-content > .content > *:first-child.form-box {
  margin-top: -30px;
}
.tab-showhide .tab-content > .content > *:first-child.col-img {
  margin-top: -10px;
}
.tab-showhide .tab-content > .content > *:first-child.tab-menu2 {
  margin-top: -15px;
}
.tab-showhide .tab-content > .content > *:first-child.hide + .tab-showhide {
  margin-top: -20px;
}
.tab-showhide .tab-content > .content > *:first-child.hide + .guide-qna {
  margin-top: -30px;
}
.tab-showhide .tab-content > .content > *:first-child.hide + .banner-box.full {
  margin-top: -30px;
}
.tab-showhide .tab-content > .content > *:first-child.hide + .form-box {
  margin-top: -30px;
}
.tab-showhide .tab-content > .content > *:first-child.hide + .col-img {
  margin-top: -10px;
}
.tab-showhide .tab-content > .content > *:first-child.hide + .tab-menu2 {
  margin-top: -15px;
}
.tab-showhide .tab-content > .content > *:last-child.col-img {
  margin-bottom: -50px;
}
.tab-showhide .tab-showhide > .tab-menu, .tab-showhide .tab-showhide > .tab-menu2 {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.banner-box + .tab-showhide, .banner-box-scroll + .tab-showhide {
  margin-top: 20px;
}

.tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 1px 4px 0;
  border: 1px solid #8d8e8f;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  color: #8d8e8f;
  text-align: center;
}
.tag.primary {
  border-color: #26479a;
  color: #26479a;
}
.tag.blue {
  border-color: #1582ed;
  color: #1582ed;
}
.tag.mint {
  border-color: #0fcbcb;
  color: #0fcbcb;
}
.tag.yeloow {
  border-color: #ffce31;
  color: #ffce31;
}
.tag.mint {
  border-color: #0fcbcb;
  color: #0fcbcb;
}
.tag.purple {
  border-color: #9d30e0;
  color: #9d30e0;
}
.tag.purple .icon-vpercent {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("../img/common/icon-vpercent.png") no-repeat center;
  background-size: cover;
}

.target-info {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% + 40px);
  min-height: 100px;
  padding: 20px;
  position: relative;
  left: -20px;
  background-color: #f6f7f8;
}
.target-info + .form-layout {
  margin-top: 20px;
}
.target-info .prod {
  display: flex;
  align-items: center;
}
.target-info .prod .img {
  width: 24%;
  height: 0;
  padding-top: 24%;
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
.target-info .prod .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.target-info .prod .img ~ .content {
  width: calc(76% - 10px);
  margin-left: 10px;
}
.target-info .prod .content {
  width: 100%;
}
.target-info .prod .title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.target-info .prod .price {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.target-info .prod .price .sale {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.4;
  color: #1d1d1e;
}
.target-info .prod .price .regular {
  margin-left: 3px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #8d8e8f;
}
.target-info .board {
  display: flex;
  align-items: center;
}
.target-info .board .content {
  width: 100%;
}
.target-info .board .title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.target-info .board .date {
  margin-top: 5px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}

.tippy-box {
  background-color: rgba(29, 29, 30, 0.9);
}

.tippy-arrow {
  color: rgba(29, 29, 30, 0.9);
}

.tooltip-box {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  padding: 5px 21px 5px 2px;
  padding-right: 20px;
  position: relative;
}
.tooltip-box .desc {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
.tooltip-box .desc + .desc {
  margin-top: 6px;
}
.tooltip-box .list {
  display: flex;
  flex-direction: column;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
.tooltip-box .list > span, .tooltip-box .list > div {
  padding-left: 10px;
  position: relative;
}
.tooltip-box .list > span::after, .tooltip-box .list > div::after {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 6px;
  left: 1px;
  background-color: #fff;
}
.tooltip-box .action {
  display: flex;
  justify-content: flex-end;
  width: calc(100% + 20px);
}
.tooltip-box .action .btn-del {
  position: absolute;
  top: 2px;
  right: -4px;
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/common/btn-close-tooltip.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 9px auto;
}
.tooltip-box .action .btn-more {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
}
.tooltip-box .action .btn-more::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  margin-left: 2px;
  background: url("../img/common/arrow-tooltip.png") no-repeat;
  background-size: cover;
}

/* 스크롤 고정 */
.scroll-fixed {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
}

.common-popup {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  left: -9999px;
  z-index: 100;
  text-align: center;
  visibility: hidden;
}
.common-popup::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(29, 29, 30, 0.8);
  opacity: 0;
}
.common-popup .dim {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.common-popup .popup-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 768px;
  max-height: 100%;
  margin: auto 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 20px;
  opacity: 0;
  -webkit-transform: translate(0);
  transform: translate(0);
}
.common-popup .container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 20px 20px;
}
.common-popup .container > .head {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  height: 31px;
  overflow: hidden;
}
.common-popup .container > .head > .title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 600;
  color: #26479a;
  text-align: left;
  letter-spacing: -0.03em;
}
.common-popup .container > .head > .btn-close {
  display: block;
  top: 0;
  right: 0;
  width: 52px;
  height: 0;
  max-height: 0;
  padding-top: 52px;
  overflow: hidden;
  position: absolute;
}
.common-popup .container > .head > .btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -90px;
}
.common-popup .container > .body {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;
  max-height: calc(var(--vh, 1vh) - 31px - 50px - 40px - 20px - 10px - 20px - 40px);
  padding: 0 15px;
  margin: 10px 0 20px;
  overflow-x: hidden;
  overflow-y: visible;
  text-align: left;
}
.common-popup .container > .body.js-overscroll {
  width: calc(100% + 30px);
  margin-left: -15px;
}
.common-popup .container > .body > .btn-group {
  margin-top: 60px;
}
.common-popup .container > .foot {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}
.common-popup .container > .foot > .btn-group {
  height: 50px;
}
.common-popup:focus {
  outline: 0;
}
.common-popup.is-layer {
  position: fixed;
  top: 0;
  left: 0;
  visibility: visible;
}
.common-popup.is-layer.hide-dim::before {
  opacity: 0;
}
.common-popup.is-layer::before {
  opacity: 1;
}
.common-popup.is-layer .popup-content {
  opacity: 1;
}
.common-popup[data-motion-in].is-layer::before {
  opacity: 0;
}
.common-popup[data-motion-in].is-layer .popup-content {
  opacity: 0;
}
.common-popup[data-motion-in].is-layer.motion-in.hide-dim::before {
  opacity: 0;
}
.common-popup[data-motion-in].is-layer.motion-in::before {
  opacity: 1;
  transition: opacity 0.3s;
}
.common-popup[data-motion-in].is-layer.motion-in .popup-content {
  opacity: 1;
  transition: opacity 0.3s;
}
.common-popup[data-motion-in].is-layer.motion-in.motion-out::before {
  opacity: 0;
  transition: opacity 0.3s;
}
.common-popup[data-motion-in].is-layer.motion-in.motion-out .popup-content {
  opacity: 0;
  transition: opacity 0.3s;
}
.common-popup.full {
  max-width: none;
  padding: 0;
  overflow: hidden;
}
.common-popup.full::before {
  content: none;
}
.common-popup.full::after {
  content: none;
}
.common-popup.full .popup-content {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: auto;
  max-height: none;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
  border-radius: 0;
}
.common-popup.full .container {
  box-sizing: border-box;
  display: block;
  padding: 50px 20px 40px;
  overflow: hidden;
}
.common-popup.full .container > .head {
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 52px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  background-color: #fff;
}
.common-popup.full .container > .head > .title {
  font-size: 2rem;
  color: #1d1d1e;
  text-align: center;
}
.common-popup.full .container > .body {
  flex-grow: 0;
  width: 100%;
  max-height: none;
  padding: 0;
  margin: 0;
  overflow-x: visible;
  position: static;
  left: 0;
}
.common-popup.full .container > .foot {
  margin-top: 30px;
  margin-bottom: 0;
}
.common-popup.full .container > .foot .btn-group {
  height: auto;
}
.common-popup.full .os-padding {
  position: fixed;
}
html:not(.windows) .common-popup.full .container {
  height:100%;
  overflow-x:hidden;
  overflow-y:visible;
}
.common-popup.top {
  max-width: none;
  padding: 0;
}
.common-popup.top::after {
  content: none;
}
.common-popup.top .popup-content {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 80%;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  margin: 0 0 auto 0;
  border-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.common-popup.top .container > .body {
  max-height: calc(var(--vh, 1vh) * 0.8 - 31px - 50px - 40px - 20px - 10px - 20px);
}
.common-popup.top[data-motion-in].is-layer .popup-content {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.common-popup.top[data-motion-in].is-layer.motion-in .popup-content {
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.common-popup.top[data-motion-in].is-layer.motion-in.motion-out .popup-content {
  opacity: 1;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.common-popup.bottom {
  max-width: none;
  padding: 0;
}
.common-popup.bottom::after {
  content: none;
}
.common-popup.bottom .popup-content {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 80%;
  padding: 20px calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left));
  margin: auto 0 0 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.common-popup.bottom .container > .body {
  max-height: calc(var(--vh, 1vh) * 0.8 - 31px - 50px - 40px - 20px - 10px - 20px);
}
.common-popup.bottom[data-motion-in].is-layer .popup-content {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.common-popup.bottom[data-motion-in].is-layer.motion-in .popup-content {
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.common-popup.bottom[data-motion-in].is-layer.motion-in.motion-out .popup-content {
  opacity: 1;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.common-popup.left {
  max-width: none;
  padding: 0;
}
.common-popup.left::after {
  content: none;
}
.common-popup.left .popup-content {
  width: 80%;
  min-height: 100%;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  margin: auto auto 0 0;
  border-radius: 0;
}
.common-popup.left .container > .body {
  max-height: calc(var(--vh, 1vh) - 31px - 50px - 40px - 20px - 10px - 20px);
}
.common-popup.left[data-motion-in].is-layer .popup-content {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.common-popup.left[data-motion-in].is-layer.motion-in .popup-content {
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.common-popup.left[data-motion-in].is-layer.motion-in.motion-out .popup-content {
  opacity: 1;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.common-popup.right {
  max-width: none;
  padding: 0;
}
.common-popup.right::after {
  content: none;
}
.common-popup.right .popup-content {
  width: 80%;
  min-height: 100%;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  margin: auto 0 0 auto;
  border-radius: 0;
}
.common-popup.right .container > .body {
  max-height: calc(var(--vh, 1vh) - 31px - 50px - 40px - 20px - 10px - 20px);
}
.common-popup.right[data-motion-in].is-layer .popup-content {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.common-popup.right[data-motion-in].is-layer.motion-in .popup-content {
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.common-popup.right[data-motion-in].is-layer.motion-in.motion-out .popup-content {
  opacity: 1;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .common-popup.is-layer {
    width: 524px;
    margin-left: -245px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

.prod-col {
  position: relative;
}
.prod-col.is-soldout > .wrap::after, .prod-col.is-soldout > a > .wrap::after {
  content: "";
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(29, 29, 30, 0.5);
}
.prod-col.is-soldout .img::after {
  content: "SOLD OUT";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.prod-col.is-soldout .content > *:not(.recommend, .target) {
  position: relative;
}
.prod-col.is-soldout .content > *:not(.recommend, .target)::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.prod-col.is-soldout .util button,
.prod-col.is-soldout .util a {
  opacity: 0.4;
}
.prod-col.wide > .wrap::after, .prod-col.wide > a > .wrap::after {
  padding-top: 57.91%;
}
.prod-col.wide .img {
  padding-top: 57.91%;
}
.prod-col.wide .img::before {
  content: none;
}
.prod-col.wide .util .wrap {
  padding-top: 57.91%;
}
.prod-col > a {
  display: block;
}
.prod-col > a > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.prod-col > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.prod-col .img {
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.prod-col .img::before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: 1px solid #f0f1f4;
}
.prod-col .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.prod-col .content {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.prod-col .recommend {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0 4px;
  position: absolute;
  top: 0;
  right: 8px;
  background-color: #ff526d;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.prod-col .target {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 20px;
  padding: 0 6px;
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: #1d1d1e;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.prod-col .title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod-col .desc {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-col .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.prod-col .price .vpercent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ff526d;
}
.prod-col .price .vpercent::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../img/common/icon-vsale.png") no-repeat;
  background-size: cover;
}
.prod-col .price .percent {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1582ed;
}
.prod-col .price .sale {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1e;
}
.prod-col .price .regular {
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-decoration: line-through;
}
.prod-col .tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 9px;
}
.prod-col .tag-group .tag {
  margin-bottom: 3px;
}
.prod-col .util {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.prod-col .util .wrap {
  width: 0;
  padding-top: 100%;
}
.prod-col .util .btn-bookmark {
  position: absolute;
  top: 0;
  right: 0;
}
.prod-col .util .btn-cart {
  -webkit-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
}
.prod-col .util .btn-gift {
  -webkit-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
}
.prod-col .soldout {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.prod-col-list {
  display: flex;
  flex-wrap: wrap;
}
.prod-col-list li {
  width: calc((100% - 9px) / 2);
}
.prod-col-list li:nth-child(n+3) {
  margin-top: 30px;
}
.prod-col-list li:nth-child(2n+2) {
  margin-left: 9px;
}

.prod-row-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prod-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prod-col-scroll {
  width: 100%;
  overflow: visible;
}
.prod-col-scroll.mid li {
  width: 53.7313432836%;
}
.prod-col-scroll.large li {
  width: 65.671641791%;
}
.prod-col-scroll.wide li {
  width: 100%;
}
.prod-col-scroll li {
  width: 48.6567164179%;
}

.prod-order {
  position: relative;
}
.prod-order.is-soldout .img::before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(29, 29, 30, 0.5);
}
.prod-order.is-soldout .img::after {
  content: "SOLD OUT";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.prod-order.is-soldout .content > *:not(.recommend, .target) {
  position: relative;
}
.prod-order.is-soldout .content > *:not(.recommend, .target)::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.prod-order.is-soldout .util button,
.prod-order.is-soldout .util a {
  opacity: 0.4;
}
.prod-order.is-undeli .img::before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(29, 29, 30, 0.5);
}
.prod-order.is-undeli .img::after {
  content: "배송불가";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.prod-order.is-undeli .content > *:not(.recommend, .target) {
  position: relative;
}
.prod-order.is-undeli .content > *:not(.recommend, .target)::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.prod-order.is-undeli .util button,
.prod-order.is-undeli .util a {
  opacity: 0.4;
}
.prod-order > a {
  display: block;
}
.prod-order > a > .wrap {
  display: flex;
}
.prod-order > label {
  display: flex;
}
.prod-order > label input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.prod-order > label input[type=checkbox] ~ .wrap {
  box-sizing: border-box;
  padding-left: 30px;
  position: relative;
}
.prod-order > label input[type=checkbox] ~ .wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -50px -192px;
}
.prod-order > label input[type=checkbox]:checked ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -54px;
}
.prod-order > label input[type=checkbox][disabled] ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -154px;
}
.prod-order > label input[type=checkbox][disabled]:checked ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -208px -129px;
}
.prod-order > label ~ * {
  box-sizing: border-box;
  width: calc(100% - 30px);
  margin-left: auto;
}
.prod-order > label ~ *.action .group {
  max-width: calc(70.4918032787% - 15px);
}
.prod-order > label > .wrap {
  display: flex;
  width: 100%;
}
.prod-order > label .img {
  width: 29.5081967213%;
  padding-top: 29.5081967213%;
}
.prod-order > .wrap > a {
  display: flex;
  flex-grow: 1;
}
.prod-order > .wrap > a .img {
  width: 29.5081967213%;
  padding-top: 29.5081967213%;
}
.prod-order > .wrap {
  display: flex;
}
.prod-order .input {
  flex-shrink: 0;
  width: 20px;
  height: 0;
  padding-top: 28.5714285714%;
  margin-right: 10px;
  position: relative;
}
.prod-order .input .check-only {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.prod-order .input ~ a {
  margin-right: 20px;
}
.prod-order .img {
  box-sizing: border-box;
  flex-shrink: 0;
  align-self: flex-start;
  width: 26.8656716418%;
  padding-top: 26.8656716418%;
  margin-right: 15px;
  overflow: hidden;
  position: relative;
  border: 1px solid #f0f1f4;
}
.prod-order .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.prod-order .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: calc(73.1343283582% - 15px);
}
.prod-order .content .title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod-order .content .icon-gift {
  margin-right: 3px;
  vertical-align: middle;
  -webkit-transform: translateY(-0.07em);
  transform: translateY(-0.07em);
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/mypage/icon-gift.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px auto;
}
.prod-order .content .icon-card {
  margin-right: 3px;
  vertical-align: middle;
  -webkit-transform: translateY(-0.07em);
  transform: translateY(-0.07em);
  display: inline-flex;
  width: 20px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  overflow: hidden;
  background-image: url("../img/mypage/icon-card.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px auto;
}
.prod-order .content .desc {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  word-break: break-word;
}
.prod-order .content .date {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  word-break: break-word;
}
.prod-order .content .count {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  word-break: break-word;
}
.prod-order .content .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}
.prod-order .content .price .sale {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1e;
}
.prod-order .content .price .regular {
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-decoration: line-through;
}
.prod-order .content .price .freebies {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1582ed;
}
.prod-order .content .vpercent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ff526d;
}
.prod-order .content .vpercent::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../img/common/icon-vsale.png") no-repeat;
  background-size: cover;
}
.prod-order .content .percent {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1582ed;
}
.prod-order .info {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 15px 20px;
  margin-top: 10px;
  background-color: rgba(15, 203, 203, 0.1);
  border-radius: 5px;
}
.prod-order .info > *.img {
  grid-column: 1;
}
.prod-order .info > *:not(.img) {
  grid-column: 2;
}
.prod-order .info .title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.prod-order .info .desc {
  width: 100%;
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.prod-order .info .comment {
  width: 100%;
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #0fcbcb;
}
.prod-order .info .price {
  width: 100%;
  margin-top: 5px;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.4;
  color: #1d1d1e;
}
.prod-order .info .img {
  box-sizing: border-box;
  grid-row: 1/span 4;
  width: 40px;
  min-height: 60px;
  overflow: visible;
}
.prod-order .info .img::before {
  content: none;
}
.prod-order .info .img img {
  width: 100%;
  height: auto;
  vertical-align: top;
  -o-object-fit: contain;
  object-fit: contain;
}
.prod-order .action {
  display: flex;
  margin-top: 10px;
  margin-left: auto;
}
.prod-order .action .status {
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1582ed;
}
.prod-order .action .status.error {
  color: #ed1515;
}
.prod-order .action .group {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  max-width: calc(73.1343283582% - 15px);
  margin-left: auto;
  position: relative;
  z-index: 2;
}
.prod-order .action .group > .wrap {
  flex-shrink: 0;
}
.prod-order .action .group .row {
  display: flex;
  justify-content: flex-end;
}
.prod-order .action .group .select-quantity {
  flex-shrink: 0;
  margin-top: 3px;
  margin-right: auto;
  margin-left: 30px;
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
.prod-order .action .group .btn-util {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.25;
  color: #8d8e8f;
}
.prod-order .action .group .btn-util + .btn-util {
  padding-left: 11px;
  margin-left: 6px;
  position: relative;
}
.prod-order .action .group .btn-util + .btn-util::before {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.prod-order .action ~ .util .btn-cart {
  bottom: 20px;
}
.prod-order .action ~ .util .btn-gift {
  bottom: 20px;
}
.prod-order .soldout {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.prod-order .undeli {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.prod-order .util .btn-cart {
  position: absolute;
  right: -8px;
  bottom: -3px;
}
.prod-order .util .btn-gift {
  position: absolute;
  right: -8px;
  bottom: -3px;
}

.prod-order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prod-rank {
  display: flex;
  width: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: none;
  transition: box-shadow 0.3s, font-weight 0.3s;
}
.prod-rank.is-soldout > .wrap::after, .prod-rank.is-soldout > a > .wrap::after {
  content: "";
  width: 17.9104477612%;
  height: 0;
  padding-top: 17.9104477612%;
  position: absolute;
  top: 10px;
  left: 25px;
  background-color: rgba(29, 29, 30, 0.5);
}
.prod-rank.is-soldout .img::after {
  content: "SOLD OUT";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.prod-rank.is-soldout .content > *:not(.recommend, .target) {
  position: relative;
}
.prod-rank.is-soldout .content > *:not(.recommend, .target)::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.prod-rank.is-soldout .util button,
.prod-rank.is-soldout .util a {
  opacity: 0.4;
}
.prod-rank.is-active {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.prod-rank.is-active .rank .num {
  font-weight: 700;
}
.prod-rank > a {
  display: block;
  width: 100%;
}
.prod-rank > a > .wrap {
  display: flex;
  padding: 10px 50px 10px 20px;
}
.prod-rank > .wrap {
  display: flex;
  padding: 10px 50px 10px 20px;
}
.prod-rank .img {
  flex-shrink: 0;
  align-self: flex-start;
  width: 22.641509434%;
  padding-top: 22.641509434%;
  margin-right: 16px;
  margin-left: 5px;
  overflow: hidden;
  position: relative;
}
.prod-rank .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.prod-rank .content {
  display: flex;
  flex-grow: 1;
  align-self: center;
  padding: 10px 0;
}
.prod-rank .content > .wrap {
  display: flex;
  flex-direction: column;
}
.prod-rank .rank {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 14px;
  margin-right: 10px;
}
.prod-rank .rank .num {
  font-size: 2rem;
  font-weight: 300;
  color: #1d1d1e;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
}
.prod-rank .title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod-rank .desc {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-rank .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.prod-rank .price .vpercent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ff526d;
}
.prod-rank .price .vpercent::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../img/common/icon-vsale.png") no-repeat;
  background-size: cover;
}
.prod-rank .price .percent {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1582ed;
}
.prod-rank .price .sale {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1e;
}
.prod-rank .price .regular {
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-decoration: line-through;
}
.prod-rank .tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 10px;
}
.prod-rank .util {
  width: 0;
  height: 0;
}
.prod-rank .util .btn-cart {
  position: absolute;
  right: 5px;
  bottom: 5px;
}
.prod-rank .util .btn-gift {
  position: absolute;
  right: 5px;
  bottom: 5px;
}
.prod-rank .soldout {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.prod-row {
  position: relative;
}
.prod-row.is-soldout > .wrap::after, .prod-row.is-soldout > a > .wrap::after {
  content: "";
  width: 35.82%;
  height: 0;
  padding-top: 35.82%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(29, 29, 30, 0.5);
}
.prod-row.is-soldout .img::after {
  content: "SOLD OUT";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.prod-row.is-soldout .content > *:not(.recommend, .target) {
  position: relative;
}
.prod-row.is-soldout .content > *:not(.recommend, .target)::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.prod-row.is-soldout .util button,
.prod-row.is-soldout .util a {
  opacity: 0.4;
}
.prod-row.wide > .wrap::after, .prod-row.wide > a > .wrap::after {
  padding-top: 57.91%;
}
.prod-row.wide .img {
  padding-top: 57.91%;
}
.prod-row.wide .img::before {
  content: none;
}
.prod-row.wide .util .wrap {
  padding-top: 57.91%;
}
.prod-row > a {
  display: block;
}
.prod-row > a > .wrap {
  display: flex;
}
.prod-row > .wrap {
  display: flex;
}
.prod-row .img {
  flex-shrink: 0;
  align-self: flex-start;
  width: 35.82%;
  padding-top: 35.82%;
  margin-right: 20px;
  overflow: hidden;
  position: relative;
}
.prod-row .img::before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: 1px solid #f0f1f4;
}
.prod-row .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.prod-row .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: calc(64.18% - 20px);
}
.prod-row .recommend {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0 4px;
  position: absolute;
  top: 0;
  left: 35.82%;
  background-color: #ff526d;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  -webkit-transform: translateX(calc(-100% - 8px));
  transform: translateX(calc(-100% - 8px));
}
.prod-row .target {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 20px;
  padding: 0 6px;
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: #1d1d1e;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.prod-row .title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod-row .desc {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-row .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.prod-row .price .vpercent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ff526d;
}
.prod-row .price .vpercent::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../img/common/icon-vsale.png") no-repeat;
  background-size: cover;
}
.prod-row .price .percent {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1582ed;
}
.prod-row .price .sale {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1e;
}
.prod-row .price .regular {
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-decoration: line-through;
}
.prod-row .tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-right: 30px;
  margin-top: 10px;
}
.prod-row .tag-group .tag {
  margin-bottom: 3px;
}
.prod-row .util .btn-bookmark {
  position: absolute;
  top: 0;
  left: 35.82%;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.prod-row .util .btn-cart {
  position: absolute;
  right: -4px;
  bottom: 0;
}
.prod-row .util .btn-gift {
  position: absolute;
  right: -4px;
  bottom: 0;
}
.prod-row .soldout {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.promo-col {
  position: relative;
}
.promo-col.wide .img {
  padding-top: 41.7910447761%;
}
.promo-col > a {
  display: block;
}
.promo-col > a > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.promo-col > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.promo-col .img {
  width: 100%;
  height: 0;
  max-height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.promo-col .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.promo-col .content {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.promo-col .content .dday {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 3px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.promo-col .content .dday.mint {
  background-color: #0fcbcb;
}
.promo-col .content .dday.blue {
  background-color: #1582ed;
}
.promo-col .keyword {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 5px;
  font-size: 1.3rem;
  font-weight: 400;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.promo-col .category {
  margin-bottom: 5px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.promo-col .sub-title {
  margin-bottom: 5px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #78787d;
}
.promo-col .title {
  width: 100%;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.promo-col .date {
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 400;
  color: #8d8e8f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-col .util {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.promo-col .util .wrap {
  width: 0;
  padding-top: 100%;
}
.promo-col .util .btn-bookmark {
  position: absolute;
  top: 5px;
  right: 5px;
}

.promo-col-list {
  display: flex;
  flex-wrap: wrap;
}
.promo-col-list.wide li {
  width: 100%;
}
.promo-col-list.wide li:not(:first-child) {
  margin-top: 20px;
}
.promo-col-list.wide li:nth-child(n+3) {
  margin-top: 20px;
}
.promo-col-list.wide li:nth-child(2n+2) {
  margin-left: 0;
}
.promo-col-list li {
  width: calc((100% - 9px) / 2);
}
.promo-col-list li:nth-child(n+3) {
  margin-top: 30px;
}
.promo-col-list li:nth-child(2n+2) {
  margin-left: 9px;
}
.promo-col-list .result-info {
  margin: 100px 0;
}

.promo-col-scroll {
  width: 100%;
  overflow: visible;
}
.promo-col-scroll.wide li {
  width: 77.6119402985%;
}
.promo-col-scroll.wide.larget li {
  width: 100%;
}
.promo-col-scroll li {
  width: 65.671641791%;
}

.promo-row-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promo-row {
  position: relative;
}
.promo-row.wide .img {
  padding-top: 41.7910447761%;
}
.promo-row > a {
  display: block;
}
.promo-row > a > .wrap {
  display: flex;
  width: 100%;
}
.promo-row > .wrap {
  display: flex;
  width: 100%;
}
.promo-row .img {
  width: 26.8656716418%;
  height: 0;
  max-height: 0;
  padding-top: 26.8656716418%;
  margin-right: 20px;
  overflow: hidden;
  position: relative;
}
.promo-row .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.promo-row .content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(73.1343283582% - 20px);
  padding: 10px 40px 10px 0;
}
.promo-row .keyword {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  margin-bottom: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.promo-row .category {
  margin-bottom: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.promo-row .title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.promo-row .date {
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-row .util {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.promo-row .util .wrap {
  width: 0;
  padding-top: 100%;
}
.promo-row .util .btn-bookmark {
  position: absolute;
  top: 5px;
  right: 5px;
}

.review-accordion li {
  border-top: 1px solid #f0f1f4;
}
.review-accordion li:last-child {
  border-bottom: 1px solid #f0f1f4;
}
.review-accordion .item {
  padding: 18px 20px 14px 20px;
}
.review-accordion .item > .wrap {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.review-accordion .item .user {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 15px;
  position: relative;
}
.review-accordion .item .user .thumb {
  width: 48px;
  height: 48px;
  position: relative;
  background: url("../img/common/user-img.png") no-repeat;
  background-color: #f6f7f8;
  background-position: center center;
  background-size: 34px auto;
  border-radius: 50%;
}
.review-accordion .item .user .thumb > .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  border-radius: 50%;
}
.review-accordion .item .user .month {
  box-sizing: border-box;
  padding: 0 2px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #26479a;
  border: 1px solid #fff;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 14px;
  color: #fff;
}
.review-accordion .item .user + * {
  padding-top: 5px;
}
.review-accordion .item .user ~ .title {
  width: calc(100% - 63px);
  margin-left: auto;
}
.review-accordion .item .user ~ .content > .wrap {
  width: calc(100% - 63px);
  margin-left: auto;
}
.review-accordion .item .user ~ .content .answer {
  width: calc(100% + 63px);
  position: relative;
  left: -63px;
}
.review-accordion .item .user ~ .action {
  width: calc(100% - 63px);
  margin-left: auto;
}
.review-accordion .item .title {
  box-sizing: border-box;
  padding: 0 24px 0 4px;
  margin-bottom: 6px;
}
.review-accordion .item .title .grade-star {
  margin-bottom: 6px;
}
.review-accordion .item .title .info {
  display: flex;
  flex-wrap: wrap;
}
.review-accordion .item .title .info > *:not(:first-child, .lock) {
  padding-left: 11px;
  margin-left: 11px;
  position: relative;
}
.review-accordion .item .title .info > *:not(:first-child, .lock)::before {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.review-accordion .item .status {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.015em;
}
.review-accordion .item .id {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.015em;
}
.review-accordion .item .date {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.015em;
}
.review-accordion .item .lock {
  display: inline-flex;
  width: 14px;
  height: 0;
  max-height: 0;
  padding-top: 14px;
  overflow: hidden;
  background-image: url("../img/common/icon-lock.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px auto;
  margin-left: 10px;
}
.review-accordion .item .content {
  width: 100%;
  overflow: hidden;
  transition: height 0.2s;
}
.review-accordion .item .content[data-readmore].is-open .question {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.review-accordion .item .content[data-readmore].is-open .question::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.review-accordion .item .content[data-readmore] .question {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-accordion .item .content[data-readmore] .question::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 4px;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.review-accordion .item .btn-readmore {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.review-accordion .item .question {
  padding: 0 4px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.review-accordion .item .img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.review-accordion .item .img-list a {
  display: block;
}
.review-accordion .item .img-list .img {
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
}
.review-accordion .item .img-list .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.review-accordion .item .answer {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 12px;
  margin-top: 12px;
  background-color: #f6f7f8;
}
.review-accordion .item .answer .icon-writer {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: url("../img/common/thumb-bebecook.png") no-repeat;
  background-size: cover;
}
.review-accordion .item .answer .icon-writer ~ .con {
  width: calc(100% - 32px);
  margin-left: auto;
}
.review-accordion .item .answer .icon-writer ~ .info {
  width: calc(100% - 32px);
  margin-left: auto;
}
.review-accordion .item .answer .con {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.review-accordion .item .answer .info {
  width: 100%;
  margin-top: 10px;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.015em;
}
.review-accordion .item .answer .info > *:not(:first-child) {
  padding-left: 10px;
  margin-left: 10px;
  position: relative;
}
.review-accordion .item .answer .info > *:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 0.65em;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.review-accordion .item .action {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 10px;
}
.review-accordion.review .btn-readmore {
  height: 67px;
}

/* 24.11.18_직원리뷰추가(고정윤) */
.review-accordion.review .staff-reviews {
  width: calc(100% - 63px);
  margin-left: auto;
  display: flex;
  justify-content:flex-start;
  margin-top:10px;
  font-size: 1.3rem;
  color: #8d8e8f;
  line-height: 1.3;
  align-items: center;
}
.review-accordion.review .staff-reviews span {
  padding: 2px 4px;
  border: 1px solid #8d8e8f;
  color: #78787D;
  font-weight: 600;
  border-radius: 5px;
  font-size: 1.2rem;
  margin-right: 5px;
}
/* //24.11.18_직원리뷰추가(고정윤) */

.review-list {
  border-top: 1px solid #e1e3e8;
}
.review-list > li:not(:first-child) {
  border-top: 1px solid #e1e3e8;
}
.review-list .item {
  display: flex;
  flex-wrap: wrap;
  padding: 16px 4px;
}
.review-list .item > a {
  display: block;
  width: 100%;
}
.review-list .item .user {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 15px;
  position: relative;
}
.review-list .item .user .thumb {
  width: 48px;
  height: 48px;
  position: relative;
  background: url("../img/common/user-img.png") no-repeat;
  background-color: #f6f7f8;
  background-position: center center;
  background-size: 34px auto;
  border-radius: 50%;
}
.review-list .item .user .thumb > .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  border-radius: 50%;
}
.review-list .item .user .month {
  box-sizing: border-box;
  padding: 0 2px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #26479a;
  border: 1px solid #fff;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 14px;
  color: #fff;
}
.review-list .item .user + * {
  padding-top: 5px;
}
.review-list .item .user ~ .title {
  width: calc(100% - 63px);
  margin-left: auto;
}
.review-list .item .user ~ .content {
  width: calc(100% - 63px);
  margin-left: auto;
}
.review-list .item .user ~ .action {
  width: calc(100% - 63px);
  margin-left: auto;
}
.review-list .item .title {
  width: 100%;
  margin-bottom: 12px;
}
.review-list .item .title .grade-star {
  margin-bottom: 6px;
}
.review-list .item .title .info {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.review-list .item .title .info > *:not(:first-child) {
  padding-left: 10px;
  margin-left: 10px;
  position: relative;
}
.review-list .item .title .info > *:not(:first-child)::after {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.review-list .item .title .info .id {
  color: #1d1d1e;
}
.review-list .item .content {
  width: 100%;
}
.review-list .item .content .tit {
  display: block;
  margin-top: -5px;
  margin-bottom: 2px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
}
.review-list .item .content .con {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
}
.review-list .item .img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.review-list .item .img-list a {
  display: block;
}
.review-list .item .img-list .img {
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
}
.review-list .item .img-list .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.review-list .item .action {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  margin-top: 10px;
}
.review-list .item .action .btn-report-txt {
  margin-right: -10px;
}

.review-detail .question-wrap {
  padding: 0 4px;
}
.review-detail .title {
  display: flex;
  flex-direction: column;
  margin-bottom: 11px;
}
.review-detail .title .tit {
  margin-bottom: 3px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 16px;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.review-detail .title .con {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 16px;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.review-detail .question {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 16px;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.review-detail .img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.review-detail .img-list a {
  display: block;
}
.review-detail .img-list .img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
}
.review-detail .img-list .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.review-detail .info {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 16px;
  line-height: 1.3;
  color: #8d8e8f;
}
.review-detail .info > span:not(:first-child, .action) {
  padding-left: 10px;
  margin-left: 10px;
  position: relative;
}
.review-detail .info > span:not(:first-child, .action)::before {
  content: "";
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.review-detail .action {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
.review-detail .answer {
  display: flex;
  flex-wrap: wrap;
  padding: 17px 15px 18px;
  margin-top: 22px;
  background-color: rgba(21, 130, 237, 0.1);
}
.review-detail .answer .icon-writer {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 0.65em;
  background: url("../img/common/thumb-bebecook.png") no-repeat;
  background-size: cover;
  font-size: 1.6rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.review-detail .answer .icon-writer ~ .tit {
  width: calc(100% - 32px);
  padding-top: 2px;
  margin-left: auto;
}
.review-detail .answer .icon-writer ~ .con {
  width: calc(100% - 32px);
  margin-left: auto;
}
.review-detail .answer .tit {
  width: 100%;
  margin-bottom: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 16px;
  line-height: 1.3;
  color: #1d1d1e;
}
.review-detail .answer .con {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 16px;
  line-height: 1.4;
  color: #1d1d1e;
}

.main-banner {
  position: relative;
}
.main-banner .list {
  width: 100%;
}
.main-banner .list.is-destroy .head {
  opacity: 1;
  transition: opacity 0.01s 0.01s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-banner .list.is-destroy .title {
  opacity: 1;
  transition: opacity 0.01s 0.01s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-banner .list.is-destroy .desc {
  opacity: 1;
  transition: opacity 0.01s 0.01s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-banner .item {
  position: relative;
}
.main-banner .img {
  width: 100%;
  height: 0;
  padding-top: 122.6666666667%;
  position: relative;
}
.main-banner .img > img {
  width: 100%;
  width: calc(100% + 1px);
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.main-banner a {
  display: block;
}
.main-banner .video {
  width: 100%;
  height: 0;
  padding-top: 122.6666666667%;
  position: relative;
}
.main-banner .video video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.main-banner .video ~ .text-wrap {
  color: #fff;
}
.main-banner .video ~ .text-wrap::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(29, 29, 30, 0.2);
}
.main-banner .text-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 50px 32px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  letter-spacing: -0.05em;
}
.main-banner .head {
  margin-bottom: 4px;
  opacity: 0;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
  transition: opacity 0.3s 0.01s, -webkit-transform 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s, -webkit-transform 0.01s 0.3s;
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.main-banner .title {
  opacity: 0;
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  transition: opacity 0.3s 0.01s, -webkit-transform 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s, -webkit-transform 0.01s 0.3s;
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.main-banner .desc {
  margin-top: 10px;
  opacity: 0;
  font-size: 1.4rem;
  font-weight: 300;
  transition: opacity 0.3s 0.01s, -webkit-transform 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s, -webkit-transform 0.01s 0.3s;
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.main-banner .action {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-banner .action .btn-muted.is-block {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.main-banner .action .btn-muted.is-block::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 16.5px;
  height: 12px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -111px;
}
.main-banner .swiper-slide.swiper-slide-active .swiper-slide-shadow {
  background-color: rgba(0, 0, 0, 0) !important;
}
.main-banner .swiper-slide.swiper-slide-active .head {
  opacity: 1;
  transition: opacity 0.4s 0.17s, -webkit-transform 0.4s 0.17s;
  transition: opacity 0.4s 0.17s, transform 0.4s 0.17s;
  transition: opacity 0.4s 0.17s, transform 0.4s 0.17s, -webkit-transform 0.4s 0.17s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-banner .swiper-slide.swiper-slide-active .title {
  opacity: 1;
  transition: opacity 0.4s 0.2s, -webkit-transform 0.4s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.4s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.4s 0.2s, -webkit-transform 0.4s 0.2s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-banner .swiper-slide.swiper-slide-active .desc {
  opacity: 1;
  transition: opacity 0.4s 0.3s, -webkit-transform 0.4s 0.3s;
  transition: opacity 0.4s 0.3s, transform 0.4s 0.3s;
  transition: opacity 0.4s 0.3s, transform 0.4s 0.3s, -webkit-transform 0.4s 0.3s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-banner .btn-more {
  padding: 5px;
  position: absolute;
  bottom: 15px;
  left: 25px;
  z-index: 1;
}
.main-banner .fraction {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: auto;
  height: 30px;
  padding: 1px 14px 0;
  background-color: rgba(29, 29, 30, 0.8);
  border-radius: 15px;
  font-size: 1.6rem;
  font-weight: 300;
  color: #fff;
}
.main-banner .fraction::after {
  content: "";
  margin-left: 14px;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  display: inline-flex;
  width: 12px;
  height: 12px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -159.5px -111px;
}
.main-banner .fraction .swiper-pagination-current {
  min-width: 10px;
  margin-right: 1px;
  font-weight: 700;
  text-align: center;
}
.main-banner .fraction .swiper-pagination-total {
  min-width: 10px;
  margin-left: 2px;
  text-align: center;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.5);
}

.timesale-slider {
  padding: 40px 0;
  background-color: #e1e3e8;
  transition: background-color 0.5s;
}
.timesale-slider .head {
  position: relative;
}
.timesale-slider .head .title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.timesale-slider .head .title::before {
  display: inline-flex;
  width: 30px;
  height: 30px;
  background-image: url("../img/main/icon-time.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  content: "";
  display: block;
  margin: 0 auto 9px;
}
.timesale-slider .head .sub {
  vertical-align: top;
}
.timesale-slider .head .main {
  font-size: 2.4rem;
  color: #1582ed;
  vertical-align: top;
}
.timesale-slider .head .count {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.timesale-slider .head .count .txt {
  margin-right: 14px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.timesale-slider .body {
  margin-top: 30px;
}
.timesale-slider .list {
  width: 224%;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.timesale-slider .item {
  width: 100%;
  position: relative;
}
.timesale-slider .item a {
  display: block;
}
.timesale-slider .item a > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timesale-slider .item > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timesale-slider .item .img {
  width: 85.7142857143%;
  height: 0;
  padding-top: 85.7142857143%;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.timesale-slider .item .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.timesale-slider .item .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.timesale-slider .item .stamp {
  width: 21.4285714286%;
  padding-top: 21.4285714286%;
  position: absolute;
  top: 0;
  right: 5%;
  background: url("../img/main/stamp-secondary.png") no-repeat;
  background-size: cover;
}
.timesale-slider .item .stamp .txt {
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.timesale-slider .item .stamp .num {
  font-size: 2.4rem;
}
.timesale-slider .item .title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.timesale-slider .item .price {
  margin-top: 10px;
  text-align: center;
}
.timesale-slider .item .percent {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1582ed;
  letter-spacing: -0.03em;
}
.timesale-slider .item .sale {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.timesale-slider .item .regular {
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-decoration: line-through;
  letter-spacing: -0.03em;
}
.timesale-slider .item .util {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}
.timesale-slider .item .status {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 200px;
  height: 40px;
  padding: 0 40px 0 20px;
  position: relative;
  background: #fff;
  border-radius: 20px;
}
.timesale-slider .item .status .msg {
  display: flex;
}
.timesale-slider .item .status .msg .num {
  margin-left: 5px;
  font-weight: 700;
  color: #1582ed;
}
.timesale-slider .item .status .btn-cart {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.timesale-slider .item .status .btn-gift {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.timesale-slider .item.is-soldout .img::after {
  content: "SOLD OUT";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(29, 29, 30, 0.5);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.timesale-slider .item.is-soldout .util button,
.timesale-slider .item.is-soldout .util a {
  opacity: 0.4;
}
.timesale-slider .soldout {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.timesale-slider .common-fraction {
  margin-top: 30px;
}
.timesale-slider .common-fraction .btn-next {
  -webkit-transform-origin: 50% 54% 0;
  transform-origin: 50% 54% 0;
}
.timesale-slider .common-fraction .num {
  width: 40px;
}
.timesale-slider .list {
  overflow: visible;
}
.timesale-slider .list li.swiper-slide .item:not(.is-soldout) .img {
  opacity: 0.5;
  transition: opacity 0.3s;
}
.timesale-slider .list li.swiper-slide .item .stamp {
  opacity: 0;
  transition: opacity 0.3s, -webkit-transform 0.01s 0.3s;
  transition: opacity 0.3s, transform 0.01s 0.3s;
  transition: opacity 0.3s, transform 0.01s 0.3s, -webkit-transform 0.01s 0.3s;
  -webkit-transform: rotate(-45deg) scale(3);
  transform: rotate(-45deg) scale(3);
}
.timesale-slider .list li.swiper-slide .item .title {
  opacity: 0;
  transition: opacity 0.2s 0.01s, -webkit-transform 0s 0.3s;
  transition: opacity 0.2s 0.01s, transform 0s 0.3s;
  transition: opacity 0.2s 0.01s, transform 0s 0.3s, -webkit-transform 0s 0.3s;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}
.timesale-slider .list li.swiper-slide .item .price {
  opacity: 0;
  transition: opacity 0.2s 0.01s, -webkit-transform 0s 0.3s;
  transition: opacity 0.2s 0.01s, transform 0s 0.3s;
  transition: opacity 0.2s 0.01s, transform 0s 0.3s, -webkit-transform 0s 0.3s;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}
.timesale-slider .list li.swiper-slide .item .status {
  opacity: 0;
  transition: opacity 0.2s 0.01s, -webkit-transform 0s 0.3s;
  transition: opacity 0.2s 0.01s, transform 0s 0.3s;
  transition: opacity 0.2s 0.01s, transform 0s 0.3s, -webkit-transform 0s 0.3s;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}
.timesale-slider .list li.swiper-slide.swiper-slide-active .item:not(.is-soldout) .img {
  opacity: 1;
}
.timesale-slider .list li.swiper-slide.swiper-slide-active .item .stamp {
  opacity: 1;
  transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
  transition: opacity 0.3s 0.3s, transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}
.timesale-slider .list li.swiper-slide.swiper-slide-active .item .title {
  opacity: 1;
  transition: opacity 0.3s 0.4s, -webkit-transform 0.3s 0.4s;
  transition: opacity 0.3s 0.4s, transform 0.3s 0.4s;
  transition: opacity 0.3s 0.4s, transform 0.3s 0.4s, -webkit-transform 0.3s 0.4s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.timesale-slider .list li.swiper-slide.swiper-slide-active .item .price {
  opacity: 1;
  transition: opacity 0.3s 0.5s, -webkit-transform 0.3s 0.5s;
  transition: opacity 0.3s 0.5s, transform 0.3s 0.5s;
  transition: opacity 0.3s 0.5s, transform 0.3s 0.5s, -webkit-transform 0.3s 0.5s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.timesale-slider .list li.swiper-slide.swiper-slide-active .item .status {
  opacity: 1;
  transition: opacity 0.3s 0.6s, -webkit-transform 0.3s 0.6s;
  transition: opacity 0.3s 0.6s, transform 0.3s 0.6s;
  transition: opacity 0.3s 0.6s, transform 0.3s 0.6s, -webkit-transform 0.3s 0.6s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.timesale-slider .list.is-destroy {
  width: 100%;
  left: auto;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.timesale-slider .list.is-destroy li {
  width: 64%;
  margin: 0 auto;
}
.timesale-slider .list.is-destroy li .item .img {
  width: 100%;
  padding-top: 100%;
  opacity: 1;
}
.timesale-slider .list.is-destroy li .item .stamp {
  opacity: 1;
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}
.timesale-slider .list.is-destroy li .item .title {
  opacity: 1;
}
.timesale-slider .list.is-destroy li .item .price {
  opacity: 1;
}
.timesale-slider .list.is-destroy li .item .status {
  opacity: 1;
}
.timesale-slider .list.is-destroy li .item:not(.is-soldout) .img {
  opacity: 1;
}

.check-table {
  border-top: 1px solid #1d1d1e;
  border-bottom: 1px solid #1d1d1e;
}
.check-table table {
  width: 100%;
}
.check-table table > tbody > tr > td {
  box-sizing: border-box;
  height: 36px;
  padding: 6px 10px;
  border-right: 1px dashed #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
  font-size: 1.1rem;
  font-weight: 300;
  color: #1d1d1e;
  text-align: left;
  vertical-align: middle;
}
.check-table table > tbody > tr > td:last-child {
  border-right: 0;
}
.check-table .no {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.check-table .no::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-left: auto;
  background: url("../img/product/icon-x.png") no-repeat;
  background-size: cover;
}
.check-table .yes {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1582ed;
}
.check-table .yes::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-left: auto;
  background: url("../img/product/icon-o.png") no-repeat;
  background-size: cover;
}

.table-layout {
  margin-top: 10px;
  position: relative;
  border-top: 1px solid #1d1d1e;
  border-bottom: 1px solid #1d1d1e;
}
.table-layout.center table > thead > tr > th, .table-layout.center table > thead > tr > td, .table-layout.center table > tbody > tr > th, .table-layout.center table > tbody > tr > td {
  text-align: center;
}
.table-layout.middle table > thead > tr > th, .table-layout.middle table > thead > tr > td, .table-layout.middle table > tbody > tr > th, .table-layout.middle table > tbody > tr > td {
  vertical-align: middle;
}
.table-layout.small table > thead > tr > th, .table-layout.small table > tbody > tr > th {
  padding: 3px 5px;
  font-size: 1.1rem;
}
.table-layout.small table > thead > tr > td, .table-layout.small table > tbody > tr > td {
  padding: 3px 5px;
  font-size: 1.1rem;
}
.table-layout table {
  width: 100%;
}
.table-layout table > thead > tr > th, .table-layout table > tbody > tr > th {
  box-sizing: border-box;
  height: 36px;
  padding: 9px 10px;
  background-color: #f6f7f8;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
  text-align: left;
  vertical-align: top;
}
.table-layout table > thead > tr > th.center, .table-layout table > tbody > tr > th.center {
  text-align: center;
}
.table-layout table > thead > tr > th.middle, .table-layout table > tbody > tr > th.middle {
  vertical-align: middle;
}
.table-layout table > thead > tr > th.right, .table-layout table > tbody > tr > th.right {
  text-align: right;
}
.table-layout table > thead > tr > th.blue, .table-layout table > tbody > tr > th.blue {
  background-color: #1582ed;
  color: #fff;
}
.table-layout table > thead > tr > th.blue2, .table-layout table > tbody > tr > th.blue2 {
  background-color: rgba(21, 130, 237, 0.5);
  color: #fff;
}
.table-layout table > thead > tr > th.blue3, .table-layout table > tbody > tr > th.blue3 {
  background-color: rgba(21, 130, 237, 0.1);
}
.table-layout table > thead > tr > td, .table-layout table > tbody > tr > td {
  box-sizing: border-box;
  height: 36px;
  padding: 9px 10px;
  border-bottom: 1px dashed #e1e3e8;
  font-size: 1.3rem;
  font-weight: 300;
  color: #1d1d1e;
  text-align: left;
  vertical-align: top;
}
.table-layout table > thead > tr > td.center, .table-layout table > tbody > tr > td.center {
  text-align: center;
}
.table-layout table > thead > tr > td.middle, .table-layout table > tbody > tr > td.middle {
  vertical-align: middle;
}
.table-layout table > thead > tr > td.right, .table-layout table > tbody > tr > td.right {
  text-align: right;
}
.table-layout table > thead > tr:nth-last-child(2) > td[rowspan], .table-layout table > tbody > tr:nth-last-child(2) > td[rowspan] {
  border-bottom: 0;
}
.table-layout table > tbody > tr > th {
  border-bottom: 1px dashed #dbdbdb;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
}
.table-layout table > tbody > tr:last-child th,
.table-layout table > tbody > tr:last-child td {
  border-bottom: 0;
}
.table-layout table > thead::after {
  content: "";
  width: 1px;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  right: 0;
  background-color: #fff;
}
.table-layout table > thead > tr > th {
  border-right: 1px dashed #dbdbdb;
}
.table-layout table > thead + tbody > tr > td {
  border-right: 1px dashed #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}

.template-product {
  padding: 0 28px 100px;
  font-weight: 500;
  color: #000;
  letter-spacing: -0.06em;
}
.template-product .template-title {
  margin: 80px 0 40px;
  font-size: 3rem;
  font-weight: bold;
}
.template-product .template-title + .template-title {
  padding-top: 40px;
  margin-top: 40px;
  position: relative;
}
.template-product .template-title + .template-title::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1c1c1c;
}
.template-product .template-title + .template-main-desc {
  margin-top: -20px;
}
.template-product .template-title + .template-desc {
  margin-top: -20px;
}
.template-product .template-sub-title {
  margin-top: 80px;
  font-size: 1.8rem;
}
.template-product .template-sub-title + .template-title {
  margin-top: 26px;
}
.template-product .template-main-desc {
  margin-top: 10px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.template-product .template-main-desc + .template-img {
  margin-top: 40px;
}
.template-product .template-desc {
  margin-top: 10px;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #555;
}
.template-product .template-desc + .template-img {
  margin-top: 40px;
}
.template-product .template-underline {
  margin: 80px 0;
  font-size: 1.7rem;
  line-height: 1.9;
  color: #555;
  text-decoration: underline;
  -webkit-text-decoration-color: #555;
  text-decoration-color: #555;
  text-underline-offset: 10px;
}
.template-product .template-btn {
  width: 100%;
  height: 70px;
  margin-top: 40px;
  background-color: #f5f5f5;
  border: 1px solid #1c1c1c;
  border-radius: 9px;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 70px;
}
.template-product .template-img {
  width: calc(100% + 56px);
  position: relative;
  left: -28px;
}
.template-product .template-img > img {
  display: block;
  width: 100%;
  height: auto;
}
.template-product .template-img + .template-tit {
  margin-top: 20px;
}
.template-product .template-img + .template-desc {
  margin-top: 20px;
}
.template-product .template-intro {
  margin-top: 30px;
  border-top: 2px solid #000;
}
.template-product .template-intro .row {
  display: flex;
  align-items: center;
  min-height: 100px;
  border-bottom: 1px solid #000;
}
.template-product .template-intro dt {
  flex-shrink: 0;
  width: 40%;
  font-size: 2rem;
  font-weight: 800;
  color: #000;
}
.template-product .template-intro dt img {
  width: 100%;
  vertical-align: top;
}
.template-product .template-intro dd {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 10px 0 10px 20px;
  font-size: 1.6rem;
  color: #555;
}
.template-product .template-prod {
  margin-top: 30px;
  border-top: 2px solid #000;
}
.template-product .template-prod .row {
  display: flex;
  align-items: center;
  min-height: 100px;
  border-bottom: 1px solid #ccc;
}
.template-product .template-prod dt {
  flex-shrink: 0;
  width: 140px;
}
.template-product .template-prod dt img {
  width: 100%;
  vertical-align: top;
}
.template-product .template-prod dd {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 10px 0 10px 14px;
}
.template-product .template-prod dd .title {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
}
.template-product .template-prod dd .title span {
  font-size: 1.4rem;
  font-weight: 500;
  vertical-align: middle;
}
.template-product .template-prod dd .desc {
  display: block;
  margin-top: 5px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #555;
}
.template-product .template-prod dd .comment {
  display: block;
  margin-top: 5px;
  font-size: 1.4rem;
  color: #adadad;
}
.template-product .template-bg {
  box-sizing: border-box;
  width: calc(100% + 56px);
  padding: 40px 28px;
  margin-top: 30px;
  position: relative;
  left: -28px;
  background-color: #f5f5f5;
}
.template-product .template-bg-center {
  box-sizing: border-box;
  width: 100%;
  padding: 40px 28px;
  margin-top: 30px;
  background-color: #f5f5f5;
}
.template-product .template-bg-center .template-img {
  width: calc(100% + 112px);
  left: -56px;
}
.template-product .template-tit {
  margin-top: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
}
.template-product .template-list {
  margin-top: 15px;
}
.template-product .template-list li {
  font-size: 1.6rem;
  line-height: 1.4;
  color: #555;
}
.template-product .template-list li:not(:first-child) {
  margin-top: 14px;
}
.template-product .template-number-list {
  margin-top: 30px;
}
.template-product .template-number-list li {
  padding-left: 20px;
  position: relative;
  font-size: 2rem;
}
.template-product .template-number-list li:not(:first-child) {
  margin-top: 15px;
}
.template-product .template-number-list .num {
  width: 18px;
  position: absolute;
  top: 0.4em;
  left: 0;
  background-color: #1582ec;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 18px;
  color: #fff;
  text-align: center;
}
.template-product .template-number-list .title {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #000;
}
.template-product .template-number-list .title + .tit {
  margin-top: 7px;
}
.template-product .template-number-list .tit {
  display: block;
  margin-top: 15px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
}
.template-product .template-number-list .tit + .desc {
  margin-top: 4px;
}
.template-product .template-number-list .desc {
  display: block;
  margin-top: 7px;
  font-size: 1.6rem;
  color: #555;
}
.template-product .template-number-list .comment {
  display: block;
  margin-top: 3px;
  font-size: 1.3rem;
  color: #555;
}
.template-product .template-warning-center {
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #f46178;
  text-align: center;
}
.template-product .template-table {
  margin-top: 30px;
  position: relative;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.template-product .template-table table {
  width: 100%;
}
.template-product .template-table table > thead > tr > th, .template-product .template-table table > tbody > tr > th {
  box-sizing: border-box;
  height: 36px;
  padding: 6px 10px;
  background-color: #f5f5f5;
  font-size: 1.5rem;
  font-weight: 600;
  color: #555;
  text-align: center;
  vertical-align: middle;
}
.template-product .template-table table > thead > tr > td, .template-product .template-table table > tbody > tr > td {
  box-sizing: border-box;
  height: 36px;
  padding: 6px 10px;
  font-size: 1.5rem;
  font-weight: 300;
  color: #777;
  text-align: center;
  vertical-align: middle;
}
.template-product .template-table table > tbody > tr > th {
  font-size: 1.5rem;
  font-weight: 600;
}
.template-product .template-table table > tbody > tr:last-child th,
.template-product .template-table table > tbody > tr:last-child td {
  border-bottom: 0;
}
.template-product .template-table table > thead::after {
  content: "";
  width: 1px;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  right: 0;
  background-color: #fff;
}
.template-product .template-table table > thead + tbody > tr > td {
  border-bottom: 1px solid #f5f5f5;
}

.common-container .hide:first-child + .bullet-content-list-1, .common-container .hide:first-child + .bullet-content-list-2, .common-container .hide:first-child + .bullet-content-list-3, .common-container .hide:first-child + .bullet-content-list-4 {
  margin-top: 0;
}
.bullet-content-list-1:first-child, .bullet-content-list-2:first-child, .bullet-content-list-3:first-child, .bullet-content-list-4:first-child {
  margin-top: 0;
}
.bullet-content-list-1.gray > li, .bullet-content-list-2.gray > li, .bullet-content-list-3.gray > li, .bullet-content-list-4.gray > li {
  color: #78787d;
}
.bullet-content-list-1.gray > li::after, .bullet-content-list-2.gray > li::after, .bullet-content-list-3.gray > li::after, .bullet-content-list-4.gray > li::after {
  background-color: #78787d;
  color: #78787d;
}
.bullet-content-list-1.gray2 > li, .bullet-content-list-2.gray2 > li, .bullet-content-list-3.gray2 > li, .bullet-content-list-4.gray2 > li {
  color: #8d8e8f;
}
.bullet-content-list-1.gray2 > li::after, .bullet-content-list-2.gray2 > li::after, .bullet-content-list-3.gray2 > li::after, .bullet-content-list-4.gray2 > li::after {
  background-color: #8d8e8f;
  color: #8d8e8f;
}
.bullet-content-list-1.blue > li, .bullet-content-list-2.blue > li, .bullet-content-list-3.blue > li, .bullet-content-list-4.blue > li {
  color: #1582ed;
}
.bullet-content-list-1.blue > li::after, .bullet-content-list-2.blue > li::after, .bullet-content-list-3.blue > li::after, .bullet-content-list-4.blue > li::after {
  color: #1582ed;
}
.bullet-content-list-1.error > li, .bullet-content-list-2.error > li, .bullet-content-list-3.error > li, .bullet-content-list-4.error > li {
  color: #ed1515;
}
.bullet-content-list-1.error > li::after, .bullet-content-list-2.error > li::after, .bullet-content-list-3.error > li::after, .bullet-content-list-4.error > li::after {
  background-color: #ed1515;
  color: #ed1515;
}
.bullet-content-list-1 > li, .bullet-content-list-2 > li, .bullet-content-list-3 > li, .bullet-content-list-4 > li {
  position: relative;
}
.bullet-content-list-1 > li::after, .bullet-content-list-2 > li::after, .bullet-content-list-3 > li::after, .bullet-content-list-4 > li::after {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 0.65em;
  left: -0.5em;
  background-color: #1d1d1e;
  border-radius: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.bullet-content-list-1 .bullet-content-list-1 li:not(:first-child), .bullet-content-list-2 .bullet-content-list-1 li:not(:first-child), .bullet-content-list-3 .bullet-content-list-1 li:not(:first-child), .bullet-content-list-4 .bullet-content-list-1 li:not(:first-child) {
  margin-top: 10px;
}
.bullet-content-list-1 .bullet-content-list-2 li:not(:first-child), .bullet-content-list-2 .bullet-content-list-2 li:not(:first-child), .bullet-content-list-3 .bullet-content-list-2 li:not(:first-child), .bullet-content-list-4 .bullet-content-list-2 li:not(:first-child) {
  margin-top: 8px;
}
.bullet-content-list-1 .bullet-content-list-3 li:not(:first-child), .bullet-content-list-2 .bullet-content-list-3 li:not(:first-child), .bullet-content-list-3 .bullet-content-list-3 li:not(:first-child), .bullet-content-list-4 .bullet-content-list-3 li:not(:first-child) {
  margin-top: 6px;
}
.bullet-content-list-1 .bullet-content-list-4 li:not(:first-child), .bullet-content-list-2 .bullet-content-list-4 li:not(:first-child), .bullet-content-list-3 .bullet-content-list-4 li:not(:first-child), .bullet-content-list-4 .bullet-content-list-4 li:not(:first-child) {
  margin-top: 4px;
}
.bullet-content-list-1 .heading-1:first-child,
.bullet-content-list-1 .heading-2:first-child,
.bullet-content-list-1 .heading-3:first-child,
.bullet-content-list-1 .heading-4:first-child,
.bullet-content-list-1 .heading-5:first-child,
.bullet-content-list-1 .heading-6:first-child,
.bullet-content-list-1 .heading-7:first-child, .bullet-content-list-2 .heading-1:first-child,
.bullet-content-list-2 .heading-2:first-child,
.bullet-content-list-2 .heading-3:first-child,
.bullet-content-list-2 .heading-4:first-child,
.bullet-content-list-2 .heading-5:first-child,
.bullet-content-list-2 .heading-6:first-child,
.bullet-content-list-2 .heading-7:first-child, .bullet-content-list-3 .heading-1:first-child,
.bullet-content-list-3 .heading-2:first-child,
.bullet-content-list-3 .heading-3:first-child,
.bullet-content-list-3 .heading-4:first-child,
.bullet-content-list-3 .heading-5:first-child,
.bullet-content-list-3 .heading-6:first-child,
.bullet-content-list-3 .heading-7:first-child, .bullet-content-list-4 .heading-1:first-child,
.bullet-content-list-4 .heading-2:first-child,
.bullet-content-list-4 .heading-3:first-child,
.bullet-content-list-4 .heading-4:first-child,
.bullet-content-list-4 .heading-5:first-child,
.bullet-content-list-4 .heading-6:first-child,
.bullet-content-list-4 .heading-7:first-child {
  margin-top: 6px;
}
.bullet-content-list-1 .paragraph-1:first-child,
.bullet-content-list-1 .paragraph-2:first-child,
.bullet-content-list-1 .paragraph-3:first-child,
.bullet-content-list-1 .paragraph-4:first-child,
.bullet-content-list-1 .paragraph-5:first-child,
.bullet-content-list-1 .paragraph-6:first-child,
.bullet-content-list-1 .paragraph-7:first-child, .bullet-content-list-2 .paragraph-1:first-child,
.bullet-content-list-2 .paragraph-2:first-child,
.bullet-content-list-2 .paragraph-3:first-child,
.bullet-content-list-2 .paragraph-4:first-child,
.bullet-content-list-2 .paragraph-5:first-child,
.bullet-content-list-2 .paragraph-6:first-child,
.bullet-content-list-2 .paragraph-7:first-child, .bullet-content-list-3 .paragraph-1:first-child,
.bullet-content-list-3 .paragraph-2:first-child,
.bullet-content-list-3 .paragraph-3:first-child,
.bullet-content-list-3 .paragraph-4:first-child,
.bullet-content-list-3 .paragraph-5:first-child,
.bullet-content-list-3 .paragraph-6:first-child,
.bullet-content-list-3 .paragraph-7:first-child, .bullet-content-list-4 .paragraph-1:first-child,
.bullet-content-list-4 .paragraph-2:first-child,
.bullet-content-list-4 .paragraph-3:first-child,
.bullet-content-list-4 .paragraph-4:first-child,
.bullet-content-list-4 .paragraph-5:first-child,
.bullet-content-list-4 .paragraph-6:first-child,
.bullet-content-list-4 .paragraph-7:first-child {
  margin-top: 2px;
}
.bullet-content-list-1 .bullet-list-1:first-child,
.bullet-content-list-1 .bullet-list-2:first-child,
.bullet-content-list-1 .bullet-list-3:first-child,
.bullet-content-list-1 .bullet-list-4:first-child, .bullet-content-list-2 .bullet-list-1:first-child,
.bullet-content-list-2 .bullet-list-2:first-child,
.bullet-content-list-2 .bullet-list-3:first-child,
.bullet-content-list-2 .bullet-list-4:first-child, .bullet-content-list-3 .bullet-list-1:first-child,
.bullet-content-list-3 .bullet-list-2:first-child,
.bullet-content-list-3 .bullet-list-3:first-child,
.bullet-content-list-3 .bullet-list-4:first-child, .bullet-content-list-4 .bullet-list-1:first-child,
.bullet-content-list-4 .bullet-list-2:first-child,
.bullet-content-list-4 .bullet-list-3:first-child,
.bullet-content-list-4 .bullet-list-4:first-child {
  margin-top: 5px;
}
.bullet-content-list-1 .bullet-list-1,
.bullet-content-list-1 .bullet-list-2,
.bullet-content-list-1 .bullet-list-3,
.bullet-content-list-1 .bullet-list-4, .bullet-content-list-2 .bullet-list-1,
.bullet-content-list-2 .bullet-list-2,
.bullet-content-list-2 .bullet-list-3,
.bullet-content-list-2 .bullet-list-4, .bullet-content-list-3 .bullet-list-1,
.bullet-content-list-3 .bullet-list-2,
.bullet-content-list-3 .bullet-list-3,
.bullet-content-list-3 .bullet-list-4, .bullet-content-list-4 .bullet-list-1,
.bullet-content-list-4 .bullet-list-2,
.bullet-content-list-4 .bullet-list-3,
.bullet-content-list-4 .bullet-list-4 {
  margin-top: 5px;
}
.bullet-content-list-1 .bullet-content-list-1:first-child,
.bullet-content-list-1 .bullet-content-list-2:first-child,
.bullet-content-list-1 .bullet-content-list-3:first-child,
.bullet-content-list-1 .bullet-content-list-4:first-child, .bullet-content-list-2 .bullet-content-list-1:first-child,
.bullet-content-list-2 .bullet-content-list-2:first-child,
.bullet-content-list-2 .bullet-content-list-3:first-child,
.bullet-content-list-2 .bullet-content-list-4:first-child, .bullet-content-list-3 .bullet-content-list-1:first-child,
.bullet-content-list-3 .bullet-content-list-2:first-child,
.bullet-content-list-3 .bullet-content-list-3:first-child,
.bullet-content-list-3 .bullet-content-list-4:first-child, .bullet-content-list-4 .bullet-content-list-1:first-child,
.bullet-content-list-4 .bullet-content-list-2:first-child,
.bullet-content-list-4 .bullet-content-list-3:first-child,
.bullet-content-list-4 .bullet-content-list-4:first-child {
  margin-top: 4px;
}
.bullet-content-list-1 .img-box:first-child, .bullet-content-list-2 .img-box:first-child, .bullet-content-list-3 .img-box:first-child, .bullet-content-list-4 .img-box:first-child {
  margin-top: 6px;
}
.bullet-content-list-1 .str:first-child + .heading-1, .bullet-content-list-1 .str:first-child + .heading-2, .bullet-content-list-1 .str:first-child + .heading-3, .bullet-content-list-1 .str:first-child + .heading-4, .bullet-content-list-1 .str:first-child + .heading-5, .bullet-content-list-1 .str:first-child + .heading-6, .bullet-content-list-1 .str:first-child + .heading-7, .bullet-content-list-2 .str:first-child + .heading-1, .bullet-content-list-2 .str:first-child + .heading-2, .bullet-content-list-2 .str:first-child + .heading-3, .bullet-content-list-2 .str:first-child + .heading-4, .bullet-content-list-2 .str:first-child + .heading-5, .bullet-content-list-2 .str:first-child + .heading-6, .bullet-content-list-2 .str:first-child + .heading-7, .bullet-content-list-3 .str:first-child + .heading-1, .bullet-content-list-3 .str:first-child + .heading-2, .bullet-content-list-3 .str:first-child + .heading-3, .bullet-content-list-3 .str:first-child + .heading-4, .bullet-content-list-3 .str:first-child + .heading-5, .bullet-content-list-3 .str:first-child + .heading-6, .bullet-content-list-3 .str:first-child + .heading-7, .bullet-content-list-4 .str:first-child + .heading-1, .bullet-content-list-4 .str:first-child + .heading-2, .bullet-content-list-4 .str:first-child + .heading-3, .bullet-content-list-4 .str:first-child + .heading-4, .bullet-content-list-4 .str:first-child + .heading-5, .bullet-content-list-4 .str:first-child + .heading-6, .bullet-content-list-4 .str:first-child + .heading-7 {
  margin-top: 6px;
}
.bullet-content-list-1 .str:first-child + .paragraph-1, .bullet-content-list-1 .str:first-child + .paragraph-2, .bullet-content-list-1 .str:first-child + .paragraph-3, .bullet-content-list-1 .str:first-child + .paragraph-4, .bullet-content-list-1 .str:first-child + .paragraph-5, .bullet-content-list-1 .str:first-child + .paragraph-6, .bullet-content-list-1 .str:first-child + .paragraph-7, .bullet-content-list-2 .str:first-child + .paragraph-1, .bullet-content-list-2 .str:first-child + .paragraph-2, .bullet-content-list-2 .str:first-child + .paragraph-3, .bullet-content-list-2 .str:first-child + .paragraph-4, .bullet-content-list-2 .str:first-child + .paragraph-5, .bullet-content-list-2 .str:first-child + .paragraph-6, .bullet-content-list-2 .str:first-child + .paragraph-7, .bullet-content-list-3 .str:first-child + .paragraph-1, .bullet-content-list-3 .str:first-child + .paragraph-2, .bullet-content-list-3 .str:first-child + .paragraph-3, .bullet-content-list-3 .str:first-child + .paragraph-4, .bullet-content-list-3 .str:first-child + .paragraph-5, .bullet-content-list-3 .str:first-child + .paragraph-6, .bullet-content-list-3 .str:first-child + .paragraph-7, .bullet-content-list-4 .str:first-child + .paragraph-1, .bullet-content-list-4 .str:first-child + .paragraph-2, .bullet-content-list-4 .str:first-child + .paragraph-3, .bullet-content-list-4 .str:first-child + .paragraph-4, .bullet-content-list-4 .str:first-child + .paragraph-5, .bullet-content-list-4 .str:first-child + .paragraph-6, .bullet-content-list-4 .str:first-child + .paragraph-7 {
  margin-top: 2px;
}
.bullet-content-list-1 .str:first-child + .bullet-content-list-1, .bullet-content-list-1 .str:first-child + .bullet-content-list-2, .bullet-content-list-1 .str:first-child + .bullet-content-list-3, .bullet-content-list-1 .str:first-child + .bullet-content-list-4, .bullet-content-list-2 .str:first-child + .bullet-content-list-1, .bullet-content-list-2 .str:first-child + .bullet-content-list-2, .bullet-content-list-2 .str:first-child + .bullet-content-list-3, .bullet-content-list-2 .str:first-child + .bullet-content-list-4, .bullet-content-list-3 .str:first-child + .bullet-content-list-1, .bullet-content-list-3 .str:first-child + .bullet-content-list-2, .bullet-content-list-3 .str:first-child + .bullet-content-list-3, .bullet-content-list-3 .str:first-child + .bullet-content-list-4, .bullet-content-list-4 .str:first-child + .bullet-content-list-1, .bullet-content-list-4 .str:first-child + .bullet-content-list-2, .bullet-content-list-4 .str:first-child + .bullet-content-list-3, .bullet-content-list-4 .str:first-child + .bullet-content-list-4 {
  margin-top: 4px;
}
.bullet-content-list-1 .str:first-child + .img-box, .bullet-content-list-2 .str:first-child + .img-box, .bullet-content-list-3 .str:first-child + .img-box, .bullet-content-list-4 .str:first-child + .img-box {
  margin-top: 6px;
}
.bullet-content-list-1 {
  padding-left: 1em;
  margin-top: 12px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-content-list-1.number {
  margin-top: 20px;
}
.bullet-content-list-1 > li:not(:first-child) {
  margin-top: 20px;
}
.bullet-content-list-2 {
  padding-left: 1em;
  margin-top: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-content-list-2.number {
  margin-top: 15px;
}
.bullet-content-list-2 > li:not(:first-child) {
  margin-top: 16px;
}
.bullet-content-list-3 {
  padding-left: 1em;
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-content-list-3.number {
  margin-top: 10px;
}
.bullet-content-list-3 > li:not(:first-child) {
  margin-top: 12px;
}
.bullet-content-list-3 > li::after {
  top: 0.65em;
}
.bullet-content-list-4 {
  padding-left: 1em;
  margin-top: 6px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-content-list-4.number {
  margin-top: 5px;
}
.bullet-content-list-4 > li:not(:first-child) {
  margin-top: 8px;
}
.bullet-content-list-4 > li::after {
  top: 0.65em;
}
.bullet-content-list-1.hypen > li, .bullet-content-list-2.hypen > li, .bullet-content-list-3.hypen > li, .bullet-content-list-4.hypen > li {
  position: relative;
}
.bullet-content-list-1.hypen > li::after, .bullet-content-list-2.hypen > li::after, .bullet-content-list-3.hypen > li::after, .bullet-content-list-4.hypen > li::after {
  content: "-";
  width: auto;
  height: auto;
  position: absolute;
  background-color: transparent;
}
.bullet-content-list-1.star > li, .bullet-content-list-2.star > li, .bullet-content-list-3.star > li, .bullet-content-list-4.star > li {
  position: relative;
}
.bullet-content-list-1.star > li::after, .bullet-content-list-2.star > li::after, .bullet-content-list-3.star > li::after, .bullet-content-list-4.star > li::after {
  content: "*";
  width: auto;
  height: auto;
  position: absolute;
  background-color: transparent;
}
.bullet-content-list-1.number, .bullet-content-list-2.number, .bullet-content-list-3.number, .bullet-content-list-4.number {
  display: block;
  padding-left: 1em;
}
.bullet-content-list-1.number > li, .bullet-content-list-2.number > li, .bullet-content-list-3.number > li, .bullet-content-list-4.number > li {
  display: list-item;
  padding-left: 0;
  position: static;
  text-indent: -1.0625em;
  list-style: decimal;
  list-style-position: inside;
  list-style-type: decimal;
}
.bullet-content-list-1.number > li::before, .bullet-content-list-2.number > li::before, .bullet-content-list-3.number > li::before, .bullet-content-list-4.number > li::before {
  content: "";
  display: inline-block;
  margin-right: 1px;
}
.bullet-content-list-1.number > li::after, .bullet-content-list-2.number > li::after, .bullet-content-list-3.number > li::after, .bullet-content-list-4.number > li::after {
  content: none;
}

.bullet-list-1, .bullet-list-2, .bullet-list-3, .bullet-list-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.common-container .hide:first-child + .bullet-list-1, .common-container .hide:first-child + .bullet-list-2, .common-container .hide:first-child + .bullet-list-3, .common-container .hide:first-child + .bullet-list-4 {
  margin-top: 0;
}
.bullet-list-1:first-child, .bullet-list-2:first-child, .bullet-list-3:first-child, .bullet-list-4:first-child {
  margin-top: 0;
}
.bullet-list-1.center, .bullet-list-2.center, .bullet-list-3.center, .bullet-list-4.center {
  align-items: center;
}
.bullet-list-1.center li, .bullet-list-2.center li, .bullet-list-3.center li, .bullet-list-4.center li {
  text-align: center;
}
.bullet-list-1.gray, .bullet-list-2.gray, .bullet-list-3.gray, .bullet-list-4.gray {
  color: #78787d;
}
.bullet-list-1.gray > li::after, .bullet-list-2.gray > li::after, .bullet-list-3.gray > li::after, .bullet-list-4.gray > li::after {
  background-color: #78787d;
  color: #78787d;
}
.bullet-list-1.gray2, .bullet-list-2.gray2, .bullet-list-3.gray2, .bullet-list-4.gray2 {
  color: #8d8e8f;
}
.bullet-list-1.gray2 > li::after, .bullet-list-2.gray2 > li::after, .bullet-list-3.gray2 > li::after, .bullet-list-4.gray2 > li::after {
  background-color: #8d8e8f;
  color: #8d8e8f;
}
.bullet-list-1.blue, .bullet-list-2.blue, .bullet-list-3.blue, .bullet-list-4.blue {
  color: #1582ed;
}
.bullet-list-1.blue > li::after, .bullet-list-2.blue > li::after, .bullet-list-3.blue > li::after, .bullet-list-4.blue > li::after {
  background-color: #1582ed;
  color: #1582ed;
}
.bullet-list-1.error, .bullet-list-2.error, .bullet-list-3.error, .bullet-list-4.error {
  color: #ed1515;
}
.bullet-list-1.error > li::after, .bullet-list-2.error > li::after, .bullet-list-3.error > li::after, .bullet-list-4.error > li::after {
  background-color: #ed1515;
  color: #ed1515;
}
.bullet-list-1 > li, .bullet-list-2 > li, .bullet-list-3 > li, .bullet-list-4 > li {
  position: relative;
}
.bullet-list-1 > li::after, .bullet-list-2 > li::after, .bullet-list-3 > li::after, .bullet-list-4 > li::after {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  left: -0.5em;
  background-color: #1d1d1e;
  border-radius: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.img-box + .bullet-list-1, .img-box + .bullet-list-2, .img-box + .bullet-list-3, .img-box + .bullet-list-4 {
  margin-top: 10px;
}
.img-box + .bullet-list-1.reference, .img-box + .bullet-list-2.reference, .img-box + .bullet-list-3.reference, .img-box + .bullet-list-4.reference {
  margin-top: 10px;
}
.table-layout + .bullet-list-1, .table-layout + .bullet-list-2, .table-layout + .bullet-list-3, .table-layout + .bullet-list-4 {
  margin-top: 6px;
}
.bullet-list-1 {
  padding-left: 1em;
  margin-top: 5px;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-list-1 > li::after {
  top: 0.7em;
}
.bullet-list-2 {
  padding-left: 1em;
  margin-top: 5px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-list-2 > li::after {
  top: 0.7em;
}
.bullet-list-3 {
  padding-left: 1em;
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-list-3 > li::after {
  top: 0.65em;
}
.bullet-list-4 {
  padding-left: 1em;
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bullet-list-4 > li::after {
  top: 0.65em;
}
.bullet-list-1.hypen > li, .bullet-list-2.hypen > li, .bullet-list-3.hypen > li, .bullet-list-4.hypen > li {
  position: relative;
}
.bullet-list-1.hypen > li::after, .bullet-list-2.hypen > li::after, .bullet-list-3.hypen > li::after, .bullet-list-4.hypen > li::after {
  content: "-";
  width: auto;
  height: auto;
  position: absolute;
  background-color: transparent;
}
.bullet-list-1.star > li, .bullet-list-2.star > li, .bullet-list-3.star > li, .bullet-list-4.star > li {
  position: relative;
}
.bullet-list-1.star > li::after, .bullet-list-2.star > li::after, .bullet-list-3.star > li::after, .bullet-list-4.star > li::after {
  content: "*";
  width: auto;
  height: auto;
  position: absolute;
  background-color: transparent;
}
.bullet-list-1.reference, .bullet-list-2.reference, .bullet-list-3.reference, .bullet-list-4.reference {
  margin-top: 2px;
}
.bullet-list-1.reference > li, .bullet-list-2.reference > li, .bullet-list-3.reference > li, .bullet-list-4.reference > li {
  position: relative;
}
.bullet-list-1.reference > li::after, .bullet-list-2.reference > li::after, .bullet-list-3.reference > li::after, .bullet-list-4.reference > li::after {
  content: "※";
  width: auto;
  height: auto;
  position: absolute;
  background-color: transparent;
}
.table-layout + .bullet-list-1.reference, .table-layout + .bullet-list-2.reference, .table-layout + .bullet-list-3.reference, .table-layout + .bullet-list-4.reference {
  margin-top: 6px;
}
.bullet-list-1.number, .bullet-list-2.number, .bullet-list-3.number, .bullet-list-4.number {
  display: block;
}
.bullet-list-1.number > li, .bullet-list-2.number > li, .bullet-list-3.number > li, .bullet-list-4.number > li {
  display: list-item;
  padding-left: 0;
  position: static;
  text-indent: -1.0625em;
  list-style: decimal;
  list-style-position: inside;
  list-style-type: decimal;
}
.bullet-list-1.number > li::before, .bullet-list-2.number > li::before, .bullet-list-3.number > li::before, .bullet-list-4.number > li::before {
  content: "";
  display: inline-block;
  margin-right: 1px;
}
.bullet-list-1.number > li::after, .bullet-list-2.number > li::after, .bullet-list-3.number > li::after, .bullet-list-4.number > li::after {
  content: none;
}

b {
  font-weight: 600;
  vertical-align: baseline;
}

strong {
  font-weight: 600;
  vertical-align: baseline;
}

.thin {
  font-weight: 300;
  vertical-align: baseline;
}

.str {
  color: #1d1d1e;
  vertical-align: baseline;
}
.str.primary {
  color: #26479a;
}
.str.brand {
  color: #233b77;
}
.str.blue {
  color: #1582ed;
}
.str.mint {
  color: #0fcbcb;
}
.str.pink {
  color: #ff526d;
}
.str.purple {
  color: #9d30e0;
}
.str.yellow {
  color: #ffce31;
}
.str.gray {
  color: #8d8e8f;
}
.str.error {
  color: #ed1515;
}
.str.disabled {
  color: #f0f1f4;
}

hr {
  margin-top: 20px;
  margin-bottom: 10px;
  border-top: 1px solid #1d1d1e;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}
hr.dashed {
  border-style: dashed;
}
hr.dotted {
  border-style: dotted;
}
hr.gray {
  border-color: #8d8e8f;
}
hr.gray2 {
  border-color: #e1e3e8;
}

.comment-list {
  display: flex;
  flex-direction: column;
  padding: 0 6px;
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.comment-list:first-child {
  margin-top: 0;
}
.comment-list.star > span, .comment-list.star > li {
  padding-left: 10px;
  position: relative;
}
.comment-list.star > span::after, .comment-list.star > li::after {
  content: "*";
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  background-color: transparent;
}
.comment-list.hyphen > span, .comment-list.hyphen > li {
  padding-left: 10px;
  position: relative;
}
.comment-list.hyphen > span::after, .comment-list.hyphen > li::after {
  content: "-";
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  background-color: transparent;
}
.comment-list.reference > span, .comment-list.reference > li {
  padding-left: 13px;
  position: relative;
}
.comment-list.reference > span::after, .comment-list.reference > li::after {
  content: "※";
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  background-color: transparent;
}
.comment-list > span, .comment-list > li {
  padding-left: 10px;
  position: relative;
}
.comment-list > span::after, .comment-list > li::after {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 0.65em;
  left: 1px;
  background-color: #8d8e8f;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.comment-warning {
  display: block;
  padding-left: 20px;
  margin-top: 10px;
  position: relative;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.comment-warning::after {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image: url("../img/common/icon-warning.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.comment-warning-list .title {
  padding-left: 20px;
  margin-bottom: 6px;
  position: relative;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #78787d;
}
.comment-warning-list .title::after {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-image: url("../img/common/icon-warning.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.comment-warning-list .title + .sub-title {
  margin-top: 6px;
}
.comment-warning-list .sub-title {
  padding-left: 17px;
  margin-top: 15px;
  margin-bottom: 2px;
  position: relative;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: #78787d;
}
.comment-warning-list .sub-title::after {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 0.65em;
  left: 6px;
  background-color: #8d8e8f;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.comment-warning-list .list {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.comment-warning-list .list > li {
  padding-left: 17px;
  position: relative;
}
.comment-warning-list .list > li::after {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 0.65em;
  left: 6px;
  background-color: #8d8e8f;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.comment-warning-list .list.number li {
  text-indent: -1.0625em;
  list-style: decimal;
  list-style-position: inside;
  list-style-type: decimal;
}
.comment-warning-list .list.number li::before {
  content: "";
  display: inline-block;
  margin-right: 1px;
}
.comment-warning-list .list.number li::after {
  content: none;
}
.comment-warning-list .list ul,
.comment-warning-list .list ol {
  margin-top: 2px;
  margin-bottom: 15px;
}
.comment-warning-list .list ul li,
.comment-warning-list .list ol li {
  padding-left: 10px;
  position: relative;
}
.comment-warning-list .list ul li::after,
.comment-warning-list .list ol li::after {
  content: "-";
  position: absolute;
  top: 0.65em;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.comment-attention {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #b4b8c0;
}

.common-container .hide:first-child + .heading-1, .common-container .hide:first-child + .heading-2, .common-container .hide:first-child + .heading-3, .common-container .hide:first-child + .heading-4, .common-container .hide:first-child + .heading-5, .common-container .hide:first-child + .heading-6, .common-container .hide:first-child + .heading-7 {
  margin-top: 0;
}
.heading-1:first-child, .heading-2:first-child, .heading-3:first-child, .heading-4:first-child, .heading-5:first-child, .heading-6:first-child, .heading-7:first-child {
  margin-top: 0;
}
.heading-1.center, .heading-2.center, .heading-3.center, .heading-4.center, .heading-5.center, .heading-6.center, .heading-7.center {
  text-align: center;
}
.heading-1.center.underline, .heading-2.center.underline, .heading-3.center.underline, .heading-4.center.underline, .heading-5.center.underline, .heading-6.center.underline, .heading-7.center.underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-position: under;
}
.heading-1 + .heading-1, .heading-1 + .heading-2, .heading-1 + .heading-3, .heading-1 + .heading-4, .heading-1 + .heading-5, .heading-1 + .heading-6, .heading-1 + .heading-7, .heading-1 + .content-head, .heading-2 + .heading-1, .heading-2 + .heading-2, .heading-2 + .heading-3, .heading-2 + .heading-4, .heading-2 + .heading-5, .heading-2 + .heading-6, .heading-2 + .heading-7, .heading-2 + .content-head, .heading-3 + .heading-1, .heading-3 + .heading-2, .heading-3 + .heading-3, .heading-3 + .heading-4, .heading-3 + .heading-5, .heading-3 + .heading-6, .heading-3 + .heading-7, .heading-3 + .content-head, .heading-4 + .heading-1, .heading-4 + .heading-2, .heading-4 + .heading-3, .heading-4 + .heading-4, .heading-4 + .heading-5, .heading-4 + .heading-6, .heading-4 + .heading-7, .heading-4 + .content-head, .heading-5 + .heading-1, .heading-5 + .heading-2, .heading-5 + .heading-3, .heading-5 + .heading-4, .heading-5 + .heading-5, .heading-5 + .heading-6, .heading-5 + .heading-7, .heading-5 + .content-head, .heading-6 + .heading-1, .heading-6 + .heading-2, .heading-6 + .heading-3, .heading-6 + .heading-4, .heading-6 + .heading-5, .heading-6 + .heading-6, .heading-6 + .heading-7, .heading-6 + .content-head, .heading-7 + .heading-1, .heading-7 + .heading-2, .heading-7 + .heading-3, .heading-7 + .heading-4, .heading-7 + .heading-5, .heading-7 + .heading-6, .heading-7 + .heading-7, .heading-7 + .content-head {
  margin-top: 8px;
}
.heading-1 small, .heading-2 small, .heading-3 small, .heading-4 small, .heading-5 small, .heading-6 small, .heading-7 small {
  margin-left: 2px;
  font-size: 70.83%;
  font-weight: 400;
  vertical-align: baseline;
}
.heading-1 small.block, .heading-2 small.block, .heading-3 small.block, .heading-4 small.block, .heading-5 small.block, .heading-6 small.block, .heading-7 small.block {
  display: block;
  margin-left: 0;
}
.heading-1 {
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.heading-1 .thin {
  font-weight: 400;
}
.heading-2 {
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.heading-2 .thin {
  font-weight: 400;
}
.heading-3 {
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.heading-3 .thin {
  font-weight: 400;
}
.heading-4 {
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.heading-4 .thin {
  font-weight: 400;
}
.heading-4 small {
  font-size: 1.7rem;
}
.heading-5 {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.heading-5 .thin {
  font-weight: 400;
}
.heading-6 {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.heading-6 .thin {
  font-weight: 400;
}
.heading-7 {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.heading-7 .thin {
  font-weight: 400;
}

.license-title {
  margin-top: 20px;
  margin-bottom: 11px;
  font-size: 1.6rem;
  font-weight: 600;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.license-title:first-child {
  margin-top: 0;
}

.license-desc {
  margin-top: 11px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.26;
  color: #8d8e8f;
}
.license-desc:first-child {
  margin-top: 0;
}
.license-desc + .table-layout {
  margin-top: 18px;
}
.license-desc + .license-desc {
  margin-top: 6px;
}

.license-important {
  margin-top: 20px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.license-important:first-child {
  margin-top: 0;
}

.license-list {
  margin-top: 11px;
}
.license-list + .table-layout {
  margin-top: 18px;
}
.license-list > li {
  padding-left: 1.27em;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-indent: -1.27em;
}
.license-list > li:not(:first-child) {
  margin-top: 10px;
}
.license-list .license-list {
  margin-top: 5px;
}
.license-list .license-list > li:not(:first-child) {
  margin-top: 5px;
}

.license-action {
  flex-direction: column;
  margin-top: 10px;
}
.license-action .btn-more-txt {
  padding-right: 0;
  padding-left: 0;
  margin-right: 10px;
}

.common-container .hide:first-child + .paragraph-1, .common-container .hide:first-child + .paragraph-2, .common-container .hide:first-child + .paragraph-3, .common-container .hide:first-child + .paragraph-4 {
  margin-top: 0;
}
.paragraph-1:first-child, .paragraph-2:first-child, .paragraph-3:first-child, .paragraph-4:first-child {
  margin-top: 0;
}
.paragraph-1.gray, .paragraph-2.gray, .paragraph-3.gray, .paragraph-4.gray {
  color: #78787d;
}
.paragraph-1.gray2, .paragraph-2.gray2, .paragraph-3.gray2, .paragraph-4.gray2 {
  color: #8d8e8f;
}
.paragraph-1.center, .paragraph-2.center, .paragraph-3.center, .paragraph-4.center {
  text-align: center;
}
.img-box + .paragraph-1, .img-box + .paragraph-2, .img-box + .paragraph-3, .img-box + .paragraph-4 {
  margin-top: 15px;
}
.paragraph-1 {
  margin-top: 5px;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.paragraph-2 {
  margin-top: 5px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.paragraph-2 b,
.paragraph-2 strong {
  font-weight: 500;
}
.paragraph-3 {
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.paragraph-3 b,
.paragraph-3 strong {
  font-weight: 500;
}
.paragraph-4 {
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.paragraph-4 b,
.paragraph-4 strong {
  font-weight: 500;
}

.character-gomi.basic {
  display: inline-flex;
  width: 82px;
}
.character-gomi.basic .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 121.9512195122%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-basic.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.jump {
  display: inline-flex;
  width: 105px;
}
.character-gomi.jump .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 95.2380952381%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-jump.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.signature {
  display: inline-flex;
  width: 89px;
}
.character-gomi.signature .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 112.3595505618%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-signature.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.sit {
  display: inline-flex;
  width: 105px;
}
.character-gomi.sit .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 95.2380952381%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-sit.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.hat {
  display: inline-flex;
  width: 88px;
}
.character-gomi.hat .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 113.6363636364%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-hat.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.bib {
  display: inline-flex;
  width: 85px;
}
.character-gomi.bib .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 110.5882352941%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-bib.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.bib2 {
  display: inline-flex;
  width: 79px;
}
.character-gomi.bib2 .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 93.6708860759%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-bib2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.spoon {
  display: inline-flex;
  width: 100px;
}
.character-gomi.spoon .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 98%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-spoon.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-gomi.error {
  display: inline-flex;
  width: 95px;
}
.character-gomi.error .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 94.7368421053%;
  overflow: hidden;
  background-image: url("../img/character/character-gomi-error.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-langi.basic {
  display: inline-flex;
  width: 48px;
}
.character-langi.basic .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 125%;
  overflow: hidden;
  background-image: url("../img/character/character-langi-basic.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-langi.jump {
  display: inline-flex;
  width: 48px;
}
.character-langi.jump .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 125%;
  overflow: hidden;
  background-image: url("../img/character/character-langi-jump.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-langi.signature {
  display: inline-flex;
  width: 47px;
}
.character-langi.signature .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 127.6595744681%;
  overflow: hidden;
  background-image: url("../img/character/character-langi-signature.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-langi.sit {
  display: inline-flex;
  width: 52px;
}
.character-langi.sit .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 115.3846153846%;
  overflow: hidden;
  background-image: url("../img/character/character-langi-sit.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-langi.hat {
  display: inline-flex;
  width: 46px;
}
.character-langi.hat .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 130.4347826087%;
  overflow: hidden;
  background-image: url("../img/character/character-langi-hat.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-langi.bib {
  display: inline-flex;
  width: 47px;
}
.character-langi.bib .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 127.6595744681%;
  overflow: hidden;
  background-image: url("../img/character/character-langi-bib.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.basic {
  display: inline-flex;
  width: 48px;
}
.character-coco.basic .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 104.1666666667%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-basic.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.jump {
  display: inline-flex;
  width: 46px;
}
.character-coco.jump .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 108.6956521739%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-jump.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.signature {
  display: inline-flex;
  width: 42px;
}
.character-coco.signature .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 119.0476190476%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-signature.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.sit {
  display: inline-flex;
  width: 54px;
}
.character-coco.sit .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 92.5925925926%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-sit.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.hat {
  display: inline-flex;
  width: 41px;
}
.character-coco.hat .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 121.9512195122%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-hat.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.bib {
  display: inline-flex;
  width: 46px;
}
.character-coco.bib .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 108.6956521739%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-bib.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.bib2 {
  display: inline-flex;
  width: 46px;
}
.character-coco.bib2 .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 108.6956521739%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-bib2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.error {
  display: inline-flex;
  width: 80px;
}
.character-coco.error .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 87.5%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-error.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-coco.empty {
  display: inline-flex;
  width: 108px;
}
.character-coco.empty .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 70.3703703704%;
  overflow: hidden;
  background-image: url("../img/character/character-coco-empty.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-loli.basic {
  display: inline-flex;
  width: 37px;
}
.character-loli.basic .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 108.1081081081%;
  overflow: hidden;
  background-image: url("../img/character/character-loli-basic.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-loli.jump {
  display: inline-flex;
  width: 38px;
}
.character-loli.jump .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 105.2631578947%;
  overflow: hidden;
  background-image: url("../img/character/character-loli-jump.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-loli.signature {
  display: inline-flex;
  width: 37px;
}
.character-loli.signature .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 108.1081081081%;
  overflow: hidden;
  background-image: url("../img/character/character-loli-signature.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-loli.sit {
  display: inline-flex;
  width: 50px;
}
.character-loli.sit .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 80%;
  overflow: hidden;
  background-image: url("../img/character/character-loli-sit.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-loli.hat {
  display: inline-flex;
  width: 35px;
}
.character-loli.hat .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 114.2857142857%;
  overflow: hidden;
  background-image: url("../img/character/character-loli-hat.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-loli.bib {
  display: inline-flex;
  width: 38px;
}
.character-loli.bib .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 105.2631578947%;
  overflow: hidden;
  background-image: url("../img/character/character-loli-bib.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-beli.basic {
  display: inline-flex;
  width: 23px;
}
.character-beli.basic .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 130.4347826087%;
  overflow: hidden;
  background-image: url("../img/character/character-beli-basic.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-beli.jump {
  display: inline-flex;
  width: 31px;
}
.character-beli.jump .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 96.7741935484%;
  overflow: hidden;
  background-image: url("../img/character/character-beli-jump.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-beli.signature {
  display: inline-flex;
  width: 20px;
}
.character-beli.signature .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background-image: url("../img/character/character-beli-signature.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-beli.sit {
  display: inline-flex;
  width: 29px;
}
.character-beli.sit .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 103.4482758621%;
  overflow: hidden;
  background-image: url("../img/character/character-beli-sit.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-beli.hat {
  display: inline-flex;
  width: 27px;
}
.character-beli.hat .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 111.1111111111%;
  overflow: hidden;
  background-image: url("../img/character/character-beli-hat.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.character-beli.bib {
  display: inline-flex;
  width: 26px;
}
.character-beli.bib .img {
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-top: 115.3846153846%;
  overflow: hidden;
  background-image: url("../img/character/character-beli-bib.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.character-group-type1 {
  width: 125px;
}
.character-group-type1 > .wrap {
  width: 100%;
  height: 0;
  padding-top: 80%;
  position: relative;
}
.character-group-type1 .img-1 {
  width: 69.6%;
  height: 0;
  padding-top: 79.2%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 13.6%;
  z-index: 2;
  background: url("../img/common/character-group-type1-1.png") no-repeat;
  background-size: cover;
}
.character-group-type1 .img-2 {
  width: 42.4%;
  height: 0;
  padding-top: 42.4%;
  overflow: hidden;
  position: absolute;
  top: 47%;
  left: 58.4%;
  z-index: 3;
  background: url("../img/common/character-group-type1-2.png") no-repeat;
  background-size: cover;
}
.character-group-type1 .img-3 {
  width: 35.2%;
  height: 0;
  padding-top: 36.8%;
  overflow: hidden;
  position: absolute;
  top: 53%;
  left: 0;
  z-index: 1;
  background: url("../img/common/character-group-type1-3.png") no-repeat;
  background-size: cover;
}
.character-group-type1 .img-4 {
  width: 31.2%;
  height: 0;
  padding-top: 23.2%;
  overflow: hidden;
  position: absolute;
  top: 71%;
  left: 18.4%;
  z-index: 3;
  background: url("../img/common/character-group-type1-4.png") no-repeat;
  background-size: cover;
}
.character-group-type1 .img-5 {
  width: 23.2%;
  height: 0;
  padding-top: 22.4%;
  overflow: hidden;
  position: absolute;
  top: 9%;
  left: 64.8%;
  z-index: 1;
  background: url("../img/common/character-group-type1-5.png") no-repeat;
  background-size: cover;
}
.character-group-type1 .img-6 {
  width: 16%;
  height: 0;
  padding-top: 16.8%;
  overflow: hidden;
  position: absolute;
  top: 46%;
  left: 29.6%;
  z-index: 3;
  background: url("../img/common/character-group-type1-6.png") no-repeat;
  background-size: cover;
}

.character-group-type2 {
  width: 133px;
}
.character-group-type2 > .wrap {
  width: 100%;
  height: 0;
  padding-top: 75.1879699248%;
  position: relative;
}
.character-group-type2 > .wrap .img-1 {
  width: 63.9097744361%;
  height: 0;
  padding-top: 75.1879699248%;
  position: absolute;
  top: 0;
  left: 18.045112782%;
  z-index: 2;
  background: url("../img/common/character-group-type2-1.png") no-repeat;
  background-size: cover;
}
.character-group-type2 > .wrap .img-2 {
  width: 32.3308270677%;
  height: 0;
  padding-top: 45.8646616541%;
  position: absolute;
  top: 40%;
  left: 68.4210526316%;
  z-index: 3;
  background: url("../img/common/character-group-type2-2.png") no-repeat;
  background-size: cover;
}
.character-group-type2 > .wrap .img-3 {
  width: 34.5864661654%;
  height: 0;
  padding-top: 39.0977443609%;
  position: absolute;
  top: 49%;
  left: 0;
  z-index: 3;
  background: url("../img/common/character-group-type2-3.png") no-repeat;
  background-size: cover;
}
.character-group-type2 > .wrap .img-4 {
  width: 29.3233082707%;
  height: 0;
  padding-top: 29.3233082707%;
  position: absolute;
  top: 22%;
  left: 5.2631578947%;
  z-index: 1;
  background: url("../img/common/character-group-type2-4.png") no-repeat;
  background-size: cover;
}
.character-group-type2 > .wrap .img-5 {
  width: 10.5263157895%;
  height: 0;
  padding-top: 9.022556391%;
  position: absolute;
  top: 13%;
  left: 37.5939849624%;
  z-index: 3;
  background: url("../img/common/character-group-type2-6.png") no-repeat;
  background-size: cover;
}

.character-group-type3 {
  width: 123px;
}
.character-group-type3 > .wrap {
  width: 100%;
  height: 0;
  padding-top: 81.3008130081%;
  position: relative;
}
.character-group-type3 .img-1 {
  width: 54.4715447154%;
  height: 0;
  padding-top: 65.8536585366%;
  overflow: hidden;
  position: absolute;
  top: 15%;
  left: 25.2032520325%;
  z-index: 1;
  background: url("../img/common/character-group-type3-1.png") no-repeat;
  background-size: cover;
}
.character-group-type3 .img-2 {
  width: 30.8943089431%;
  height: 0;
  padding-top: 38.2113821138%;
  overflow: hidden;
  position: absolute;
  top: 45%;
  left: 0;
  background: url("../img/common/character-group-type3-2.png") no-repeat;
  background-size: cover;
}
.character-group-type3 .img-3 {
  width: 27.6422764228%;
  height: 0;
  padding-top: 33.3333333333%;
  overflow: hidden;
  position: absolute;
  top: 51%;
  left: 73.1707317073%;
  background: url("../img/common/character-group-type3-3.png") no-repeat;
  background-size: cover;
}
.character-group-type3 .img-4 {
  width: 26.0162601626%;
  height: 0;
  padding-top: 26.8292682927%;
  overflow: hidden;
  position: absolute;
  top: 13%;
  left: 69.1056910569%;
  background: url("../img/common/character-group-type3-4.png") no-repeat;
  background-size: cover;
}
.character-group-type3 .img-5 {
  width: 21.1382113821%;
  height: 0;
  padding-top: 20.325203252%;
  overflow: hidden;
  position: absolute;
  top: 14%;
  left: 12.1951219512%;
  background: url("../img/common/character-group-type3-5.png") no-repeat;
  background-size: cover;
}
.character-group-type3 .img-6 {
  width: 15.4471544715%;
  height: 0;
  padding-top: 13.8211382114%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 45.5284552846%;
  background: url("../img/common/character-group-type3-6.png") no-repeat;
  background-size: cover;
}
.character-group-type3 .img-7 {
  width: 62.6016260163%;
  height: 0;
  padding-top: 3.2520325203%;
  overflow: hidden;
  position: absolute;
  top: 96%;
  left: 19.512195122%;
  background: url("../img/common/character-group-type3-7.png") no-repeat;
  background-size: cover;
}
@-webkit-keyframes resultComplt1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes resultComplt1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes resultComplt2 {
  0% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes resultComplt2 {
  0% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes resultComplt3 {
  0% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes resultComplt3 {
  0% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes resultComplt4 {
  0% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes resultComplt4 {
  0% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes resultComplt5 {
  0% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes resultComplt5 {
  0% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes resultComplt6 {
  0% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes resultComplt6 {
  0% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes resultComplt7 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes resultComplt7 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
html.init .character-group-type3.motion .img-1 {
  -webkit-animation: resultComplt1 0.5s;
  animation: resultComplt1 0.5s;
}
html.init .character-group-type3.motion .img-2 {
  -webkit-animation: resultComplt2 1s;
  animation: resultComplt2 1s;
}
html.init .character-group-type3.motion .img-3 {
  -webkit-animation: resultComplt3 1s;
  animation: resultComplt3 1s;
}
html.init .character-group-type3.motion .img-4 {
  -webkit-animation: resultComplt4 1s;
  animation: resultComplt4 1s;
}
html.init .character-group-type3.motion .img-5 {
  -webkit-animation: resultComplt5 1s;
  animation: resultComplt5 1s;
}
html.init .character-group-type3.motion .img-6 {
  -webkit-animation: resultComplt6 1s;
  animation: resultComplt6 1s;
}
html.init .character-group-type3.motion .img-7 {
  -webkit-animation: resultComplt7 0.5s;
  animation: resultComplt7 0.5s;
}

.character-group-type4 {
  width: 180px;
}
.character-group-type4 > .wrap {
  width: 100%;
  height: 0;
  padding-top: 55.5555555556%;
  position: relative;
}
.character-group-type4 > .wrap .img-1 {
  width: 44.4444444444%;
  height: 0;
  padding-top: 53.8888888889%;
  position: absolute;
  top: 3%;
  left: 27.7777777778%;
  background: url("../img/common/character-group-type4-1.png") no-repeat;
  background-size: cover;
}
.character-group-type4 > .wrap .img-2 {
  width: 26.1111111111%;
  height: 0;
  padding-top: 33.3333333333%;
  position: absolute;
  top: 20%;
  left: 0;
  background: url("../img/common/character-group-type4-2.png") no-repeat;
  background-size: cover;
}
.character-group-type4 > .wrap .img-3 {
  width: 21.1111111111%;
  height: 0;
  padding-top: 22.2222222222%;
  position: absolute;
  top: 60%;
  left: 13.8888888889%;
  z-index: 1;
  background: url("../img/common/character-group-type4-3.png") no-repeat;
  background-size: cover;
}
.character-group-type4 > .wrap .img-4 {
  width: 25.5555555556%;
  height: 0;
  padding-top: 27.7777777778%;
  position: absolute;
  top: 41%;
  left: 66.1111111111%;
  z-index: 1;
  background: url("../img/common/character-group-type4-4.png") no-repeat;
  background-size: cover;
}
.character-group-type4 > .wrap .img-5 {
  width: 16.6666666667%;
  height: 0;
  padding-top: 16.6666666667%;
  position: absolute;
  top: 14%;
  left: 83.3333333333%;
  background: url("../img/common/character-group-type4-5.png") no-repeat;
  background-size: cover;
}
.character-group-type4 > .wrap .img-6 {
  width: 12.2222222222%;
  height: 0;
  padding-top: 11.6666666667%;
  position: absolute;
  top: 0;
  left: 65.5555555556%;
  background: url("../img/common/character-group-type4-6.png") no-repeat;
  background-size: cover;
}

.character-group-type5 {
  width: 184px;
}
.character-group-type5 > .wrap {
  width: 100%;
  height: 0;
  padding-top: 54.347826087%;
  position: relative;
}
.character-group-type5 > .wrap .img-1 {
  width: 40.2173913043%;
  height: 0;
  padding-top: 48.3695652174%;
  position: absolute;
  top: 11%;
  left: 30.4347826087%;
  background: url("../img/common/character-group-type5-1.png") no-repeat;
  background-size: cover;
}
.character-group-type5 > .wrap .img-2 {
  width: 23.9130434783%;
  height: 0;
  padding-top: 29.8913043478%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url("../img/common/character-group-type5-2.png") no-repeat;
  background-size: cover;
}
.character-group-type5 > .wrap .img-3 {
  width: 19.5652173913%;
  height: 0;
  padding-top: 20.1086956522%;
  position: absolute;
  top: 60%;
  left: 19.5652173913%;
  z-index: 1;
  background: url("../img/common/character-group-type5-3.png") no-repeat;
  background-size: cover;
}
.character-group-type5 > .wrap .img-4 {
  width: 23.3695652174%;
  height: 0;
  padding-top: 25%;
  position: absolute;
  top: 55%;
  left: 63.5869565217%;
  z-index: 1;
  background: url("../img/common/character-group-type5-4.png") no-repeat;
  background-size: cover;
}
.character-group-type5 > .wrap .img-5 {
  width: 15.2173913043%;
  height: 0;
  padding-top: 15.2173913043%;
  position: absolute;
  top: 41%;
  left: 84.7826086957%;
  background: url("../img/common/character-group-type5-5.png") no-repeat;
  background-size: cover;
}
.character-group-type5 > .wrap .img-6 {
  width: 4.8913043478%;
  height: 0;
  padding-top: 4.347826087%;
  position: absolute;
  top: 9%;
  left: 22.8260869565%;
  background: url("../img/common/character-group-type5-6.png") no-repeat;
  background-size: cover;
}
.character-group-type5 > .wrap .img-7 {
  width: 8.152173913%;
  height: 0;
  padding-top: 7.0652173913%;
  position: absolute;
  top: 19%;
  left: 24.4565217391%;
  background: url("../img/common/character-group-type5-7.png") no-repeat;
  background-size: cover;
}
.character-group-type5 > .wrap .img-8 {
  width: 7.0652173913%;
  height: 0;
  padding-top: 7.0652173913%;
  position: absolute;
  top: 16%;
  left: 66.3043478261%;
  background: url("../img/common/character-group-type5-8.png") no-repeat;
  background-size: cover;
}

/* B이야기 공통 */
/* B이야기 메인 */
.bstory-index .result-info {
  margin: 40px 0;
}
.bstory-index .result-info .title {
  font-weight: 400;
}
.bstory-index .news-col + .news-col {
  margin-top: 30px;
}
.bstory-index .news-col > a {
  display: block;
}
.bstory-index .news-col > a > .wrap {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}
.bstory-index .news-col > .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bstory-index .news-col .img {
  width: 100%;
  height: 0;
  padding-top: 41.7910447761%;
  overflow: hidden;
  position: relative;
}
.bstory-index .news-col .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.bstory-index .news-col .content {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  position: relative;
}
.bstory-index .news-col .new {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  position: absolute;
  right: 10px;
  bottom: 0;
  background-color: #ffce31;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  -webkit-transform: translateY(calc(100% + 10px));
  transform: translateY(calc(100% + 10px));
}
.bstory-index .news-col .category {
  margin-bottom: 5px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #26479a;
}
.bstory-index .news-col .title {
  width: 100%;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bstory-index .news-col-scroll {
  width: calc(100% + 20px);
  overflow: visible;
}
.bstory-index .news-col-scroll + .news-col-scroll {
  margin-top: 30px;
}
.bstory-index .news-col-scroll:not(.is-destroy) .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  width: auto;
  margin-top: 30px;
  position: static;
  top: auto;
  left: auto;
}
.bstory-index .news-col-scroll:not(.is-destroy) .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.bstory-index .news-col-scroll:not(.is-destroy) .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.bstory-index .readmore-menu {
  margin-top: 40px;
}
.bstory-index .readmore-menu a {
  display: block;
}
.bstory-index .readmore-menu .item {
  display: flex;
  flex-direction: column;
  padding: 10px 24px 10px 4px;
  position: relative;
  border-bottom: 1px solid #f0f1f4;
}
.bstory-index .readmore-menu .item::after {
  content: "";
  width: 14px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.bstory-index .readmore-menu .item .category {
  margin-bottom: 2px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #26479a;
}
.bstory-index .readmore-menu .item .title {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.bstory-index .card-menu {
  margin: 50px auto 0;
}
.bstory-index .card-menu + .heading-3 {
  margin-top: 50px;
}
.bstory-index .card-menu .swiper {
  overflow: visible;
}
.bstory-index .card-menu .list li {
  width: 47.7611940299%;
}
.bstory-index .card-menu a {
  display: block;
}
.bstory-index .card-menu .item .img > img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.bstory-index .banner-heading {
  width: calc(100% + 40px);
  margin-top: 50px;
  margin-bottom: 20px;
  position: relative;
  left: -20px;
}
.bstory-index .banner-heading .content {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.bstory-index .banner-heading .title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.bstory-index .banner-heading .bg {
  width: 100%;
  height: 122px;
  margin-left: auto;
  overflow: hidden;
  background-repeat: no-repeat;
}
.bstory-index .select-customer {
  margin-top: 20px;
  margin-bottom: 12px;
}
.bstory-index .banner-box {
  margin-top: 50px;
  margin-bottom: 20px;
}
.bstory-index .promo-row-list + .btn-group {
  margin-top: 30px;
}
.bstory-index .banner-line-scroll {
  margin-top: 35px;
  margin-bottom: 50px;
}

/* B이야기 목록 */
.bstory-list .button-menu {
  margin-bottom: 30px;
}
.bstory-list .promo-col-list {
  margin-top: 20px;
}

/* B이야기 상세 */
.bstory-detail {
  padding: 30px 20px 0;
}
.bstory-detail > *:last-child.accordion {
  margin-bottom: 0 !important;
}

/* 베베쿡X서울대 */
.bebecook-seoul .board-detail {
  margin-top: 10px;
}
.bebecook-seoul .board-detail + .btn-group {
  margin-top: 30px;
}

/* 베베쿡 스토리 */
.bebecook-story .intro-start {
  text-align: center;
}
.bebecook-story .intro-start .icon {
  display: flex;
  justify-content: center;
  height: 25px;
  margin: 30px 0 10px;
}
.bebecook-story .intro-start .icon.logo {
  height: 30px;
  margin-top: 40px;
}
.bebecook-story .intro-start .icon img {
  height: 100%;
}
.bebecook-story .intro-start .title {
  margin-bottom: 10px;
  font-size: 2.4rem;
  font-weight: 600;
}
.bebecook-story .intro-start .title .comment {
  font-size: 1.7rem;
  font-weight: 400;
}
.bebecook-story .intro-start .tit {
  margin: 20px 0 5px;
  font-size: 2rem;
}
.bebecook-story .intro-start .desc {
  margin-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 300;
}
.bebecook-story .intro-start .intro {
  margin-top: 40px;
  margin-bottom: -20px;
}
.bebecook-story .intro-start .intro .icon {
  height: 30px;
}
.bebecook-story .intro-start .intro .title {
  margin-bottom: 5px;
  font-size: 2.8rem;
}
.bebecook-story .intro-start .img {
  width: calc(100% + 40px);
  margin-top: 40px;
  margin-bottom: 30px;
  margin-left: -20px;
}
.bebecook-story .intro-start .img:last-child {
  margin-bottom: -50px;
}
.bebecook-story .intro-start .img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.bebecook-story .btn-group {
  margin-top: 30px;
}

/* CF 스토리 */
.cf-story > .tab-showhide {
  margin-bottom: -50px;
}

/* 모든페이지 공통 */
.common-container .daterangepicker {
  width: calc(100% - 40px);
}
.common-container > *:first-child.banner-box-scroll {
  margin-top: -30px;
}
.common-container > *:first-child.banner-box-scroll .swiper-pagination {
  top: auto;
  bottom: 10px;
}
.common-container > *:first-child.tab-menu + .banner-box-scroll .swiper-pagination {
  top: auto;
  bottom: 10px;
}
.common-container > *:first-child.tab-showhide {
  margin-top: -20px;
}
.common-container > *:first-child.tab-menu {
  margin-top: -20px;
}
.common-container > *:first-child.tab-menu2 {
  margin-top: -20px;
}
.common-container > *:first-child.button-menu {
  margin-top: -20px;
}
.common-container > *:first-child.icon-boxmenu {
  margin-top: -20px;
}
.common-container > *:first-child.board-detail {
  margin-top: -30px;
}
.common-container > *:first-child.hide + .banner-box-scroll {
  margin-top: -30px;
}
.common-container > *:first-child.hide + .banner-box-scroll .swiper-pagination {
  top: auto;
  bottom: 10px;
}
.common-container > *:first-child.hide + .tab-menu + .banner-box-scroll .swiper-pagination {
  top: auto;
  bottom: 10px;
}
.common-container > *:first-child.hide + .tab-showhide {
  margin-top: -20px;
}
.common-container > *:first-child.hide + .tab-menu {
  margin-top: -20px;
}
.common-container > *:first-child.hide + .tab-menu2 {
  margin-top: -20px;
}
.common-container > *:first-child.hide + .button-menu {
  margin-top: -20px;
}
.common-container > *:first-child.hide + .icon-boxmenu {
  margin-top: -20px;
}
.common-container > *:first-child.hide + .board-detail {
  margin-top: -30px;
}
.common-container > *:last-child.accordion {
  margin-bottom: -51px;
}
.common-container .banner-box-scroll + .button-menu {
  margin-top: 20px;
}
.common-container .tab-menu + .button-menu {
  margin-top: 20px;
}
.common-container .form-box {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 15px 20px;
  position: relative;
  left: -20px;
  background-color: rgba(21, 130, 237, 0.1);
}
.common-container .survey-form {
  margin-top: 40px;
}
.common-container .survey-form .title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  word-wrap: break-word;
}
.common-container .survey-form .title .option {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0fcbcb;
  letter-spacing: -0.03em;
}
.common-container .survey-form .title + .paragraph-2 {
  margin-top: 10px;
}
.common-container .survey-form .title + .content {
  margin-top: 20px;
}
.common-container .survey-form > .count {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 1.6rem;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.common-container .survey-form > .count .current {
  margin-right: 10px;
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1d1d1e;
}
.common-container .survey-form > .count .total {
  margin-left: 4px;
}
.common-container .survey-form .paragraph-2 {
  font-weight: 300;
}
.common-container .survey-form .paragraph-2 + .guide {
  margin-top: 10px;
}
.common-container .survey-form .paragraph-2 + .paragraph-2 {
  margin-top: 10px;
}
.common-container .survey-form .select-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.common-container .survey-form .btn-group {
  margin-top: 30px;
}
.common-container .survey-form .btn-group .btn {
  min-width: 192px;
}

/* 제휴문의 */
.partnership-contact .form-layout + .guide-box {
  margin-top: 40px;
}
.partnership-contact .agreement-area {
  margin-top: 20px;
}
.partnership-contact .intro-contact {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 20px 20px 40px;
  margin-top: -30px;
  margin-bottom: 30px;
  position: relative;
  left: -20px;
  background-color: #26479a;
}
.partnership-contact .intro-contact .visual {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.partnership-contact .intro-contact .sub-title {
  margin-bottom: 2px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}
.partnership-contact .intro-contact .title {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
}
.partnership-contact .intro-contact .desc {
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}
.partnership-contact .btn-group {
  margin-top: 20px;
}

/* 모든팝업 공통 */
.popup-content .body *:first-child.board-detail {
  margin-top: -10px;
}
.popup-content .survey-form {
  margin-top: 40px;
}
.popup-content .survey-form .title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  word-wrap: break-word;
}
.popup-content .survey-form .title .option {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0fcbcb;
  letter-spacing: -0.03em;
}
.popup-content .survey-form .title + .paragraph-2 {
  margin-top: 10px;
}
.popup-content .survey-form .title + .content {
  margin-top: 20px;
}
.popup-content .survey-form > .count {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 1.6rem;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.popup-content .survey-form > .count .current {
  margin-right: 10px;
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1d1d1e;
}
.popup-content .survey-form > .count .total {
  margin-left: 4px;
}
.popup-content .survey-form .paragraph-2 {
  font-weight: 300;
}
.popup-content .survey-form .paragraph-2 + .guide {
  margin-top: 10px;
}
.popup-content .survey-form .paragraph-2 + .paragraph-2 {
  margin-top: 10px;
}
.popup-content .survey-form .select-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.popup-content .survey-form .btn-group {
  margin-top: 30px;
}
.popup-content .survey-form .btn-group .btn {
  min-width: 192px;
}

/* 배송지 목록 */
.delivery-container .form-layout {
  margin-top: 20px;
}
.delivery-container .form-layout .radio-circle {
  margin-top: -10px;
}
.delivery-container .form-layout + .heading-2 {
  margin-top: 50px;
}

/* 기본 confirm 팝업 */
.common-popup .popup-confirm {
  max-width: 335px;
}
.common-popup .popup-confirm .container {
  padding: 60px 20px 40px;
}
.common-popup .popup-confirm .container > .head {
  justify-content: center;
  height: auto;
}
.common-popup .popup-confirm .container > .head .title {
  color: #1d1d1e;
  text-align: center;
}
.common-popup .popup-confirm .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.common-popup .popup-confirm .container > .body {
  max-height: calc(var(--vh, 1vh) - 62px - 50px - 60px - 40px - 40px - 20px);
  margin: 0;
}
.common-popup .popup-confirm .container > .body > .comment-list {
  margin-top: 10px;
}
.common-popup .popup-confirm .container > .body > .comment-list.reference {
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-popup .popup-confirm .container > .foot {
  margin-top: 20px;
}
.common-popup .popup-confirm .container > .foot .btn-group.col {
  width: 100%;
}
.common-popup .popup-confirm .container > .foot .btn-disagree {
  margin-top: 10px;
  font-size: 1.4rem;
  color: #8d8e8f;
}

/* 상세이미지 팝업 */
.common-popup.full .popup-review-detail .container > .foot {
  height: 0;
  padding: 0;
}
.popup-review-detail .detail-image {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.popup-review-detail .detail-image .image {
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.popup-review-detail .detail-image .image > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.popup-review-detail .detail-image .thumb {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.popup-review-detail .detail-image .thumb .img {
  width: 16%;
  height: 0;
  padding-top: 16%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.popup-review-detail .detail-image .thumb .img.is-active::after {
  background-color: rgba(255, 255, 255, 0);
}
.popup-review-detail .detail-image .thumb .img::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
}
.popup-review-detail .detail-image .thumb .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 공유하기 팝업 */
.popup-share .container {
  padding: 60px 20px 40px;
}
.popup-share .container > .head {
  justify-content: center;
}
.popup-share .container > .head .title {
  color: #1d1d1e;
}
.popup-share .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-share .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.common-popup .popup-share {
  max-width: 335px;
  min-height: 270px;
}
.popup-share .icon-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}
.popup-share .icon-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-share .icon-list a .txt {
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #1d1d1e;
}

/* 쿠폰받기 팝업 */
.popup-download-coupon .container {
  padding: 60px 20px 40px;
}
.popup-download-coupon .container > .head {
  justify-content: center;
}
.popup-download-coupon .container > .head .title {
  color: #1d1d1e;
}
.popup-download-coupon .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-download-coupon .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.popup-download-coupon .coupon-list {
  margin-top: 18px;
}

/* 쿠폰사용 팝업 */
.common-popup.full .popup-apply-coupon .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-apply-coupon .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-apply-coupon .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-apply-coupon .container {
  padding-bottom: 290px;
}
.common-popup.full .popup-apply-coupon .container > .body {
  padding-top: 20px;
}
.popup-apply-coupon .user-coupon {
  font-size: 1.4rem;
  font-weight: 500;
  color: #1d1d1e;
}
.popup-apply-coupon .user-coupon .num {
  font-weight: 800;
  vertical-align: baseline;
}
.popup-apply-coupon .user-coupon .num.mint {
  color: #0fcbcb;
}
.popup-apply-coupon .coupon-list {
  margin-top: 20px;
}
.popup-apply-coupon .result-info {
  margin: 100px auto 100px;
}
.popup-apply-coupon .order-bill .item .title {
  text-align: left;
}

/* 작성 관련 팝업 */
.common-popup.full .popup-register .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-register .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-register .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.popup-register .form-layout .slider-star {
  margin-top: 4px;
  margin-bottom: 10px;
}
.popup-register .body > .form-box:first-child {
  margin-top: -12px;
}
.popup-register .body > .heading-3:first-child {
  margin-top: 8px;
  margin-bottom: 18px;
}
.popup-register .form-box {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 20px;
  position: relative;
  left: -20px;
  background-color: rgba(21, 130, 237, 0.1);
}
.popup-register .form-box + .form-layout {
  margin-top: 20px;
}
.popup-register .form-box .radio-wrap {
  display: flex;
  gap: 15px;
}
.popup-register .form-box .radio-wrap + .select-wrap {
  margin-top: 3px;
}
.popup-register .form-box .select-wrap {
  display: flex;
  gap: 9px;
}
.popup-register .form-box .select-wrap .select2 {
  flex: 1;
}

/* 상품옵션 팝업 */
.common-popup.bottom .popup-product-option {
  max-height: 90%;
  padding: 60px 20px 122px;
}
.common-popup.bottom .popup-product-option .container {
  min-height: 100%;
  padding: 0;
}
.common-popup.bottom .popup-product-option .container > .head {
  height: 0;
}
.common-popup.bottom .popup-product-option .container > .head.hidden .title {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.common-popup.bottom .popup-product-option .container > .body {
  width: calc(100% + 40px);
  max-height: calc(var(--vh, 1vh) * 0.9 - 60px - 122px);
  padding: 0 20px;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -20px;
}
.common-popup.bottom .popup-product-option .container > .foot {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.common-popup.bottom .popup-product-option .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.popup-product-option .heading-3 + .form-layout {
  margin-top: 20px;
}
.popup-product-option .icon-gift {
  margin-top: -4px;
  margin-right: 6px;
  display: inline-flex;
  width: 22px;
  height: 0;
  max-height: 0;
  padding-top: 22px;
  overflow: hidden;
  background-image: url("../img/common/icon-gift-large.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.popup-product-option .daterangepicker {
  width: calc(100% - 40px);
}
.popup-product-option .input-start-date {
  display: flex;
  width: 100%;
}
.popup-product-option .input-start-date select.select {
  width: 100%;
}
.popup-product-option .input-start-date select.select + .select2 {
  min-width: 100%;
}
.popup-product-option .order-address {
  display: flex;
  align-items: center;
}
.popup-product-option .order-address::before {
  content: "";
  flex-shrink: 0;
  margin-top: -3px;
  margin-right: 4px;
  display: inline-flex;
  width: 13px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -70px -238px;
}
.popup-product-option .order-address .tit {
  flex-grow: 1;
  overflow: hidden;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-product-option .order-address .btn {
  flex-shrink: 0;
  margin-left: auto;
}
.popup-product-option .schedule-calendar {
  margin-top: 10px;
}
.popup-product-option .order-bill .item {
  padding: 15px 0 20px;
}
.popup-product-option .form-layout {
  height: 0;
  overflow: hidden;
  position: absolute;
  left: -9999px;
}
.popup-product-option .form-layout.is-active {
  height: auto;
  overflow: visible;
  position: static;
}
.popup-product-option .form-layout .row:last-child > .content {
  padding-bottom: 60px;
}
.popup-product-option .form-layout .row.address + .row {
  padding-top: 19px;
  border-top: 1px dashed #e1e3e8;
}
.popup-product-option .form-layout .title .sub {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #78787d;
  letter-spacing: -0.03em;
}
.popup-product-option .form-layout .content .desc {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.popup-product-option .form-layout .content .desc + * {
  margin-top: 10px;
}
.popup-product-option .option-result {
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin-top: 10px;
  position: relative;
  background-color: #e8f3fe;
  border-radius: 5px;
}
.popup-product-option .option-result + .option-result {
  margin-top: 5px;
}
.popup-product-option .option-result .title {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.popup-product-option .option-result .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 5px;
}
.popup-product-option .option-result .content .price {
  display: flex;
  flex-grow: 1;
  align-items: center;
  margin-top: 5px;
}
.popup-product-option .option-result .content .percent {
  font-size:1.1em;
  color:#2982F1;
  font-weight:800;
  margin-right: 5px;
}
.popup-product-option .option-result .content .sale {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.4;
  color: #1d1d1e;
}
.popup-product-option .option-result .content .regular {
  margin-left: 4px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.popup-product-option .option-result .content .text {
  flex-grow: 1;
  margin-top: 6px;
}
.popup-product-option .option-result .content .text.mint {
  color: #0fcbcb;
}
.popup-product-option .option-result .dropdown-option {
  margin-top: 15px;
}
.popup-product-option .option-result .dropdown-option .list {
  position: absolute;
  top: 100%;
  left: 0;
}
.popup-product-option .option-result .free-option {
  display: block;
  width: 100%;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.popup-product-option .option-result .free-option .free {
  display: inline-block;
  margin-right: 10px;
  font-weight: 600;
  color: #0fcbcb;
  vertical-align: baseline;
}
.popup-product-option .option-result .free-option + .free-option {
  padding-top: 0;
  margin-top: 6px;
  border-top: 0;
}
.popup-product-option .option-result .action .btn-del {
  position: absolute;
  top: 15px;
  right: 11px;
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  background-image: url("../img/common/btn-del.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 9px auto;
}
.popup-product-option .btn-group {
  position: absolute;
  left: -9999px;
}
.popup-product-option .btn-group.is-active {
  position: static;
}

/* 주문변경 팝업 */
.common-popup.bottom .popup-order-option {
  min-height: 60%;
  max-height: 90%;
  padding: 60px 20px 50px;
}
.common-popup.bottom .popup-order-option .container {
  min-height: 100%;
  padding: 0;
}
.common-popup.bottom .popup-order-option .container > .head {
  height: 0;
}
.common-popup.bottom .popup-order-option .container > .head.hidden .title {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.common-popup.bottom .popup-order-option .container > .body {
  width: calc(100% + 40px);
  min-height: calc(var(--vh, 1vh) * 0.6 - 60px - 50px);
  max-height: calc(var(--vh, 1vh) * 0.9 - 60px - 50px);
  padding: 0 20px;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -20px;
}
.common-popup.bottom .popup-order-option .container > .foot {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.common-popup.bottom .popup-order-option .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.popup-order-option .form-layout {
  padding-bottom: 50px;
}
.popup-order-option .order-address {
  display: flex;
  align-items: center;
}
.popup-order-option .order-address::before {
  content: "";
  flex-shrink: 0;
  margin-right: 4px;
  display: inline-flex;
  width: 13px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -70px -238px;
}
.popup-order-option .order-address .tit {
  flex-grow: 1;
  overflow: hidden;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-order-option .order-address .btn {
  flex-shrink: 0;
  margin-left: auto;
}
.popup-order-option .schedule-calendar {
  margin-top: 10px;
}

/* 배송지목록 팝업 */
.common-popup.full .popup-delivery-address-list .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-delivery-address-list .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-delivery-address-list .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-delivery-address-list .container {
  padding-top: 70px;
}
.popup-delivery-address-list .btn.full {
  margin-bottom: 20px;
}
.popup-delivery-address-list .delivery-address:nth-of-type(1) {
  margin-top: 10px;
}
.popup-delivery-address-list .delivery-address:nth-of-type(1)::before {
  content: "";
  width: calc(100% + 40px);
  height: 1px;
  position: absolute;
  top: 0;
  left: -20px;
  background-color: #e1e3e8;
}

/* 배송지목록(추가/수정) 팝업 */
.common-popup.full .popup-delivery-address-register .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-delivery-address-register .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-delivery-address-register .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-delivery-address-register .container {
  padding-top: 70px;
}
.popup-delivery-address-register .heading-3 {
  margin-top: 50px;
}
.popup-delivery-address-register .heading-3 + .form-layout {
  margin-top: 20px;
}

/* CRM배너 팝업 */
.common-popup .popup-crm-banner {
  overflow-x: hidden;
  overflow-y: visible;
  background-color: transparent;
}
.common-popup .popup-crm-banner .container {
  padding: 0;
  position: relative;
}
.common-popup .popup-crm-banner .container > .head {
  height: 0;
}
.common-popup .popup-crm-banner .container > .head > .btn-close {
  width: 52px;
  height: 0;
  max-height: 0;
  padding-top: 52px;
  overflow: hidden;
  position: absolute;
}
.common-popup .popup-crm-banner .container > .head > .btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 22px;
  height: 22px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -165px;
}
.common-popup .popup-crm-banner .container > .body {
  max-height: none;
  padding: 0;
  margin: 0;
}
.popup-crm-banner .banner a {
  display: block;
}
.popup-crm-banner .banner .img img {
  width: 100%;
  height: auto;
}

/* 회사소개 팝업 */
.common-popup.full .popup-company .container > .body {
  padding-top: 10px;
}
.popup-company .company-view {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-top: -20px;
}
.popup-company .company-intro {
  width: calc(100% + 40px);
  height: 420px;
  margin-left: -20px;
  background: url("../img/common/company-intro-bg.png") no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: center;
}
.popup-company .company-intro .title {
  padding: 51px 0 4px;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.popup-company .company-intro .tit {
  font-size: 1.4rem;
  font-weight: 500;
}
.popup-company .company-intro .desc {
  margin: 5px 0;
}
.popup-company .company-info .title {
  margin: 10px 0;
  font-size: 1.6rem;
  font-weight: 600;
}
.popup-company .company-info .desc {
  margin-top: 5px;
  color: #78787d;
}
.popup-company .company-info .desc + .img {
  margin-top: 20px;
}
.popup-company .img {
  width: 100%;
  margin-top: 10px;
}
.popup-company .img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* 영양진단 공통 */
.diagnose-container .banner-box-scroll + .tab-showhide {
  margin-top: 0;
}

/* 게이트웨이 */
.diagnose-gateway {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  background-color: #0fcbcb;
}
.diagnose-gateway > .title {
  margin-left: calc((100% - 375px + 100px) * 0.2);
}
.diagnose-gateway > .title > .logo {
  width: 106px;
  height: 0;
  max-height: 0;
  padding-top: 36px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.diagnose-gateway > .title > .logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 105px;
  height: 35px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -90px;
}
.diagnose-gateway > .title > .logo + .heading-1 {
  margin-top: 10px;
}
.diagnose-gateway > .title > .heading-1 {
  color: #fff;
}
.diagnose-gateway > .title + .diagnose-list {
  margin-top: 130px;
}
.diagnose-gateway > .diagnose-list {
  display: flex;
  flex-direction: column;
  margin-left: calc((100% - 375px + 40px) * 0.2);
}
.diagnose-gateway > .diagnose-list > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 130px;
  padding-left: 150px;
  position: relative;
}
.diagnose-gateway > .diagnose-list > li + li {
  margin-top: 3%;
}
.diagnose-gateway > .diagnose-list > li .title {
  font-size: 2.4rem;
  color: #fff;
  letter-spacing: -0.03em;
}
.diagnose-gateway > .diagnose-list > li .title + .btn-group {
  margin-top: 10px;
}
.diagnose-gateway > .diagnose-list > li .btn-group {
  background-color: transparent;
}
.diagnose-gateway > .diagnose-list > li .btn-group .btn {
  border-color: #fff;
  color: #fff;
}
.diagnose-gateway > .diagnose-list > li::before {
  content: "";
  display: block;
  width: 130px;
  height: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.diagnose-gateway > .diagnose-list > li:nth-child(1)::before {
  background: url("../img/diagnose/bg-diagnose-list1.png") no-repeat center;
  background-size: contain;
}
.diagnose-gateway > .diagnose-list > li:nth-child(2)::before {
  background: url("../img/diagnose/bg-diagnose-list2.png") no-repeat center;
  background-size: contain;
}

/* 영양진단 메인 */
.diagnose-index .tab-showhide {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.diagnose-index .tab-showhide .tab-content {
  padding: 0 20px;
}
.diagnose-index .form-layout + .table-layout {
  margin-top: 35px;
}
.diagnose-index .nutri-diagnose .btn-del {
  width: 20px;
  height: 0;
  padding-top: 20px;
  margin-top: -2px;
  overflow: hidden;
  background: url("../img/diagnose/icon-del.png") no-repeat;
  background-position: center center;
  background-size: 9px 9px;
  vertical-align: top;
}
.diagnose-index .ingest-result {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}
.diagnose-index .ingest-result .title {
  margin-right: 8px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
}
.diagnose-index .ingest-result .content {
  font-size: 1.3rem;
  font-weight: 600;
  color: #ff526d;
  text-align: right;
  vertical-align: bottom;
}
.diagnose-index .ingest-result .content .num {
  font-size: 2.7rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* 섭취량입력 팝업 */
.common-popup.full .popup-nutri-ingest-form .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-nutri-ingest-form .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-nutri-ingest-form .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-nutri-ingest-form .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.common-popup.full .popup-nutri-ingest-form .container > .head {
  flex-shrink: 0;
}
.common-popup.full .popup-nutri-ingest-form .container > .body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}
.common-popup.full .popup-nutri-ingest-form .container > .foot {
  flex-shrink: 0;
}

/* 영양진단결과 팝업 */
.common-popup.full .popup-nutri-result .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-nutri-result .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-nutri-result .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.popup-nutri-result .tab-showhide {
  width: 100%;
  position: static;
}
.popup-nutri-result .tab-showhide .tab-content {
  padding: 0;
}
.popup-nutri-result .tab-showhide ~ .content-head {
  margin-top: 50px;
}
.popup-nutri-result .bar-chart {
  display: flex;
  align-items: center;
}
.popup-nutri-result .bar-chart .graph {
  flex-grow: 1;
  height: 10px;
  position: relative;
  background-color: #f0f1f4;
}
.popup-nutri-result .bar-chart .bar {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #9d30e0;
  border-radius: 0 5px 5px 0;
}
.popup-nutri-result .bar-chart .content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  width: 76px;
  margin-left: auto;
}
.popup-nutri-result .bar-chart .percent {
  font-size: 2.4rem;
  font-weight: 600;
  color: #9d30e0;
  letter-spacing: -0.03em;
}
.popup-nutri-result .bar-chart .percent .unit {
  font-size: 1.8rem;
  vertical-align: baseline;
}
.popup-nutri-result .nutri-total-chart {
  width: calc(100% + 40px);
  margin-bottom: 45px;
  position: relative;
  left: -20px;
  background-color: #f6f7f8;
}
.popup-nutri-result .poor-nutri-info {
  margin-top: 40px;
}
.popup-nutri-result .poor-nutri-info .wrap {
  display: flex;
}
.popup-nutri-result .poor-nutri-info .box {
  flex-grow: 1;
  padding: 20px;
  position: relative;
  background-color: rgba(15, 203, 203, 0.1);
  border-radius: 5px;
}
.popup-nutri-result .poor-nutri-info .box::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 10px;
  border-top: 5px solid rgba(15, 203, 203, 0.1);
  border-right: 5px solid rgba(15, 203, 203, 0.1);
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.popup-nutri-result .poor-nutri-info .desc {
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.popup-nutri-result .poor-nutri-info .desc span {
  margin-right: -2px;
  font-size: 2rem;
  font-weight: 600;
  color: #0fcbcb;
  vertical-align: baseline;
}
.popup-nutri-result .poor-nutri-info .character-gomi {
  flex-shrink: 0;
  align-self: flex-end;
  margin-left: -4px;
}
.popup-nutri-result .poor-nutri-info .bullet-list-1,
.popup-nutri-result .poor-nutri-info .bullet-list-2,
.popup-nutri-result .poor-nutri-info .bullet-list-3,
.popup-nutri-result .poor-nutri-info .bullet-list-4 {
  margin-top: 15px;
}
.popup-nutri-result .poor-nutri-list {
  padding-left: 20px;
  margin-top: 20px;
  font-size: 1.6rem;
}
.popup-nutri-result .poor-nutri-list .item {
  display: list-item;
  list-style: decimal;
  list-style-position: outside;
  list-style-type: decimal;
}
.popup-nutri-result .poor-nutri-list .item:not(:first-child) {
  margin-top: 10px;
}
.popup-nutri-result .poor-nutri-list .item::marker {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.popup-nutri-result .poor-nutri-list .title {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
  vertical-align: baseline;
}
.popup-nutri-result .poor-nutri-list .desc {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
}
.popup-nutri-result .poor-nutri-list .desc:not(:nth-of-type(1)) {
  margin-top: 5px;
}
/* 설문조사 팝업 */
.common-popup.full .popup-nutri-survey .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-nutri-survey .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-nutri-survey .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-nutri-survey .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding-bottom: 70px;
}
.common-popup.full .popup-nutri-survey .container > .head {
  flex-shrink: 0;
}
.common-popup.full .popup-nutri-survey .container > .body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}
.common-popup.full .popup-nutri-survey .container > .foot {
  flex-shrink: 0;
}
.popup-nutri-survey .nutri-survey-intro {
  margin: auto 0;
}
.popup-nutri-survey .nutri-survey-intro .visual {
  margin-bottom: 20px;
}
.popup-nutri-survey .nutri-survey-intro .visual .img {
  display: block;
  width: 112px;
  height: 101px;
  margin: 0 auto;
  background: url("../img/diagnose/gomi-survey-intro.png") no-repeat;
  background-size: 112px auto;
  -webkit-transform: translate3d(-6px, 0, 0);
  transform: translate3d(-6px, 0, 0);
}
.popup-nutri-survey .nutri-survey-intro .title {
  margin-bottom: 10px;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-nutri-survey .nutri-survey-intro .desc {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-nutri-survey .nutri-survey-intro .comment {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6px;
  margin-top: 18px;
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
  text-align: center;
}
.popup-nutri-survey .nutri-survey-intro .comment li {
  padding-left: 10px;
  position: relative;
}
.popup-nutri-survey .nutri-survey-intro .comment li::after {
  content: "*";
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  background-color: transparent;
}

/* 설문조사입력 팝업 */
.common-popup.full .popup-nutri-survey-form .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-nutri-survey-form .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-nutri-survey-form .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-nutri-survey-form .container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
.common-popup.full .popup-nutri-survey-form .container > .head {
  z-index: 2;
}
.common-popup.full .popup-nutri-survey-form .container > .foot .btn-group {
  display: none;
}
.common-popup.full .popup-nutri-survey-form .container > .foot .btn-group.is-active {
  display: flex;
}
.popup-nutri-survey-form .progress-bar {
  position: fixed;
  top: 50px;
  left: 0;
}
.popup-nutri-survey-form .diagnose-form .item {
  display: none;
  position: relative;
}
.popup-nutri-survey-form .diagnose-form .item.is-active {
  display: block;
}
.popup-nutri-survey-form .diagnose-form .img {
  width: 100%;
  height: 190px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.popup-nutri-survey-form .diagnose-form .img ~ * {
  position: relative;
  z-index: 1;
}
.popup-nutri-survey-form .diagnose-form .img > img {
  width: auto;
  height: 100%;
}
.popup-nutri-survey-form .diagnose-form .title {
  display: block;
  margin-bottom: 50px;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  word-wrap: break-word;
}
.popup-nutri-survey-form .diagnose-form .count {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 1.6rem;
  color: #8d8e8f;
}
.popup-nutri-survey-form .diagnose-form .count .current {
  margin-right: 10px;
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.popup-nutri-survey-form .diagnose-form .count .total {
  font-size: 1.6rem;
  font-weight: 400;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.popup-nutri-survey-form .diagnose-form .content {
  display: flex;
  justify-content: flex-end;
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.popup-nutri-survey-form .diagnose-form .select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
  min-width: 220px;
}
.popup-nutri-survey-form .diagnose-form .select-list label {
  display: block;
}
.popup-nutri-survey-form .diagnose-form .select-list label input {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.popup-nutri-survey-form .diagnose-form .select-list label input:checked + span {
  margin-left: -30px;
  background-color: #0fcbcb;
  box-shadow: 0 6px 7px rgba(0, 0, 0, 0.15);
  font-weight: 800;
  color: #fff;
}
.popup-nutri-survey-form .diagnose-form .select-list label span {
  box-sizing: border-box;
  display: block;
  width: calc(100% + 30px);
  padding: 0 30px;
  background-color: #f6f7f8;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  box-shadow: 0;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 50px;
  color: #78787d;
  text-align: left;
  letter-spacing: -0.03em;
  transition: all 0.3s;
}

/* 설문조사결과 팝업 */
.common-popup.full .popup-nutri-survey-result .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-nutri-survey-result .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-nutri-survey-result .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-nutri-survey-result .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.common-popup.full .popup-nutri-survey-result .container > .head {
  flex-shrink: 0;
}
.common-popup.full .popup-nutri-survey-result .container > .body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}
.common-popup.full .popup-nutri-survey-result .container > .foot {
  flex-shrink: 0;
}
.popup-nutri-survey-result .nutri-survey-result {
  padding: 40px 0;
  margin: auto 0;
}
.popup-nutri-survey-result .nutri-survey-result + .bottom-content {
  margin-top: 0;
}
.popup-nutri-survey-result .nutri-survey-result .visual {
  margin-bottom: 10px;
}
.popup-nutri-survey-result .nutri-survey-result .visual .img {
  display: block;
  width: 46px;
  height: 40px;
  margin: 0 auto;
  background: url("../img/diagnose/gomi-survey-result.png") no-repeat;
  background-size: 100% auto;
}
.popup-nutri-survey-result .nutri-survey-result .title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-nutri-survey-result .nutri-survey-result .desc {
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
}
.popup-nutri-survey-result .nutri-survey-result .list {
  display: flex;
  gap: 5px;
  margin-top: 20px;
}
.popup-nutri-survey-result .nutri-survey-result .list .item {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100px;
  padding: 15px 10px 10px 15px;
  border-radius: 20px;
}
.popup-nutri-survey-result .nutri-survey-result .list .item.balance {
  background-color: #9d30e0;
}
.popup-nutri-survey-result .nutri-survey-result .list .item.moderate {
  background-color: #ffce31;
}
.popup-nutri-survey-result .nutri-survey-result .list .item.practise {
  background-color: #1582ed;
}
.popup-nutri-survey-result .nutri-survey-result .list .item.nutri {
  background-color: #ff526d;
}
.popup-nutri-survey-result .nutri-survey-result .list .tit {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: left;
}
.popup-nutri-survey-result .nutri-survey-result .list .con {
  margin-top: auto;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  text-align: right;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.popup-nutri-survey-result .nutri-survey-result .list .con .num {
  margin-right: -3px;
  font-size: 2.4rem;
  font-weight: 600;
  vertical-align: baseline;
}
.popup-nutri-survey-result .bottom-content {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 40px 20px;
  margin: auto 0 -50px;
  position: relative;
  left: -20px;
  background-color: #f6f7f8;
}
.popup-nutri-survey-result .bottom-content .heading-7 .thin {
  font-size: 1.1rem;
}
.popup-nutri-survey-result .bottom-content .table-layout thead th {
  padding: 2px;
  font-size: 1.1rem;
}
.popup-nutri-survey-result .bottom-content .table-layout tbody td {
  background-color: #fff;
}

/* 성장발달결과 팝업 */
.common-popup.full .popup-growth-result .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-growth-result .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-growth-result .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup .popup-growth-result .container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.common-popup .popup-growth-result .container > .body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.popup-growth-result .growth-result {
  display: flex;
  gap: 5px;
  width: 100%;
}
.popup-growth-result .growth-result .column {
  display: flex;
  flex: 1 1 25%;
  flex-direction: column;
  gap: 5px;
}
.popup-growth-result .growth-result .title {
  box-sizing: border-box;
  flex: 2 2 50%;
  min-height: 165px;
  padding: 20px;
  background: url("../img/diagnose/bg-growth-result-title.png") no-repeat;
  background-color: #0fcbcb;
  background-position: calc(100% - 5px) bottom;
  background-size: 140px 60px;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: left;
  letter-spacing: -0.03em;
}
.popup-growth-result .growth-result .gender {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 10px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 45px 45px;
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-growth-result .growth-result .gender.male {
  background-color: #9d30e0;
  background-image: url("../img/diagnose/bg-male.png");
}
.popup-growth-result .growth-result .gender.female {
  background-color: #ffce31;
  background-image: url("../img/diagnose/bg-female.png");
}
.popup-growth-result .growth-result .age {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 10px;
  background-color: #1582ed;
  border-radius: 10px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}
.popup-growth-result .growth-result .age .num {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.popup-growth-result .growth-result .height {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 25%;
  flex-direction: column;
  min-height: 165px;
  padding: 30px 15px 20px;
  background: url("../img/diagnose/bg-growth-result-height.png") no-repeat;
  background-color: #ff526d;
  background-position: right 10px;
  background-size: 20px 51px;
  border-radius: 10px;
}
.popup-growth-result .growth-result .height .tit {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 21px;
  color: #fff;
  text-align: left;
  letter-spacing: -0.03em;
}
.popup-growth-result .growth-result .height .con {
  margin-top: auto;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: right;
}
.popup-growth-result .growth-result .height .con .num {
  display: block;
  font-size: 2.4rem;
  font-weight: 600;
}
.popup-growth-result .growth-develop-chart {
  margin-bottom: 20px;
}
.popup-growth-result .growth-develop-chart .user-label {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.popup-growth-result .growth-develop-chart .user-label::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: -10px;
  left: -4px;
  border-radius: 50%;
}
.popup-growth-result .growth-develop-chart .user-label .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 4px;
  position: absolute;
  bottom: 2px;
  left: 0;
  border-radius: 4px;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.popup-growth-result .growth-develop-chart .user-label .percent {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 1.3rem;
  font-weight: 500;
  color: #000;
  -webkit-transform: translate3d(-50%, -100%, 0);
  transform: translate3d(-50%, -100%, 0);
}
.popup-growth-result .growth-develop-chart .user-label .percent .unit {
  margin-left: 1px;
  font-size: 1.1rem;
  font-weight: 400;
  vertical-align: baseline;
}
.popup-growth-result .growth-develop-chart .user-label .img {
  width: 30px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.popup-growth-result .growth-develop-chart .user-label.male::after {
  background-color: #1582ed;
}
.popup-growth-result .growth-develop-chart .user-label.male .img {
  background-image: url("../img/diagnose/icon-user-male.png");
}
.popup-growth-result .growth-develop-chart .user-label.female::after {
  background-color: #ffce31;
}
.popup-growth-result .growth-develop-chart .user-label.female .img {
  background-image: url("../img/diagnose/icon-user-female.png");
}
.popup-growth-result .highcharts-data-labels .highcharts-label:last-child .user-label .percent {
  opacity: 1;
}
.popup-growth-result .highcharts-data-labels .highcharts-label .user-label .percent {
  opacity: 0;
  transition: opacity 0.2s;
}
.popup-growth-result .highcharts-data-labels .highcharts-label .user-label:hover .box {
  z-index: 1;
}
.popup-growth-result .highcharts-data-labels .highcharts-label .user-label:hover .box .percent {
  opacity: 1;
}
.popup-growth-result .growth-noti {
  padding: 15px 34px;
  margin: 20px 0 30px;
  background-color: #f6f7f8;
  border-radius: 10px;
}
.popup-growth-result .growth-noti .desc {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
}
.popup-growth-result .bullet-list-4 {
  margin-top: -20px;
  margin-bottom: 30px;
}
.popup-growth-result .bottom-content {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 10px;
  margin-top: auto;
  margin-bottom: -50px;
  position: relative;
  left: -20px;
  background-color: rgba(21, 130, 237, 0.1);
}
.popup-growth-result .bebecook-seoul-list {
  padding: 30px 10px;
  background-color: #fff;
}
.popup-growth-result .bebecook-seoul-list .title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-growth-result .bebecook-seoul-list .list {
  margin-top: 20px;
}
.popup-growth-result .bebecook-seoul-list .item {
  display: flex;
  padding: 0 10px;
}
.popup-growth-result .bebecook-seoul-list .item:not(:first-child) {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px dashed #e1e3e8;
}
.popup-growth-result .bebecook-seoul-list .img {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 60px;
  height: 0;
  padding-top: 60px;
  margin-right: 15px;
  position: relative;
}
.popup-growth-result .bebecook-seoul-list .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.popup-growth-result .bebecook-seoul-list .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.popup-growth-result .bebecook-seoul-list .tit {
  margin-bottom: 4px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.popup-growth-result .bebecook-seoul-list .con {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
}

/* 이벤트 공통 */
.event-container .board-detail + .form-layout {
  margin-top: 20px;
}
.event-container .form-layout + .agreement-list {
  padding-top: 0;
  border-top: 0;
}
.event-container .col-img + .form-layout {
  margin-top: 30px;
}

/* 이벤트 목록 */
.event-list .heading-5 {
  display: flex;
  align-items: center;
}
.event-list .icon-menu {
  margin-top: 15px;
}
.event-list .tab-menu2 {
  margin: 20px 0 20px;
}
.event-list .banner-box-scroll + .heading-5 {
  margin-top: 20px;
}
.event-list .coupon-status {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  border: 1px solid #26479a;
  word-break: break-all;
}
.event-list .coupon-status .icon-coupon-bebecook {
  display: inline-block;
  width: 35px;
  height: 24px;
  background: url("../img/common/icon-coupon-bebecook.png") no-repeat center;
  background-size: cover;
}
.event-list .coupon-status .title {
  width: 63px;
  height: 0;
  padding-top: 48px;
  overflow: hidden;
  position: relative;
  background-color: #26479a;
}
.event-list .coupon-status .title .icon-coupon-bebecook {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.event-list .coupon-status > a + a::before, .event-list .coupon-status > a + button::before, .event-list .coupon-status > a + .box::before, .event-list .coupon-status > button + a::before, .event-list .coupon-status > button + button::before, .event-list .coupon-status > button + .box::before, .event-list .coupon-status > .box + a::before, .event-list .coupon-status > .box + button::before, .event-list .coupon-status > .box + .box::before {
  content: "";
  display: block;
  width: 0;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 0;
  border-left: 1px dashed #e1e3e8;
  -webkit-transform: translate3d(0, calc(-50% + 2px), 0);
  transform: translate3d(0, calc(-50% + 2px), 0);
}
.event-list .coupon-status > a, .event-list .coupon-status > button {
  flex: 1;
  position: relative;
}
.event-list .coupon-status > a > .box, .event-list .coupon-status > button > .box {
  flex: none;
}
.event-list .coupon-status .box {
  box-sizing: border-box;
  flex: 1 1 auto;
  position: relative;
  font-size: 1.1rem;
  text-align: center;
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}
.event-list .coupon-status .box.use .num {
  color: #1582ed;
}
.event-list .coupon-status .box.terminate .num {
  color: #ff526d;
}
.event-list .coupon-status .box.download .num {
  color: #0fcbcb;
}
.event-list .coupon-status .box .txt {
  font-weight: 700;
  line-height: 1.3;
  vertical-align: baseline;
}
.event-list .coupon-status .box .count {
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  vertical-align: baseline;
}
.event-list .coupon-status .box .count .num {
  display: inline-block;
  margin-left: 15px;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  letter-spacing: -0.03em;
  vertical-align: baseline;
  -webkit-transform: translate3d(0, 2px, 0);
  transform: translate3d(0, 2px, 0);
}
.event-list .login-box {
  width: 100%;
  margin-top: 20px;
}
.event-list .login-box > .wrap {
  display: flex;
  align-items: center;
  padding: 10px 30px 10px 25px;
  background-color: #f6f7f8;
  border-radius: 5px;
}
.event-list .login-box .title {
  flex-grow: 1;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.event-list .login-box .desc {
  flex-shrink: 0;
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 300;
  text-align: center;
}
.event-list .login-box .btn-group {
  background-color: transparent;
}
.event-list .login-box .btn {
  position: relative;
}
.event-list .login-box .btn::after {
  content: "";
  width: 27px;
  height: 30px;
  position: absolute;
  top: 0;
  right: -24%;
  background: url("../img/character/character-beli-hat.png") no-repeat center;
  background-size: cover;
}
.event-list h2:first-child + .login-box {
  margin-top: 0;
}

/* 이벤트 상세 */
.event-detail {
  padding: 30px 20px 0;
}
.event-detail > *:last-child.accordion {
  margin-bottom: 0;
}
.event-detail .content-head + .prod-col-list {
  margin-top: 10px;
}
.event-detail .content-head .name {
  vertical-align: top;
}
.event-detail .content-head .count {
  font-weight: 800;
  color: #26479a;
}
.event-detail .content-head .btn.small {
  min-width: 84px;
}
.event-detail .button-menu {
  margin: 30px 0 20px;
}
.event-detail .button-menu + .prod-col-list {
  margin-top: 0;
}
.event-detail .prod-col-list {
  margin-top: 30px;
}
.event-detail .prod-col-list + .btn-group {
  margin-top: 30px;
}
.event-detail .coupon-bar {
  margin-top: 20px;
}
.event-detail .review-list {
  margin-bottom: 30px;
}
.event-detail .review-list .list > li {
  border-bottom: 1px solid #e1e3e8;
}
.event-detail .accordion {
  width: calc(100% + 40px);
  margin-top: 30px;
  margin-bottom: 0;
  position: relative;
  left: -20px;
}
.event-detail .accordion + *:not(.common-popup, .daterangepicker) {
  margin-top: 70px;
}
.event-detail .tab-content {
  margin-top: 20px;
}
.event-detail .agreement-list {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #e1e3e8;
}
.event-detail .guide-box {
  margin-top: 15px;
}
.event-detail .form-layout .agreement-list {
  margin-top: 0;
}

/* 룰렛 */
.event-roulette {
  padding-bottom: 0;
}
.event-roulette .roulette-event {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.event-roulette .roulette-event .roulette {
  width: 100%;
  background-image: url("https://storage.bebecook.com/bebe-image/_pub/event/roulette/roulette_EV_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.event-roulette .roulette-event .roulette .bg-white {
  width: 75%;
  height: 75%;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  border-radius: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.event-roulette .roulette-event .roulette .frame {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 4;
  background: url("https://storage.bebecook.com/bebe-image/_pub/event/roulette/roulette-frame-blue.png") no-repeat center;
  background-size: 99% auto;
  text-align: center;
}
.event-roulette .roulette-event .roulette > canvas {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.event-roulette .roulette-event .roulette .pointer {
  width: 13.3333333333%;
  height: 0;
  padding-top: 16%;
  position: absolute;
  top: 5.5%;
  left: 50%;
  z-index: 4;
  background: url("https://storage.bebecook.com/bebe-image/_pub/event/roulette/roulette-pointer.png") no-repeat center;
  background-size: 100% auto;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.event-roulette .roulette-event .roulette .value {
  width: 69.4666666667%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.event-roulette .roulette-event .roulette .value .item {
  display: none;
}
.event-roulette .roulette-event .roulette .value .item.is-active {
  display: block;
}
.event-roulette .roulette-event .roulette .value .img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 100%;
}
.event-roulette .roulette-event .roulette .value .img > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -o-object-fit: contain;
  object-fit: contain;
}
.event-roulette .roulette-event .roulette .action .btn-start {
  display: block;
  width: 26.6197183099%;
  height: 0;
  padding-top: 26.6197183099%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  background: url("https://storage.bebecook.com/bebe-image/_pub/event/roulette/roulette-btn.png") no-repeat center;
  background-size: cover;
  color: transparent;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.event-roulette .roulette-event ~ .accordion {
  width: calc(100% + 40px);
  margin-top: 0;
  position: relative;
  left: -20px;
  border-bottom: 0;
}
.event-roulette > .board-detail + .col-img {
  margin-top: 0;
}

/* 설문조사 */
.event-survey {
  display: flex;
  flex-direction: column;
}
.event-survey .progress-bar {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.event-survey .board-detail + .survey-layout {
  margin-top: 40px;
}
.event-survey .board-detail + .survey-layout.intro {
  margin-top: 30px;
}
.event-survey .coupon-list {
  justify-content: center;
  margin-top: 40px;
}
.event-survey .coupon-list .coupon-item {
  width: 295px;
}
.event-survey .coupon-list + .survey-layout {
  margin-top: 10px;
}
.event-survey .btn-group {
  margin-top: 30px;
}
.event-survey .survey-result {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}
.event-survey .survey-result .coupon-item {
  max-width: 400px;
  margin: 0 auto;
}
.event-survey .survey-result .coupon-item + .result-info {
  margin-top: 40px;
}
.event-survey .survey-result .result-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.event-survey .survey-result .result-info .visual {
  width: 375px;
  padding-top: 30px;
  position: relative;
}
.event-survey .survey-result .result-info .visual .character-group-type3 {
  width: 209px;
}
.event-survey .survey-result .result-info .visual .coin {
  content: "";
  display: block;
  width: 375px;
  height: 152px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url("../img/common/character-coin.png") no-repeat center;
  background-size: cover;
  -webkit-animation: surveyComplt 1.5s;
  animation: surveyComplt 1.5s;
}
@-webkit-keyframes surveyComplt {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes surveyComplt {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* 출석체크 이벤트 */
.event-attendance {
  padding-bottom: 0;
}
.event-attendance .attendance-check {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% + 40px);
  padding: 50px 10px 20px 10px;
  margin-bottom: 0;
  position: relative;
  left: -20px;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/bg-attendance.png") no-repeat;
  background-position: top;
  background-size: cover;
}
.event-attendance .attendance-check .title {
  position: relative;
  z-index: 0;
  font-family: "NanumSquareRound", sans-serif;
  font-size: 3.8rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.03em;
}
.event-attendance .attendance-check .title::after {
  content: "";
  display: block;
  width: 45px;
  height: 45px;
  position: absolute;
  top: -20px;
  right: 7px;
  z-index: -1;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/icon-attendance-check.png") no-repeat center;
  background-size: 100% auto;
}
.event-attendance .attendance-check .title > .img {
  display: inline-block;
  width: 120px;
  height: 55px;
}
.event-attendance .attendance-check .title > .img img {
  width: 100%;
  height: auto;
}
.event-attendance .attendance-check .txt {
  margin-top: 10px;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: -0.03em;
}
.event-attendance .attendance-check .txt .str {
  font-family: "NanumSquareRound", sans-serif;
}
.event-attendance .attendance-check .txt .str.green {
  color: #1bad55;
}
.event-attendance .attendance-check .txt .str.red {
  color: #ff2d5c;
}
.event-attendance .attendance-check .comment {
  margin-top: 5px;
  opacity: 0.8;
  font-size: 1.1rem;
}
.event-attendance .attendance-check .btn-group {
  margin-top: 20px;
  position: relative;
  z-index: 0;
  background-color: transparent;
}
.event-attendance .attendance-check .btn-group .btn {
  background-color: #ff2d5c;
  border-color: #ff2d5c;
}
.event-attendance .attendance-check .btn-group::before {
  content: "";
  display: block;
  width: 110px;
  height: 120px;
  position: absolute;
  top: -6px;
  right: -86px;
  z-index: 1;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/character-coco-bib.png") no-repeat;
  background-size: cover;
}
.event-attendance .attendance-check .calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 355px;
  height: 321px;
  margin-top: 20px;
  position: relative;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/bg-attendance-calendar.png") no-repeat top;
  background-size: cover;
}
.event-attendance .attendance-check .calendar > table {
  margin-top: 15px;
  font-family: "NanumSquareRound", sans-serif;
}
.event-attendance .attendance-check .calendar > table > thead > tr {
  border-bottom: 1px solid #e1e3e8;
}
.event-attendance .attendance-check .calendar > table tr > th {
  width: 45px;
  height: 34px;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.event-attendance .attendance-check .calendar > table tr > th:first-child {
  color: #ed1515;
}
.event-attendance .attendance-check .calendar > table tr > td {
  width: 45px;
  height: 45px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.03em;
}
.event-attendance .attendance-check .calendar > table tr > td:first-child {
  color: #ed1515;
}
.event-attendance .attendance-check .calendar > table tr > td .day {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.event-attendance .attendance-check .calendar > table tr > td .day.holiday {
  color: #ed1515;
}
.event-attendance .attendance-check .calendar > table tr > td .day.past, .event-attendance .attendance-check .calendar > table tr > td .day.future {
  color: #f0f1f4;
}
.event-attendance .attendance-check .calendar > table tr > td .day.check-10 {
  -webkit-user-select: none;
  user-select: none;
}
.event-attendance .attendance-check .calendar > table tr > td .day.check-10::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/check-attendance-10.png") no-repeat center;
  background-size: cover;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.event-attendance .attendance-check .calendar > table tr > td .day.check-20 {
  -webkit-user-select: none;
  user-select: none;
}
.event-attendance .attendance-check .calendar > table tr > td .day.check-20::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/check-attendance-20.png") no-repeat center;
  background-size: cover;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.event-attendance .attendance-check .calendar > table tr > td .day.stamp-10 {
  -webkit-user-select: none;
  user-select: none;
}
.event-attendance .attendance-check .calendar > table tr > td .day.stamp-10::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/stamp-attendance-10.png") no-repeat center;
  background-size: cover;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.event-attendance .attendance-check .calendar > table tr > td .day.stamp-20 {
  -webkit-user-select: none;
  user-select: none;
}
.event-attendance .attendance-check .calendar > table tr > td .day.stamp-20::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  background: url("https://storage.bebecook.com/bebeimage/_pub/event/attendance/stamp-attendance-20.png") no-repeat center;
  background-size: cover;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
@media screen and (min-width: 768px) {
  .event-attendance .attendance-check .calendar {
    width: 504px;
    height: 452px;
  }
  .event-attendance .attendance-check .calendar > table tr > th {
    width: 60px;
    height: 60px;
  }
  .event-attendance .attendance-check .calendar > table tr > td {
    width: 50px;
    height: 60px;
  }
  .event-attendance .attendance-check .calendar > table tr > td .day.check-10::after {
    width: 40px;
    height: 40px;
  }
  .event-attendance .attendance-check .calendar > table tr > td .day.check-20::after {
    width: 40px;
    height: 40px;
  }
  .event-attendance .attendance-check .calendar > table tr > td .day.stamp-10::after {
    width: 60px;
    height: 60px;
  }
  .event-attendance .attendance-check .calendar > table tr > td .day.stamp-20::after {
    width: 60px;
    height: 60px;
  }
}
.event-attendance .accordion {
  width: calc(100% + 40px);
  margin-bottom: 0;
  position: relative;
  left: -20px;
}
.event-attendance > *:last-child.accordion {
  margin-bottom: 0;
}

/* 이벤트 신청하기 팝업 */
.common-popup.full .popup-event-register .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-event-register .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-event-register .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-event-register .container {
  padding-bottom: 50px;
}
.common-popup.full .popup-event-register .container .body {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--vh, 1vh) - 100px);
}
.popup-event-register .form-layout .agreement-list {
  padding-top: 14px;
  border-top: 1px solid #e1e3e8;
}
.popup-event-register .accordion {
  width: calc(100% + 40px);
  padding-top: 100px;
  margin-top: auto;
  position: relative;
  left: -20px;
}

/* 메인페이지 */
.main-index {
  flex-grow: 1;
}
.main-index .banner-bar-scroll {
  width: calc(100% - 40px);
  margin: 0 auto;
}
.main-index .banner-box-scroll {
  position: relative;
}
.main-index .banner-box-scroll .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}
.main-index .banner-box-scroll .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.main-index .banner-box-scroll .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.main-index .section {
  padding: 50px 20px;
}
@media screen and (min-width: 768px) {
  .main-index .section {
    padding: 50px 28px;
  }
}
.main-index .section .heading-3 {
  margin-bottom: 10px;
}
.main-index .section .heading-3 .sub {
  font-weight: 400;
}
.main-index .section .button-menu {
  margin-top: 10px;
  margin-bottom: 15px;
}
.main-index .section .button-menu + .prod-col-list {
  margin-top: 0;
}
.main-index .section .prod-col-list {
  margin-top: 20px;
}
.main-index .section .prod-col-scroll {
  margin-top: 20px;
}
.main-index .section .prod-col-scroll + .prod-col-list {
  margin-top: 40px;
}
.main-index .section .common-fraction {
  margin-top: 30px;
}
.main-index .section .btn-group {
  margin-top: 30px;
}
.main-index .menu-list {
  display: flex;
  padding: 30px 12px;
}
.main-index .menu-list + .section {
  padding-top: 20px;
}
.main-index .menu-list li {
  flex: 1;
}
.main-index .menu-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1.2rem;
  font-weight: 400;
  color: #1d1d1e;
}
/* 24.06.18 이달의식단표 추가 및 변경 */
.main-index .menu-list .icon-benefit {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/main.png?v=2);
  background-size: 130px 85px;
  background-position: -45px 0px;
}
.main-index .menu-list .icon-babyfood {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/main.png?v=2);
  background-size: 130px 85px;
  background-position: 0px 0px;
}
.main-index .menu-list .icon-guide {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/main.png?v=2);
  background-size: 130px 85px;
  background-position: -45px -45px;
}
.main-index .menu-list .icon-event {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/main.png?v=2);
  background-size: 130px 85px;
  background-position: 0px -45px;
}
.main-index .menu-list .icon-schedule {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/main.png?v=2);
  background-size: 130px 85px;
  background-position: -90px 0px;
}
/* 24.06.21 0원 패키지 추가 */
.main-index .menu-list .icon-zero {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-image: url(../img/sprites/main.png?v=2);
  background-size: 130px 85px;
  background-position: -90px -45px;
}
/* //24.06.21 0원 패키지 추가 */
/* //24.06.18 이달의식단표 추가 및 변경 */
.main-index .custom {
  padding: 60px 20px 40px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .main-index .custom {
    padding: 60px 28px 40px;
  }
}
.main-index .custom + .recommend {
  padding-bottom: 0;
}
.main-index .custom .monthly-menu {
  width: 12.5333333333%;
  height: 0;
  padding-top: 37.3333333333%;
  position: absolute;
  top: 80px;
  right: 0;
  z-index: 2;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.main-index .custom .monthly-menu .coco-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/main/spoon-coco-bg.png") no-repeat center;
  background-position: right center;
  background-size: 100% auto;
}
.main-index .custom .monthly-menu .spoon-coco {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/main/spoon-coco.png") no-repeat center;
  background-position: right center;
  background-size: 100% auto;
}
.main-index .custom .monthly-menu .text {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1bad55;
  text-align: center;
  white-space: nowrap;
  -webkit-transform: translate3d(-100%, -50%, 0);
  transform: translate3d(-100%, -50%, 0);
}
.main-index .custom .monthly-menu.scroll-check.ready {
  opacity: 0;
  transition: opacity 0.3s;
}
.main-index .custom .monthly-menu.scroll-check.ready .coco-bg {
  width: 0;
  opacity: 0.5;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}
.main-index .custom .monthly-menu.scroll-check.ready .spoon-coco {
  -webkit-transform: translate3d(calc(100% + 10px), 0, 0) skew(15deg, 5deg) rotate(30deg);
  transform: translate3d(calc(100% + 10px), 0, 0) skew(15deg, 5deg) rotate(30deg);
}
.main-index .custom .monthly-menu.scroll-check.ready .text {
  left: 10px;
  opacity: 0;
  transition: opacity 0.3s 0.01s, left 0.3s 0.01s;
}
.main-index .custom .monthly-menu.scroll-check.ready.in {
  opacity: 1;
  transition: opacity 0.01s;
}
.main-index .custom .monthly-menu.scroll-check.ready.in .coco-bg {
  width: 100%;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: cocoBg 0.8s;
  animation: cocoBg 0.8s;
}
@-webkit-keyframes cocoBg {
  0% {
    width: 0;
    opacity: 0.5;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    width: 100%;
    opacity: 1;
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
  }
  100% {
    width: 100%;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes cocoBg {
  0% {
    width: 0;
    opacity: 0.5;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    width: 100%;
    opacity: 1;
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
  }
  100% {
    width: 100%;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.main-index .custom .monthly-menu.scroll-check.ready.in .spoon-coco {
  transition: -webkit-transform 0.5s 0.7s;
  transition: transform 0.5s 0.7s;
  transition: transform 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
  -webkit-transform: translate3d(0, 0, 0) skew(0) rotate(0);
  transform: translate3d(0, 0, 0) skew(0) rotate(0);
}
.main-index .custom .monthly-menu.scroll-check.ready.in .text {
  left: 0;
  opacity: 1;
  transition: opacity 0.5s 1.3s, left 0.5s 1.3s;
}
.main-index .timesale {
  padding: 0;
}
.main-index .timesale + .report {
  padding-top: 50px;
}
.main-index .recommend .tab-showhide .tab-content > .content.is-active {
  opacity: 0;
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
.main-index .recommend .tab-showhide .tab-content > .content.is-active.motion {
  opacity: 1;
  transition: opacity 0.5s, -webkit-transform 0.3s;
  transition: opacity 0.5s, transform 0.3s;
  transition: opacity 0.5s, transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-index .bestseller {
  padding: 40px 20px 30px;
  position: relative;
  background-color: #f0f1f4;
}
@media screen and (min-width: 768px) {
  .main-index .bestseller {
    padding: 40px 28px 30px;
  }
}
.main-index .bestseller .rank {
  overflow: visible;
}
.main-index .bestseller .rank li > .title {
  margin-bottom: 20px;
  font-size: 2.4rem;
  font-weight: 300;
}
.main-index .bestseller .rank li > .title .str {
  font-weight: 600;
}
.main-index .bestseller .rank li .icon-star {
  display: block;
  width: 23.2835820896%;
  height: 0;
  padding-top: 4.1791044776%;
  background: url("../img/main/star-bestseller.png") no-repeat center;
  background-size: cover;
}
.main-index .bestseller .rank li .prod-rank-list li:first-child .prod-rank {
  transition: opacity 0.3s 0.01s, box-shadow 0.01s 0.3s, -webkit-transform 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s, box-shadow 0.01s 0.3s;
  transition: opacity 0.3s 0.01s, transform 0.01s 0.3s, box-shadow 0.01s 0.3s, -webkit-transform 0.01s 0.3s;
}
.main-index .bestseller .rank li .prod-rank-list li:first-child .prod-rank .rank .num {
  transition: font 0.01s 0.3s;
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:first-child .prod-rank {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: opacity 0.4s 0.15s, box-shadow 0.4s 0.6s, -webkit-transform 0.4s 0.15s !important;
  transition: opacity 0.4s 0.15s, transform 0.4s 0.15s, box-shadow 0.4s 0.6s !important;
  transition: opacity 0.4s 0.15s, transform 0.4s 0.15s, box-shadow 0.4s 0.6s, -webkit-transform 0.4s 0.15s !important;
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:first-child .prod-rank .rank .num {
  font-weight: 700;
  transition: font 0.4s 0.6s;
}
.main-index .bestseller .rank li .prod-rank {
  opacity: 0;
  transition: opacity 0.4s 0.01s, -webkit-transform 0.01s 0.4s;
  transition: opacity 0.4s 0.01s, transform 0.01s 0.4s;
  transition: opacity 0.4s 0.01s, transform 0.01s 0.4s, -webkit-transform 0.01s 0.4s;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+1) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 0.15s, -webkit-transform 0.4s 0.15s;
  transition: opacity 0.4s 0.15s, transform 0.4s 0.15s;
  transition: opacity 0.4s 0.15s, transform 0.4s 0.15s, -webkit-transform 0.4s 0.15s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+2) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 0.3s, -webkit-transform 0.4s 0.3s;
  transition: opacity 0.4s 0.3s, transform 0.4s 0.3s;
  transition: opacity 0.4s 0.3s, transform 0.4s 0.3s, -webkit-transform 0.4s 0.3s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+3) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 0.45s, -webkit-transform 0.4s 0.45s;
  transition: opacity 0.4s 0.45s, transform 0.4s 0.45s;
  transition: opacity 0.4s 0.45s, transform 0.4s 0.45s, -webkit-transform 0.4s 0.45s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+4) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 0.6s, -webkit-transform 0.4s 0.6s;
  transition: opacity 0.4s 0.6s, transform 0.4s 0.6s;
  transition: opacity 0.4s 0.6s, transform 0.4s 0.6s, -webkit-transform 0.4s 0.6s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+5) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 0.75s, -webkit-transform 0.4s 0.75s;
  transition: opacity 0.4s 0.75s, transform 0.4s 0.75s;
  transition: opacity 0.4s 0.75s, transform 0.4s 0.75s, -webkit-transform 0.4s 0.75s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+6) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 0.9s, -webkit-transform 0.4s 0.9s;
  transition: opacity 0.4s 0.9s, transform 0.4s 0.9s;
  transition: opacity 0.4s 0.9s, transform 0.4s 0.9s, -webkit-transform 0.4s 0.9s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+7) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 1.05s, -webkit-transform 0.4s 1.05s;
  transition: opacity 0.4s 1.05s, transform 0.4s 1.05s;
  transition: opacity 0.4s 1.05s, transform 0.4s 1.05s, -webkit-transform 0.4s 1.05s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+8) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 1.2s, -webkit-transform 0.4s 1.2s;
  transition: opacity 0.4s 1.2s, transform 0.4s 1.2s;
  transition: opacity 0.4s 1.2s, transform 0.4s 1.2s, -webkit-transform 0.4s 1.2s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+9) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 1.35s, -webkit-transform 0.4s 1.35s;
  transition: opacity 0.4s 1.35s, transform 0.4s 1.35s;
  transition: opacity 0.4s 1.35s, transform 0.4s 1.35s, -webkit-transform 0.4s 1.35s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank li.swiper-slide-active .prod-rank-list li:nth-child(n+10) .prod-rank {
  opacity: 1;
  transition: opacity 0.4s 1.5s, -webkit-transform 0.4s 1.5s;
  transition: opacity 0.4s 1.5s, transform 0.4s 1.5s;
  transition: opacity 0.4s 1.5s, transform 0.4s 1.5s, -webkit-transform 0.4s 1.5s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.main-index .bestseller .rank.is-destroy .prod-rank {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.main-index .bestseller .rank.is-destroy ~ .common-fraction {
  display: none;
}
.main-index .bestseller .action {
  margin-top: 0;
  position: absolute;
  top: 4.4776119403%;
  right: 0;
  background-color: transparent;
}
.main-index .bestseller .action .btn-more-txt {
  font-weight: 700;
}
.main-index .bestseller + .report {
  padding-top: 50px;
}
.main-index .exhibition .select {
  width: calc(100% + 20px);
  overflow: visible;
}
@media screen and (min-width: 768px) {
  .main-index .exhibition .select {
    width: calc(100% + 28px);
  }
}
.main-index .exhibition .banner {
  margin-bottom: 15px;
}
.main-index .exhibition .banner a {
  display: block;
}
.main-index .exhibition .banner .img > img {
  width: 100%;
  height: auto;
}
.main-index .exhibition .swiper-slide > .action {
  padding: 8px 0 0 0;
  margin-top: 14px;
  position: relative;
}
.main-index .exhibition .swiper-slide > .action::after {
  content: "";
  display: inline-block;
  width: calc(100% - 20px);
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e1e3e8;
}
.main-index .exhibition .btn-group {
  margin-top: 10px;
}
.main-index .exhibition .btn-group .btn {
  background-color: #fff;
}
.main-index .exhibition .action label.check input[type=checkbox] + span {
  font-weight: 600;
}
.main-index .report {
  padding-top: 0;
}

/* 스플래쉬 */
.main-splash {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.main-splash .img {
  width: 100%;
  height: 100%;
  position: relative;
}
.main-splash .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: splash 1.6s ease;
  animation: splash 1.6s ease;
  -o-object-fit: cover;
  object-fit: cover;
}
@-webkit-keyframes splash {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes splash {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* 하단배너 팝업 */
.common-popup.bottom .popup-bottom-banner {
  max-height: 100%;
  padding: 0;
}
.common-popup.bottom .popup-bottom-banner .container {
  padding: 0;
}
.common-popup.bottom .popup-bottom-banner .container > .body {
  width: 100%;
  max-height: 100%;
  padding: 0 0 0 0;
  margin: 0;
}
.popup-bottom-banner .banner {
  max-height: calc(var(--vh, 1vh) - 32px);
  position: relative;
}
.popup-bottom-banner .banner a {
  display: block;
}
.popup-bottom-banner .banner .img {
  width: 100%;
  height: 0;
  padding-top: 64%;
  overflow: hidden;
  position: relative;
}
.popup-bottom-banner .banner .img img {
  width: calc(100% + 1px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.popup-bottom-banner .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 20px;
  right: 20px;
  bottom: auto;
  left: auto;
}
.popup-bottom-banner .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.popup-bottom-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.popup-bottom-banner .action {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
}
.popup-bottom-banner .action .check-circle span {
  font-size: 1.4rem;
}
.popup-bottom-banner .action .btn-close {
  display: block;
  padding: 0 10px;
  margin-right: -10px;
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 32px;
}

/* 메인배너 전체보기 팝업 */
.common-popup.full .popup-main-banner-list .container {
  padding: 50px 0 0;
}
.popup-main-banner-list .banner {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.popup-main-banner-list .banner .item {
  position: relative;
}
.popup-main-banner-list .banner .img {
  width: 100%;
  height: 0;
  padding-top: 122.6666666667%;
  position: relative;
}
.popup-main-banner-list .banner .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.popup-main-banner-list .banner .video {
  width: 100%;
  height: 0;
  padding-top: 122.6666666667%;
  position: relative;
}
.popup-main-banner-list .banner .video > video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.popup-main-banner-list .banner .video ~ .text-wrap {
  color: #fff;
}
.popup-main-banner-list .banner .video ~ .text-wrap::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(29, 29, 30, 0.2);
}
.popup-main-banner-list .banner .text-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 70px 32px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  letter-spacing: -0.05em;
}
.popup-main-banner-list .banner .head {
  font-size: 1.7rem;
  font-weight: 400;
}
.popup-main-banner-list .banner .title {
  margin: 5px 0 10px;
  font-size: 3.8rem;
  font-weight: 600;
}
.popup-main-banner-list .banner .desc {
  font-size: 1.4rem;
  font-weight: 300;
}
.popup-main-banner-list .banner .action {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 10;
}
.popup-main-banner-list .banner .action .btn-muted.is-block {
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.popup-main-banner-list .banner .action .btn-muted.is-block::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 16.5px;
  height: 12px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -138px -111px;
}

/* walkthrough 팝업 */
.popup-walkthrough .container {
  padding: 60px 20px 40px;
}
.popup-walkthrough .container > .head {
  justify-content: center;
}
.popup-walkthrough .container > .head .title {
  color: #1d1d1e;
}
.popup-walkthrough .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-walkthrough .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.common-popup .popup-walkthrough {
  max-width: 390px;
  max-height: calc(100% - 160px);
  overflow: visible;
}
.common-popup .popup-walkthrough .container > .head .title {
  font-size: 2.4rem;
}
.common-popup .popup-walkthrough .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 160px - 60px - 40px - 31px - 20px - 20px - 50px);
  padding-right: 0;
  padding-left: 0;
  margin-top: 20px;
}
.popup-walkthrough .auth-guide {
  max-width: 85%;
  margin: 0 auto;
}
.popup-walkthrough .auth-guide .list .item {
  display: flex;
}
.popup-walkthrough .auth-guide .list .item:not(:first-child) {
  margin-top: 10px;
}
.popup-walkthrough .auth-guide .list .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  position: relative;
  background-color: #0fcbcb;
  border-radius: 50%;
}
.popup-walkthrough .auth-guide .list .icon.device::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  display: inline-flex;
  width: 16px;
  height: 16px;
  background-image: url(../img/sprites/walkthrough.png);
  background-size: 66px 45px;
  background-position: -50px 0px;
}
.popup-walkthrough .auth-guide .list .icon.tel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/walkthrough.png);
  background-size: 66px 45px;
  background-position: -25px -25px;
}
.popup-walkthrough .auth-guide .list .icon.camera::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/walkthrough.png);
  background-size: 66px 45px;
  background-position: -25px 0px;
}
.popup-walkthrough .auth-guide .list .icon.file::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/walkthrough.png);
  background-size: 66px 45px;
  background-position: 0px -25px;
}
.popup-walkthrough .auth-guide .list .icon.address::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/walkthrough.png);
  background-size: 66px 45px;
  background-position: 0px 0px;
}
.popup-walkthrough .auth-guide .list .content {
  flex-grow: 1;
}
.popup-walkthrough .auth-guide .list .title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.popup-walkthrough .auth-guide .list .title span {
  color: #8d8e8f;
  vertical-align: baseline;
}
.popup-walkthrough .auth-guide .list .title span.str {
  color: #ed1515;
}
.popup-walkthrough .auth-guide .list .desc {
  margin-top: 2px;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #78787d;
}
.popup-walkthrough .auth-guide .comment {
  margin-top: 20px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
  text-align: center;
}
.popup-walkthrough .character-walkthrough {
  width: 120px;
  height: 96px;
  position: absolute;
  top: 0;
  left: 50%;
  background: url("../img/character/character-walkthrough.png") no-repeat;
  background-size: 100% auto;
  -webkit-transform: translate3d(-50%, calc(-100% + 16px), 0);
  transform: translate3d(-50%, calc(-100% + 16px), 0);
}

/* 앱다운로드 팝업 */
.common-popup .popup-app-download {
  background-color: transparent;
}
.common-popup .popup-app-download .container {
  padding: 0;
}
.common-popup .popup-app-download .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px);
  margin-top: 0;
  margin-bottom: 0;
}
.popup-app-download .app-download {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-app-download .app-download .logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  background: url("../img/common/logo-app.png") no-repeat;
  background-size: 100% auto;
}
.popup-app-download .app-download .title {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-app-download .app-download .action {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.popup-app-download .app-download .action .character-langi {
  width: 39px;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate3d(50%, calc(-50% + 4px), 0);
  transform: translate3d(50%, calc(-50% + 4px), 0);
}
.popup-app-download .app-download .action .btn-gray {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  line-height: 37px;
  color: #8d8e8f;
}

/* 회원/로그인 공통 */
.member-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 20px;
}
.member-container .result-info .visual {
  margin-bottom: 20px;
}
.member-container .result-info .title {
  font-size: 2.4rem;
}
.member-container .result-info + .btn-group {
  justify-content: center;
  margin-top: 30px;
}
.member-container .result-info + .btn-group .btn {
  flex: none;
  width: calc((100% - 10px) / 2);
}
.member-container .guide-msg {
  text-align: center;
}
.member-container .guide-msg .txt {
  font-size: 1.4rem;
  font-weight: 300;
  color: #1d1d1e;
}
.member-container .guide-msg .link {
  display: inline-block;
  margin-left: 4px;
  font-weight: 600;
  vertical-align: top;
}

/* 로그인 */
.member-login .login-form {
  position: relative;
}
.member-login .login-form .heading-1 + .btn-group {
  margin-top: 30px;
}
.member-login .login-form .visual .character-group-type1 {
  width: 151px;
  position: absolute;
  top: -29px;
  right: -47.5px;
}
.member-login .login-form .form-layout {
  margin-top: 30px;
}
.member-login .login-form .form-layout > .row:not(:first-child) .hide + .content {
  margin-top: -10px;
}
.member-login .login-form .form-layout input.text::-webkit-input-placeholder {
  font-weight: 300;
}
.member-login .login-form .form-layout input.text::placeholder {
  font-weight: 300;
}
.member-login .login-form .form-layout input.text[disabled] {
  font-weight: 300;
}
.member-login .login-form .form-layout + .btn-group {
  margin-top: 30px;
}
.member-login .login-form .form-layout .input-text-btn + .input-text {
  margin-top: 10px;
}
.member-login .login-form .form-layout .status-msg + .input-text {
  margin-top: 10px;
}
.member-login .login-form .option {
  margin-top: 15px;
}
.member-login .login-form .option label span {
  font-size: 1.4rem;
  color: #78787d;
}
.member-login .login-form .option + .btn-group {
  margin-top: 20px;
}
.member-login .login-form .util {
  margin-top: 20px;
}
.member-login .login-form .util .list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.member-login .login-form .util .list li {
  position: relative;
}
.member-login .login-form .util .list li:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: -15px;
  background-color: #e1e3e8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.member-login .login-form .util .list li a {
  padding: 5px;
  font-weight: 500;
  color: #1d1d1e;
  letter-spacing: 0.06em;
}
.member-login .login-form .util + .btn-group {
  margin-top: 40px;
}
.member-login .login-form .btn-group.center .btn {
  flex: none;
  width: calc((100% - 10px) / 2);
}
.member-login .login-form .btn-group + .btn-group {
  margin-top: 40px;
}
.member-login .login-form .guide-msg {
  margin-top: 20px;
}
.member-login .login-form .guide-msg .txt {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.03em;
}
.member-login .login-form .guide-msg .txt .link {
  padding: 5px;
  letter-spacing: 0.02em;
  vertical-align: top;
}

/* 회원가입 메인페이지 */
.bebecook-join {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--vh, 1vh);
  padding: 40px 20px 20px;
  overflow: hidden;
  background-color: #f0f1f4;
}
.bebecook-join .img-5 {
  top: 24.5% !important;
  left: 74.4360902256% !important;
}
.bebecook-join .character-group-type2 {
  width: 252px;
}
.bebecook-join::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 51.724137931%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: #fff;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.bebecook-join .logo {
  width: auto;
  margin: 20px 0 110px;
}
.bebecook-join .logo a {
  width: 106px;
  height: 0;
  max-height: 0;
  padding-top: 36px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.bebecook-join .logo a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 105px;
  height: 35px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: 0px -90px;
}
.bebecook-join .intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 300px;
  margin-top: auto;
  margin-bottom: auto;
  z-index: 2;
  text-align: center;
}
.bebecook-join .intro .sub {
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #1582ed;
}
.bebecook-join .intro .title {
  margin-bottom: auto;
  font-size: 3.8rem;
  font-weight: 600;
  color: #1d1d1e;
}
.bebecook-join .intro .visual {
  margin-bottom: auto;
}
.bebecook-join .btn {
  z-index: 2;
  border: 0;
}
.bebecook-join .btn-group {
  background-color: transparent;
}
.bebecook-join .guide-msg {
  margin-top: 20px;
  margin-bottom: auto;
  position: relative;
  z-index: 2;
  font-size: 1.4rem;
  font-weight: 300;
  color: #1d1d1e;
  text-align: center;
}
.bebecook-join .guide-msg a {
  font-weight: 600;
  vertical-align: top;
}

/* 회원가입 */
.member-join .daterangepicker {
  width: calc(100% - 48px);
}
.member-join .table-layout {
  margin-top: 15px;
}
.member-join .table-layout + .btn-group {
  margin-top: 20px;
}
.member-join .table-layout table > tbody > tr {
  font-size: 1.3rem;
}
.member-join .table-layout table > tbody > tr > th {
  min-width: 126px;
  padding: 10px 20px;
  letter-spacing: -0.05em;
}
.member-join .table-layout table > tbody > tr > td {
  padding: 10px;
  font-size: 1.3rem;
  word-break: keep-all;
  vertical-align: baseline;
}
.member-join .table-layout table > tbody > tr > td .comment {
  margin-top: 5px;
}
.member-join .tab .daterangepicker {
  width: calc(100% - 48px);
  max-width: none;
}
.member-join .character-group-type3 {
  width: 209px;
  margin: 0 auto;
}
.member-join form.join-form {
  margin-bottom: auto;
}
.member-join .agreement-list input[type=checkbox]:checked + label .tit {
  color: #1d1d1e;
}
.member-join .agreement-list input[type=checkbox]:checked + label .str {
  color: #1582ed;
}
.member-join .agreement-list input[type=checkbox] + label .tit {
  color: #8d8e8f;
}
.member-join .agreement-list input[type=checkbox] + label .str {
  color: #8d8e8f;
}
.member-join .join-form .heading-2 {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 2.8rem;
}
.member-join .join-form .heading-2.large {
  margin-top: calc((100vh - 363px) / 4);
  margin-bottom: 30px;
  font-size: 3.8rem;
}
.member-join .join-form .heading-2.large + .step {
  margin-top: calc((100vh - 363px) / 4);
}
.member-join .join-form .step {
  float: right;
  font-size: 1.6rem;
}
.member-join .join-form .step .current {
  font-weight: 700;
}
.member-join .join-form .form-layout .row label {
  margin-right: 2px;
  font-weight: 600;
}
.member-join .join-form .accordion {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.member-join .join-form .accordion .form-layout {
  position: relative;
}
.member-join .join-form .accordion .form-layout + .form-layout {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px dashed #e1e3e8;
}
.member-join .join-form .accordion .form-layout .upload-profile {
  margin-top: 4px;
}
.member-join .join-form .accordion .form-layout .btn-del-setting {
  position: absolute;
  top: 30px;
  right: 0;
}
.member-join .join-form .accordion .form-layout .comment-list .str {
  color: #1582ed;
}
.member-join .join-form .accordion .btn-group {
  margin-top: 20px;
}
.member-join .join-form .agreement-area {
  margin-top: 20px;
}
.member-join .info-box {
  margin-top: 20px;
  margin-bottom: auto;
}
.member-join .btn-group > a {
  width: 100%;
}
.member-join select.select + .select2 {
  min-width: 100%;
  margin-top: 10px;
}
.member-join select.select + .select2:nth-child(2) {
  margin-top: 0;
}
.member-join .row > .content > .input-text {
  margin-top: 10px;
}
.member-join .row > .content > .input-text:first-child {
  margin-top: 0;
}
.member-join .radio-btn span {
  min-width: 62px;
}

/* 약관동의 팝업 */
.popup-privacy-policy .container > .head {
  height: 62px;
}
@media screen and (min-width: 768px) {
  .popup-privacy-policy .container > .head {
    height: 78px;
  }
}
.popup-privacy-policy .container > .body {
  max-height: calc(var(--vh, 1vh) - 62px - 50px - 40px - 20px - 10px - 20px - 40px);
}
@media screen and (min-width: 768px) {
  .popup-privacy-policy .container > .body {
    max-height: calc(var(--vh, 1vh) - 78px - 50px - 40px - 20px - 10px - 20px - 40px);
  }
}
.popup-privacy-policy .body .table-layout {
  margin-top: 8px;
}
.popup-privacy-policy .body .license-desc + .table-layout {
  margin-top: 20px;
}
.popup-privacy-policy .body .table-layout table > thead + tbody > tr > td {
  padding: 9px 5px;
  font-size: 1.1rem;
  font-weight: 400;
  vertical-align: baseline;
}
.popup-privacy-policy .body .table-layout table > tbody > tr > td {
  font-size: 1.3rem;
}
.popup-privacy-policy .os-theme-dark > .os-scrollbar-vertical,
.popup-privacy-policy .os-theme-light > .os-scrollbar-vertical {
  width: 7px;
}
.popup-privacy-policy .os-scrollbar-handle {
  background-color: #b4b8c0 !important;
}

/* 외부몰주문조회 */
.outside-order .heading-1 + .form-layout {
  margin-top: 28px;
}
.outside-order .form-layout small.comment-list {
  padding: 0;
}
.outside-order .form-layout .agreement-area {
  margin-top: 3px;
}
.outside-order .form-layout .agreement-area input.check-circle + label {
  display: flex;
  flex-direction: column;
  letter-spacing: 0;
}
.outside-order .form-layout .agreement-area .title {
  font-size: 1.6rem;
  font-weight: 400;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.outside-order .form-layout .agreement-area .desc {
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #8d8e8f;
}
.outside-order .form-layout .agreement-area .more {
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: 400;
  color: #8d8e8f;
}
.outside-order .heading-1 + .btn-group {
  margin-top: 20px;
}
.outside-order .form-layout + .btn-group {
  margin-top: 30px;
}

/* 마이페이지 공통 */
.mypage-container {
  padding: 20px 20px 50px;
}
.mypage-container > *:first-child.hide + .tab-showhide, .mypage-container > *:first-child.hide + .target-info, .mypage-container > *:first-child.hide + .tab-menu2 {
  margin-top: -20px;
}
.mypage-container > *:first-child.hide + .accordion, .mypage-container > *:first-child.hide + .save-status {
  margin-top: -10px;
}
.mypage-container .btn-tel {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1582ed;
}
.mypage-container .btn-tel::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../img/common/icon-tel.png") no-repeat;
  background-size: cover;
  vertical-align: middle;
  -webkit-transform: translateY(-0.18em);
  transform: translateY(-0.18em);
}
.mypage-container .select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.mypage-container .select-head .select-all {
  flex-grow: 1;
}
.mypage-container .select-head .action {
  font-size: 1.4rem;
  color: #8d8e8f;
}
.mypage-container .error-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: auto;
  text-align: center;
}
.mypage-container .error-info .icon-warning {
  width: 24px;
  height: 0;
  max-height: 0;
  padding-top: 24px;
  margin-bottom: 10px;
  background: url("../img/common/icon-warning-red.png") no-repeat center;
  background-size: cover;
}
.mypage-container .error-info .title {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mypage-container .error-info .desc {
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 300;
}
.mypage-container .noti-info {
  text-align: center;
}
.mypage-container .noti-info > .title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mypage-container .noti-info > .title .icon-noti {
  display: inline-block;
  width: 19px;
  height: 0;
  max-height: 0;
  padding-top: 20px;
  margin-right: 8px;
  background: url("../img/common/icon-noti.png") no-repeat center;
  background-size: 19px auto;
}
.mypage-container .noti-info > .desc {
  margin-top: 10px;
  font-weight: 300;
}
.mypage-container .noti-info > .content {
  margin-top: 20px;
}
.mypage-container .noti-info > .content .title {
  margin-bottom: 5px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mypage-container .noti-info > .content .list > li {
  display: inline-block;
  font-size: 1.1rem;
  color: #78787d;
}
.mypage-container .noti-info > .content .list > li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin-right: 5px;
  background-color: #78787d;
  border-radius: 50%;
  vertical-align: middle;
  -webkit-transform: translateY(-0.09em);
  transform: translateY(-0.09em);
}
.mypage-container .noti-info .btn-group {
  margin-top: 20px;
}
.mypage-container .save-status {
  width: 100%;
  padding: 20px 0 15px 0;
  border-radius: 10px;
  color: #fff;
  text-align: center;
}
.mypage-container .save-status .btn {
  background-color: #fff;
}
.mypage-container .save-status.blue {
  background-color: #1582ed;
}
.mypage-container .save-status.purple {
  background-color: #9d30e0;
}
.mypage-container .save-status > .title {
  font-weight: 600;
}
.mypage-container .save-status > .total {
  margin-top: 2px;
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mypage-container .save-status > .total::before {
  content: "";
  margin-right: 6px;
  -webkit-transform: translate3d(4px, 0, 0);
  transform: translate3d(4px, 0, 0);
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-image: url("../img/common/icon-point.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.mypage-container .save-status > .total .unit {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 600;
  -webkit-transform: translate3d(-4px, 1px, 0);
  transform: translate3d(-4px, 1px, 0);
}
.mypage-container .save-status > .desc {
  width: 100%;
  margin-top: 4px;
  line-height: 1.5;
}
.mypage-container .save-status > .desc > li {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: bold;
  word-wrap: break-word;
}
.mypage-container .save-status > .desc > li + li {
  padding-left: 11px;
  margin-left: 11px;
  position: relative;
}
.mypage-container .save-status > .desc > li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #fff;
  opacity: 0.2;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.mypage-container .save-status > .desc > li .num {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.4rem;
  font-weight: 600;
  vertical-align: baseline;
  -webkit-transform: translate3d(0, 1px, 0);
  transform: translate3d(0, 1px, 0);
}
.mypage-container .save-status > .desc .btn {
  margin-left: -20px;
}
.mypage-container .save-history {
  padding: 22px 0 20px;
  border-top: 1px solid #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
}
.mypage-container .save-history > li {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: 0 4px;
}
.mypage-container .save-history > li + li {
  padding-top: 22px;
  margin-top: 18px;
  border-top: 1px dashed #e1e3e8;
}
.mypage-container .save-history .status {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 2px 5px;
  margin-right: 10px;
  border-radius: 5px;
  font-weight: 600;
  color: white;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.mypage-container .save-history .status.purple {
  background-color: #9d30e0;
}
.mypage-container .save-history .status.blue {
  background-color: #1582ed;
}
.mypage-container .save-history .status.red {
  background-color: #ed1515;
}
.mypage-container .save-history .status.gray {
  background-color: #8d8e8f;
}
.mypage-container .save-history .content {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
}
.mypage-container .save-history .content .type,
.mypage-container .save-history .content .title {
  display: block;
  font-weight: 600;
}
.mypage-container .save-history .content .date {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  color: #8d8e8f;
}
.mypage-container .save-history .action {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  -webkit-transform: translate3d(-1px, 5px, 0);
  transform: translate3d(-1px, 5px, 0);
}
.mypage-container .save-history .action .point {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.mypage-container .save-history .action .point.purple {
  color: #9d30e0;
}
.mypage-container .save-history .action .point.blue {
  color: #1582ed;
}
.mypage-container .save-history .action .point.red {
  color: #ed1515;
}
.mypage-container .save-history .action .point.gray {
  color: #8d8e8f;
}
.mypage-container .save-history .action .point .symbol {
  margin-right: 4px;
  font-size: 1.3rem;
  font-weight: 600;
  vertical-align: middle;
}
.mypage-container .save-history .action .point .unit {
  display: inline-block;
  margin-left: 2px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
}
.mypage-container .save-history .action .btn {
  margin-right: -5px;
  margin-left: 5px;
}
.mypage-container .setting-list + .btn-group {
  margin-top: 20px;
}
.mypage-container .setting-list > li {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px dashed #e1e3e8;
}
.mypage-container .setting-list > li:first-child {
  padding-top: 0;
}
.mypage-container .setting-list .content {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
}
.mypage-container .setting-list .content .title {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.mypage-container .setting-list .content .desc {
  display: block;
  margin-top: 5px;
  margin-left: 2px;
  font-weight: 300;
}
.mypage-container .setting-list .content .agree {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 10px;
}
.mypage-container .setting-list .action {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 2.34rem;
}
.mypage-container .setting-list .action .date {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #8d8e8f;
  text-align: right;
}
.mypage-container .setting-list .action .txt {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #8d8e8f;
  text-align: right;
}
.mypage-container .setting-list + .btn-group a,
.mypage-container .setting-list + .btn-group button {
  padding: 0 6px;
  margin-right: -6px;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #8d8e8f;
}
.mypage-container .bookmark-list > .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.mypage-container .bookmark-list > .head .select-all {
  flex-grow: 1;
}
.mypage-container .bookmark-list > .head .action {
  font-size: 1.4rem;
  color: #8d8e8f;
}
.mypage-container .bookmark-list > .list {
  padding: 14px 0;
  border-top: 1px solid #f0f1f4;
  border-bottom: 1px solid #f0f1f4;
}
.mypage-container .bookmark-list > .list > li {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  position: relative;
}
.mypage-container .bookmark-list > .list > li + li {
  padding-top: 14px;
  margin-top: 13px;
  border-top: 1px dashed #e1e3e8;
}
.mypage-container .bookmark-list > .list .input {
  flex-shrink: 0;
  width: 30px;
}
.mypage-container .bookmark-list > .list .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.mypage-container .bookmark-list > .list .content a {
  display: flex;
  flex-direction: column;
  padding-right: 20px;
}
.mypage-container .bookmark-list > .list .content a::after {
  content: "";
  position: absolute;
  top: calc(50% + 7px);
  right: 5px;
  -webkit-transform: translate3d(0, -50%, 0) rotate(-90deg);
  transform: translate3d(0, -50%, 0) rotate(-90deg);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.mypage-container .bookmark-list > .list .content .category {
  font-size: 1.3rem;
  font-weight: 600;
  color: #26479a;
  letter-spacing: 0;
}
.mypage-container .bookmark-list > .list .content .title {
  margin-top: 3px;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.mypage-container .recommend-mileage > li {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 20px 15px;
  background: rgba(21, 130, 237, 0.1);
  border-radius: 5px;
}
.mypage-container .recommend-mileage > li + li {
  margin-top: 10px;
}
.mypage-container .recommend-mileage .name {
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}
.mypage-container .recommend-mileage .prod {
  margin-top: 2px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}
.mypage-container .recommend-mileage .detail {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 5px;
}
.mypage-container .recommend-mileage .detail .date {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  color: #8d8e8f;
}
.mypage-container .recommend-mileage .detail .point {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mypage-container .recommend-mileage .detail .point .num {
  margin-right: 1px;
  font-size: 2rem;
  font-weight: 800;
  color: #1582ed;
  letter-spacing: -0.03em;
}
.mypage-container .recommend-mileage .detail .point .unit {
  flex-shrink: 0;
  margin-right: 1px;
  font-weight: 600;
  color: #1582ed;
}
.mypage-container .recommend-info > li {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 21px 20px;
  background: rgba(15, 203, 203, 0.1);
  border-radius: 5px;
}
.mypage-container .recommend-info > li + li {
  margin-top: 10px;
}
.mypage-container .recommend-info .row {
  display: flex;
  align-items: center;
}
.mypage-container .recommend-info .row + .row {
  margin-top: 10px;
}
.mypage-container .recommend-info .row .title {
  flex-shrink: 0;
  margin-right: 30px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}
.mypage-container .recommend-info .row .content {
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}
.mypage-container .order-info .head + .gift-message {
  margin-top: 10px;
  margin-bottom: 30px;
}

/* 마이페이지 메인 */
.mypage-index {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #1582ed;
}
.mypage-index .result-info {
  margin: 80px 0;
}
.mypage-index .user-info {
  flex-shrink: 0;
}
.mypage-index .user-info > .wrap {
  width: 100%;
  height: 0;
  transition: height 0.4s;
}
.mypage-index .user-info > .wrap > .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 10px 45px;
}
.mypage-index .user-info.is-open > .wrap {
  height: auto;
}
.mypage-index .user-info .row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(0.347826087 * (100% - 10px));
}
.mypage-index .user-info .profile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-end;
  width: calc(0.652173913 * (100% - 10px));
  min-height: 230px;
  padding: 25px 20px;
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.mypage-index .user-info .profile .photo {
  width: 72px;
  height: 72px;
  margin-bottom: 10px;
  position: relative;
}
.mypage-index .user-info .profile .photo a {
  display: block;
  position: relative;
}
.mypage-index .user-info .profile .photo a::after {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: url("../img/mypage/icon-pencil-white.png") no-repeat;
  background-color: #26479a;
  background-position: center center;
  background-size: 15px 15px;
  border-radius: 50%;
}
.mypage-index .user-info .profile .photo .img {
  width: 72px;
  height: 72px;
  overflow: hidden;
  position: relative;
  background: url("../img/common/user-img.png") no-repeat;
  background-color: #f6f7f8;
  background-position: center center;
  background-size: 51px 33px;
  border-radius: 50%;
}
.mypage-index .user-info .profile .photo .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.mypage-index .user-info .profile .greeting {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.mypage-index .user-info .profile .action {
  margin-top: 10px;
}
.mypage-index .user-info .profile .action label input[type=checkbox] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.mypage-index .user-info .profile .action label input[type=checkbox]:checked + span::before {
  background-image: url("../img/mypage/check-circle-small-checked.png");
}
.mypage-index .user-info .profile .action label input[type=checkbox] + span {
  padding-left: 19px;
  position: relative;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.mypage-index .user-info .profile .action label input[type=checkbox] + span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/mypage/check-circle-small.png") no-repeat;
  background-size: cover;
}
.mypage-index .user-info .profile .util {
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}
.mypage-index .user-info .profile .util .setting {
  width: 26px;
  height: 0;
  padding-top: 26px;
  overflow: hidden;
  background: url("../img/mypage/icon-setting.png") no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}
.mypage-index .user-info .profile .util .notify {
  width: 26px;
  height: 0;
  padding-top: 26px;
  overflow: hidden;
  background: url("../img/mypage/icon-notify.png") no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}
.mypage-index .user-info .profile .util .notify.is-active {
  background-image: url("../img/mypage/icon-notify-active.png");
}
.mypage-index .user-info .profile .util .notify.is-disabled {
  background-image: url("../img/mypage/icon-notify-disabled.png");
}
.mypage-index .user-info .grade {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.mypage-index .user-info .grade a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mypage-index .user-info .grade .title {
  display: flex;
  align-items: center;
  margin-top: 3px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.mypage-index .user-info .grade .title .icon-blue + .txt {
  color: #26479a;
}
.mypage-index .user-info .grade .title .icon-silver + .txt {
  color: #b4b8c0;
}
.mypage-index .user-info .grade .title .icon-gold + .txt {
  color: #ffce31;
}
.mypage-index .user-info .grade .title .icon-vip + .txt {
  color: #ff526d;
}
.mypage-index .user-info .grade .title .txt {
  margin-left: 3px;
}
.mypage-index .user-info .grade .desc {
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
}
.mypage-index .user-info .grade .desc span {
  margin-right: -2px;
  vertical-align: top;
}
.mypage-index .user-info .grade .desc .num {
  font-weight: 800;
  vertical-align: baseline;
}
.mypage-index .user-info .research {
  flex: 1;
  padding: 14px 10px;
  background-color: #fff;
  background-image: url("../img/character/character-gomi-research.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) bottom;
  background-size: 76px 53px;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.mypage-index .user-info .research a {
  display: block;
  width: 100%;
  height: 100%;
}
.mypage-index .user-info .research .btn-more {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.mypage-index .user-info .research .btn-more::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 10px;
  margin-left: 2px;
  background: url("../img/mypage/arrow-more.png") no-repeat;
  background-size: cover;
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.076em, 0);
  transform: translate3d(0, -0.076em, 0);
}
.mypage-index .user-info .status {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 15px 20px 5px;
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.mypage-index .user-info .status::after {
  content: "";
  width: 1px;
  height: calc(100% - 40px);
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #e1e3e8;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.mypage-index .user-info .status .item {
  box-sizing: border-box;
  width: calc((100% - 1px) / 2);
  position: relative;
}
.mypage-index .user-info .status .item:nth-child(2n+1) {
  padding: 10px 20px 10px 0;
}
.mypage-index .user-info .status .item:nth-child(2n+1)::after {
  content: "";
  width: 200%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e1e3e8;
}
.mypage-index .user-info .status .item:nth-child(2n+1):first-child {
  padding-top: 0;
}
.mypage-index .user-info .status .item:nth-child(2n+1):first-child::after {
  content: none;
}
.mypage-index .user-info .status .item:nth-child(2n) {
  padding: 10px 0 10px 30px;
}
.mypage-index .user-info .status .item:nth-child(2n):nth-child(2) {
  padding-top: 0;
}
.mypage-index .user-info .status .title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}
.mypage-index .user-info .status .title .icon-new {
  margin-left: 2px;
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.15em, 0);
  transform: translate3d(0, -0.15em, 0);
}
.mypage-index .user-info .status .content {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
}
.mypage-index .user-info .status .content .num {
  margin-right: -3px;
  font-size: 2rem;
  font-weight: 800;
  color: #ff526d;
  letter-spacing: -0.03em;
  vertical-align: baseline;
}
.mypage-index .user-info .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 30px;
}
.mypage-index .user-info .menu li {
  width: calc((100% - 30px) / 4);
}
.mypage-index .user-info .menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}
.mypage-index .user-info .menu a .icon {
  display: block;
  margin-bottom: 5px;
  background-color: #26479a;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.mypage-index .user-info .menu a.order .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.order .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: -37px -37px;
}

/* 키움뱃지 추가 */
.mypage-index .user-info .menu a {
  position: relative;
}
.mypage-index .user-info .menu a.new::after {
  content: "";
  position: absolute;
  top: 0;
  display: inline-flex;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffce31;
  background-image: url(../img/common/icon-new.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 7px auto;
  transform: translate(-20px);
}
.mypage-index .user-info .menu a.badge .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.badge .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: -74px -74px;
}
/* //키움뱃지 추가 */
.mypage-index .user-info .menu a.viewed .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.viewed .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: -37px -74px;
}
.mypage-index .user-info .menu a.gift .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.gift .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: 0px -37px;
}
.mypage-index .user-info .menu a.review .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.review .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: 0px -74px;
}
.mypage-index .user-info .menu a.recommend .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.recommend .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: -74px -37px;
}
.mypage-index .user-info .menu a.consult .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.consult .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: -37px 0px;
}
.mypage-index .user-info .menu a.qna .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.qna .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: -74px 0px;
}
.mypage-index .user-info .menu a.bookmark .icon {
  width: 50px;
  height: 0;
  max-height: 0;
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}
.mypage-index .user-info .menu a.bookmark .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url(../img/sprites/mypage.png);
  background-size: 106px 106px;
  background-position: 0px 0px;
}
.mypage-index .user-info .menu a.is-active {
  position: relative;
}
.mypage-index .user-info .menu a.is-active::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 0;
  right: 50%;
  background-color: #ff526d;
  border-radius: 50%;
  -webkit-transform: translateX(25px);
  transform: translateX(25px);
}
.mypage-index .delivery-info {
  flex-grow: 1;
  position: relative;
  z-index: 92;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.15);
}
.mypage-index .delivery-info.is-open > .title .btn-open::before {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.mypage-index .delivery-info > .content {
  width: 100%;
  padding-top: 0;
}
.mypage-index .delivery-info .section {
  padding: 30px 20px 40px;
}
.mypage-index .delivery-info .section + .section {
  border-top: 1px solid #e1e3e8;
}
.mypage-index .delivery-info .content-head {
  align-items: center;
}
.mypage-index .delivery-info .content-head .left p {
  width: auto;
}
.mypage-index .delivery-info .content-head .btn-tel {
  align-self: center;
  margin-left: 5px;
}
.mypage-index .delivery-info .content-head .btn-util {
  margin-bottom: 0;
}
.mypage-index .delivery-info > .title {
  height: 50px;
  position: relative;
}
.mypage-index .delivery-info > .title ~ * {
  background-color: #fff;
}
.mypage-index .delivery-info > .title .btn-open {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.03em;
}
.mypage-index .delivery-info > .title .btn-open::before {
  content: "";
  margin-right: 10px;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.mypage-index .delivery-info > .title .icon {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -18px;
  right: 32px;
  background: url("../img/mypage/icon-delivery-car.png") no-repeat;
  background-size: cover;
  transition: right 2s 1.6s;
}
html.init .mypage-index .delivery-info > .title .icon {
  right: calc(100% - 52px);
}
@media screen and (min-width: 768px) {
  .mypage-index .delivery-info > .title .icon {
    transition: right 3s 1.6s;
  }
}
.mypage-index .delivery-contact {
  padding: 15px 20px;
  background-color: #f6f7f8;
  border-radius: 5px;
}
.mypage-index .delivery-contact .title {
  display: block;
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.mypage-index .delivery-contact .list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mypage-index .delivery-contact .list a {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1582ed;
}
.mypage-index .delivery-contact .txt {
  display: block;
  margin-top: 3px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #78787d;
}
.mypage-index .schedule-list {
  margin-top: 14px;
}
.mypage-index .schedule-list .btn-delivery {
  width: 20px;
  height: 0;
  padding-top: 20px;
  margin-right: -3px;
  overflow: hidden;
  background: url("../img/mypage/icon-truck-delivery.png") no-repeat;
  background-position: center center;
  background-size: 14px 14px;
}
.mypage-index .schedule-list .item {
  display: flex;
}
.mypage-index .schedule-list .item:not(:first-child) {
  padding-top: 15px;
  margin-top: 14px;
  border-top: 1px dashed #e1e3e8;
}
.mypage-index .schedule-list .title {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 90px;
  padding-right: 4px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.mypage-index .schedule-list .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.mypage-index .schedule-list .content > span {
  padding-left: 6px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.mypage-index .schedule-list .content > span::before {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 8px;
  left: 0;
  background-color: #1d1d1e;
  border-radius: 50%;
}
.mypage-index .schedule-list .util {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 2px;
  padding-left: 4px;
}
.mypage-index .icon-boxmenu {
  width: 100%;
  position: static;
}
.mypage-index .btn-tooltip {
  width: 0;
  height: 0;
  position: absolute;
  right: 11px;
  bottom: 0;
  opacity: 0;
}
.mypage-index .tooltip-box {
  display: flex;
  align-items: center;
  width: 104px;
  padding: 5px 0 5px 2px;
}
.mypage-index .tooltip-box .desc {
  flex-grow: 1;
  text-align: center;
}
.mypage-index .tooltip-box .action {
  flex-shrink: 0;
  width: auto;
  margin-top: 0 !important;
}
.mypage-index .tooltip-box .btn-del {
  position: static;
}

/* 식단매니저 */
.manage-food {
  padding-bottom: 60px;
}
.manage-food .content-head .heading-5 .num {
  vertical-align: baseline;
}
.manage-food .accordion > .item > .content > .wrap {
  padding: 10px 20px 30px;
}
.manage-food .result-info {
  margin: 140px 0;
}
.manage-food .noti-box {
  margin-top: -10px;
}
.manage-food .btn-group.floating {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.manage-food .btn-group.floating .btn {
  height: 60px;
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .manage-food .btn-group.floating {
    width: calc(524px - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin-left: -245px;
    overflow: hidden;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
.manage-food .manage-settings {
  margin-bottom: 18px;
}
.manage-food .manage-settings .item {
  display: flex;
  flex-direction: column;
}
.manage-food .manage-settings .item:not(:first-child) {
  margin-top: 30px;
}
.manage-food .manage-settings .item.row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.manage-food .manage-settings .item.row .title {
  flex-shrink: 0;
}
.manage-food .manage-settings .item.row .content {
  flex-grow: 1;
  margin-top: 0;
  text-align: right;
}
.manage-food .manage-settings .title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.manage-food .manage-settings .title > span {
  vertical-align: baseline;
}
.manage-food .manage-settings .title .btn-tooltip {
  vertical-align: middle;
  -webkit-transform: translateY(-0.16em);
  transform: translateY(-0.16em);
}
.manage-food .manage-settings .content {
  margin-top: 10px;
}
.manage-food .manage-settings .content select.select + .select2 {
  min-width: 100%;
}
.manage-food .point-msg {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ff526d;
  text-align: right;
}
.manage-food .point-msg::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../img/common/icon-point.png") no-repeat;
  background-size: 100% auto;
  vertical-align: middle;
  -webkit-transform: translateY(-0.07em);
  transform: translateY(-0.07em);
}
.manage-food .point-msg .num {
  vertical-align: baseline;
}
.manage-food .manage-menu h3.hide:first-child + .section {
  margin-top: -20px;
}
.manage-food .manage-menu .heading-5.center {
  display: block;
}
.manage-food .manage-menu .food-calendar-list {
  margin-top: 10px;
}
.manage-food .manage-menu .food-calendar-list + .section {
  margin-top: 40px;
}
.manage-food .manage-menu .menu-col-list + .menu-col-list {
  padding-top: 15px;
  margin-top: 20px;
  border-top: 1px dashed #e1e3e8;
}
.manage-food .manage-menu .section {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 40px 20px 50px;
  position: relative;
  left: -20px;
}
.manage-food .manage-menu .section.menu {
  position: relative;
}
.manage-food .manage-menu .section.menu::before {
  content: "";
  width: 100%;
  height: calc(100% + 100px);
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f6f7f8;
}
.manage-food .manage-menu .section.menu > * {
  position: relative;
  z-index: 1;
}
.manage-food .manage-menu .section.menu .bullet-list-4:first-child + .content-head {
  margin-top: 20px;
}
.manage-food .manage-menu .section.menu .content-head {
  margin-top: 40px;
}
.manage-food .manage-menu .content-head .left {
  flex-wrap: nowrap;
}
.manage-food .manage-menu .content-head .status {
  flex-shrink: 0;
  align-self: center;
  margin-left: 5px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1582ed;
}
.manage-food .manage-menu .num {
  vertical-align: baseline;
}
.manage-food .modify-delivery > *:first-child.hide + .accordion {
  margin-top: -31px;
}
.manage-food .modify-delivery .content-head {
  align-items: center;
}
.manage-food .modify-delivery .accordion {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.manage-food .modify-delivery .check-ingredient-list {
  display: flex;
  flex-wrap: wrap;
}
.manage-food .modify-delivery .check-ingredient-list .check-circle {
  width: 33.3333333333%;
}
.manage-food .modify-delivery .delivery-address:first-child {
  margin-top: -20px;
}
.manage-food .modify-delivery .delivery-calendar {
  width: calc(100% + 20px);
  position: relative;
  left: -10px;
}
.manage-food .modify-delivery .mark-info {
  display: flex;
  gap: 10px;
}
.manage-food .modify-delivery .mark-info .mark {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.manage-food .modify-delivery .mark-info .mark::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.manage-food .modify-delivery .mark-info .mark.menu::before {
  background-image: url("../img/mypage/btn-noti.png");
}
.manage-food .modify-delivery .mark-info .mark.ingredient::before {
  background-image: url("../img/mypage/check-calendar.png");
}
.manage-food .modify-delivery .comment-warning-list {
  margin-top: 20px;
  margin-bottom: 30px;
}
.manage-food .modify-step {
  padding-bottom: 20px;
}
.manage-food .modify-step .accordion {
  width: calc(100% + 40px);
  margin-top: 40px;
  position: relative;
  left: -20px;
  border-bottom: 1px solid #e1e3e8;
}
.manage-food .modify-step .error-info {
  margin-top: 40px;
}
.manage-food .modify-step .order-info {
  margin-top: 40px;
}
.manage-food .modify-step .order-info + .point-msg {
  padding-top: 20px;
  border-top: 1px solid #e1e3e8;
}
.manage-food .modify-step .order-bill .item .row.block {
  display: block;
}
.manage-food .modify-step .order-bill .item .row.block > .title, .manage-food .modify-step .order-bill .item .row.block > .text {
  display: block;
  width: 100%;
}
.manage-food .modify-step .order-bill .item .row.block > .text {
  margin-top: 6px;
}
.manage-food .modify-step .order-bill .item .row.block select.select + .select2 {
  min-width: 100%;
}
.manage-food .heading-5 + .delivery-calendar-list {
  margin-top: 25px;
}
/*24.10.18 적립금 영역 추가*/
.manage-food .mileage-section {
  margin-top: 20px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  background-color: rgba(21,130,237,.1);
}
.manage-food .mileage-section  strong {
  flex-grow: 1;
  font-size: 1.6rem
}
.manage-food .mileage-section .num {
  margin-right: 5px;
  font-size: 1.6rem;
  font-weight: 600;
}
/*// 24.10.18 적립금 영역 추가*/
/* 회원정보 수정 */
.profile-modify > .accordion {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.profile-modify > .accordion > .item > .title .mark-essen {
  display: inline-block;
  margin-left: 4px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #ed1515;
  vertical-align: middle;
}
.profile-modify > .accordion > .item > .content .btn-group {
  margin-top: 30px;
}
.profile-modify .accordion .agreement-list {
  padding: 0;
  margin-top: -6px;
}
.profile-modify .accordion .agreement-list ul {
  gap: 35px;
  padding-left: 29px;
}
.profile-modify .accordion .agreement-list input[type=checkbox]:checked + label .tit {
  color: #1d1d1e;
}
.profile-modify .accordion .agreement-list input[type=checkbox]:checked + label .str {
  color: #1582ed;
}
.profile-modify .accordion .agreement-list input[type=checkbox] + label {
  font-weight: 400;
}
.profile-modify .accordion .agreement-list input[type=checkbox] + label .tit {
  color: #8d8e8f;
}
.profile-modify .accordion .agreement-list input[type=checkbox] + label .str {
  color: #8d8e8f;
}
.profile-modify .form-layout {
  position: relative;
}
.profile-modify .form-layout + .form-layout {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px dashed #e1e3e8;
}
.profile-modify .form-layout select.select + .select2 {
  min-width: 100%;
}
.profile-modify .form-layout .btn-del-setting {
  position: absolute;
  top: 30px;
  right: 0;
}
.profile-modify .form-layout .input-text-btn + .input-text {
  margin-top: 10px;
}
.profile-modify .form-layout .input-address .btn {
  min-width: 57px;
}
.profile-modify .form-layout .comment-list {
  padding: 0;
}
.profile-modify .form-layout .desc .comment-list:not(.hyphen) > li + li {
  margin-top: 3px;
}
.profile-modify .form-layout .sns-info .dropdown-option + .input-text-btn {
  margin-top: 10px;
}
.profile-modify .sns-integration > li {
  display: flex;
  align-items: center;
}
.profile-modify .sns-integration > li + li {
  margin-top: 10px;
}
.profile-modify .sns-integration > li .content {
  display: flex;
  flex-grow: 1;
  align-items: center;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}
.profile-modify .sns-integration > li .content .btn-naver,
.profile-modify .sns-integration > li .content .btn-kakao,
.profile-modify .sns-integration > li .content .btn-apple {
  width: 40px;
  padding-top: 40px;
  margin-right: 10px;
  background-size: 40px auto;
}
.profile-modify .sns-integration > li .content .date {
  margin-left: 5px;
}
.profile-modify .sns-integration + .comment-list {
  padding: 0;
  margin-top: 20px;
}
.profile-modify .account-info {
  display: flex;
  padding: 20px 4px 0 4px;
}
.profile-modify .account-info .date {
  flex-grow: 1;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

/* 회원정보 수정 - 제휴 기업 인증 */
.profile-modify .account-info.type2 {
  display: block;
  padding: 10px 4px 0 4px;
}
/* //회원정보 수정 - 제휴 기업 인증 */

/* 회원탈퇴 팝업 */
.popup-member-withdraw .heading-5 {
  margin-bottom: 10px;
}
.popup-member-withdraw .heading-5:not(:first-child) {
  margin-top: 20px;
}
.popup-member-withdraw .bullet-list-3 li {
  letter-spacing: 0;
}
.popup-member-withdraw .bullet-list-3 li + li {
  margin-top: 5px;
}
.popup-member-withdraw .form-layout {
  margin-top: 40px;
}
.popup-member-withdraw .noti-info {
  margin-top: 50px;
}

/* 쿠폰/기프트 카드 */
.mypage-coupon .tab-showhide .tab-menu .list {
  justify-content: center;
}
.mypage-coupon .content .form-box {
  padding: 20px 24px;
}
.mypage-coupon .content .form-box .title {
  display: block;
  margin-bottom: 6px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d1d1e;
}
.mypage-coupon .content .form-box .input-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mypage-coupon .content .form-box .input-coupon input.text {
  flex-grow: 1;
}
.mypage-coupon .content .form-box .input-coupon .btn {
  flex-shrink: 0;
  min-width: 57px;
}
.mypage-coupon .content .form-box .comment-list {
  padding: 0;
  margin-top: 6px;
}
.mypage-coupon .content .button-menu {
  margin-top: 20px;
}
.mypage-coupon .content .comment-warning-list {
  margin-top: 20px;
}
.mypage-coupon .result-info {
  margin: 80px 0;
}

/* 적립금 */
.mypage-mileage .comment-warning-list {
  margin-top: 20px;
}
.mypage-mileage .result-info {
  padding: 50px 0;
  border-top: 1px solid #f0f1f4;
  border-bottom: 1px solid #f0f1f4;
}
.mypage-mileage .result-info .visual + .title {
  font-size: 2rem;
}

/* 적립금 평가 */
.mileage-survey .intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mileage-survey .intro .desc {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  text-align: center;
}
.mileage-survey .intro .desc .title {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mileage-survey .intro .desc .txt {
  margin-top: 4px;
  font-size: 1.4rem;
  font-weight: 300;
  color: #78787d;
  letter-spacing: -0.03em;
}
.mileage-survey .form-layout .score-list {
  padding: 30px 0;
  margin-top: 24px;
  border-top: 1px solid #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
}
.mileage-survey .form-layout .score-list .item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mileage-survey .form-layout .score-list .item + .item {
  margin-top: 20px;
}
.mileage-survey .form-layout .score-list .item .tit {
  margin-right: 20px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mileage-survey .form-layout .survey-radio {
  margin-top: 24px;
}
.mileage-survey .form-layout .survey-radio .row .radio + .text-box {
  margin-top: 15px;
}
.mileage-survey .form-layout .survey-radio .row .text-box {
  display: none;
}
.mileage-survey .form-layout .survey-radio .row .text-box.is-open {
  display: block;
}
.mileage-survey .form-layout .survey-radio .row .text-box .textarea {
  width: 100%;
}
.mileage-survey .form-layout .survey-radio .row .text-box .textarea + .desc {
  margin-top: 6px;
}
.mileage-survey .form-layout .survey-radio .row .text-box .comment-list {
  padding-left: 0;
}

/* 예치금 */
.mypage-deposit .comment-warning-list {
  margin-top: 20px;
}
.mypage-deposit .result-info {
  padding: 50px 0;
  border-top: 1px solid #f0f1f4;
  border-bottom: 1px solid #f0f1f4;
}
.mypage-deposit .result-info .visual + .title {
  font-size: 2rem;
}

/* 추천인 정보 */
.mypage-recommend .tab-showhide .tab-menu2 {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.mypage-recommend .datepicker-range {
  margin-top: 30px;
}
.mypage-recommend .recommend-mileage {
  margin-top: 20px;
}
.mypage-recommend .recommend-info {
  margin-top: 20px;
}
.mypage-recommend .comment-list {
  margin-top: 20px;
}
.mypage-recommend .result-info {
  margin: 100px 0;
}

/* 등급 헤택 */
.mypage-benefit .accordion {
  margin-bottom: -51px;
}
.mypage-benefit .str.green {
  color: #1bad55;
}
.mypage-benefit .str.silver {
  color: #b4b8c0;
}
.mypage-benefit .user-grade {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 120px;
  padding: 8px 0 20px 0;
  position: relative;
}
.mypage-benefit .user-grade::before {
  content: "";
  display: block;
  width: calc(100% - 42px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background: url("../img/mypage/bg-firework.png") no-repeat center;
  background-position: top;
  background-size: 100% auto;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.mypage-benefit .user-grade > * {
  position: relative;
  z-index: 1;
}
.mypage-benefit .user-grade .title {
  margin-top: 10px;
  font-size: 2.8rem;
  text-align: center;
  letter-spacing: -0.03em;
}
.mypage-benefit .user-grade .desc {
  display: flex;
  align-items: center;
  margin-top: 9px;
}
.mypage-benefit .user-grade .desc + .desc {
  margin-top: 5px;
}
.mypage-benefit .user-grade .desc b {
  margin: 0 4px;
}
.mypage-benefit .user-grade .desc .num {
  margin: 0 4px;
  font-weight: 600;
  vertical-align: baseline;
}
.mypage-benefit .user-grade .desc .icon-noti {
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.0769em, 0);
  transform: translate3d(0, -0.0769em, 0);
}
.mypage-benefit .user-grade .desc .icon-noti + .num {
  margin-left: 0;
}
.mypage-benefit .user-grade .progress {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 20px;
  padding: 0 4px;
  margin-top: 30px;
}
.mypage-benefit .user-grade .progress .item {
  display: flex;
  align-items: center;
  height: 8px;
  padding-left: 30px;
  position: relative;
  background-color: #f0f1f4;
}
.mypage-benefit .user-grade .progress .item:last-child {
  flex-shrink: 0;
  width: 30px;
  padding-left: 0;
}
.mypage-benefit .user-grade .progress .item:last-child.active .icon-blue + .bar,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-silver + .bar,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-gold + .bar,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-vip + .bar,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-vvip + .bar {
  background-color: #f0f1f4;
}
.mypage-benefit .user-grade .progress .item:last-child.active .icon-blue + .bar::before,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-silver + .bar::before,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-gold + .bar::before,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-vip + .bar::before,
.mypage-benefit .user-grade .progress .item:last-child.active .icon-vvip + .bar::before {
  content: none;
}
.mypage-benefit .user-grade .progress .item:not(:last-child) {
  flex-grow: 1;
}
.mypage-benefit .user-grade .progress .item .icon-blue,
.mypage-benefit .user-grade .progress .item .icon-silver,
.mypage-benefit .user-grade .progress .item .icon-gold,
.mypage-benefit .user-grade .progress .item .icon-vip,
.mypage-benefit .user-grade .progress .item .icon-vvip {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.mypage-benefit .user-grade .progress .item .icon-blue::after {
  background-image: url("../img/common/icon-blue-disabled.png");
}
.mypage-benefit .user-grade .progress .item .icon-silver::after {
  background-image: url("../img/common/icon-silver-disabled.png");
}
.mypage-benefit .user-grade .progress .item .icon-gold::after {
  background-image: url("../img/common/icon-gold-disabled.png");
}
.mypage-benefit .user-grade .progress .item .icon-vip::after {
  background-image: url("../img/common/icon-vip-disabled.png");
}
.mypage-benefit .user-grade .progress .item .icon-vvip::after {
  background-image: url("../img/common/icon-vvip-disabled.png");
}
.mypage-benefit .user-grade .progress .item.active .icon-blue::after {
  background-image: url("../img/common/icon-blue.png");
}
.mypage-benefit .user-grade .progress .item.active .icon-blue + .bar {
  background-color: #26479a;
}
.mypage-benefit .user-grade .progress .item.active .icon-blue + .bar::before {
  background-color: #26479a;
}
.mypage-benefit .user-grade .progress .item.active .icon-silver::after {
  background-image: url("../img/common/icon-silver.png");
}
.mypage-benefit .user-grade .progress .item.active .icon-silver + .bar {
  background-color: #b4b8c0;
}
.mypage-benefit .user-grade .progress .item.active .icon-silver + .bar::before {
  background-color: #b4b8c0;
}
.mypage-benefit .user-grade .progress .item.active .icon-gold::after {
  background-image: url("../img/common/icon-gold.png");
}
.mypage-benefit .user-grade .progress .item.active .icon-gold + .bar {
  background-color: #ffce31;
}
.mypage-benefit .user-grade .progress .item.active .icon-gold + .bar::before {
  background-color: #ffce31;
}
.mypage-benefit .user-grade .progress .item.active .icon-vip::after {
  background-image: url("../img/common/icon-vip.png");
}
.mypage-benefit .user-grade .progress .item.active .icon-vip + .bar {
  background-color: #ff526d;
}
.mypage-benefit .user-grade .progress .item.active .icon-vip + .bar::before {
  background-color: #ff526d;
}
.mypage-benefit .user-grade .progress .item.active .icon-vvip::after {
  background-image: url("../img/common/icon-vvip.png");
}
.mypage-benefit .user-grade .progress .item.active .icon-vvip + .bar {
  background-color: #9d30e0;
}
.mypage-benefit .user-grade .progress .item.active .icon-vvip + .bar::before {
  background-color: #9d30e0;
}
.mypage-benefit .user-grade .progress .item.active + .item .icon-blue::after {
  background-image: url("../img/common/icon-blue.png");
}
.mypage-benefit .user-grade .progress .item.active + .item .icon-silver::after {
  background-image: url("../img/common/icon-silver.png");
}
.mypage-benefit .user-grade .progress .item.active + .item .icon-gold::after {
  background-image: url("../img/common/icon-gold.png");
}
.mypage-benefit .user-grade .progress .item.active + .item .icon-vip::after {
  background-image: url("../img/common/icon-vip.png");
}
.mypage-benefit .user-grade .progress .item.active + .item .icon-vvip::after {
  background-image: url("../img/common/icon-vvip.png");
}
.mypage-benefit .user-grade .progress .bar {
  box-sizing: border-box;
  height: 8px;
  position: relative;
  background-color: #f0f1f4;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.mypage-benefit .user-grade .progress .bar::before {
  content: "";
  width: 2px;
  height: 8px;
  position: absolute;
  top: 0;
  left: -2px;
  background-color: #f0f1f4;
}
.mypage-benefit .user-grade .icon-noti {
  width: 12px;
  padding-top: 12px;
  background-size: 12px auto;
}
.mypage-benefit .new-member {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 40px 20px 30px;
  margin-left: -20px;
  background-color: #f6f7f8;
}
.mypage-benefit .new-member .title {
  font-size: 2.4rem;
  text-align: left;
  letter-spacing: -0.03em;
}
.mypage-benefit .new-member .coupon-list {
  margin-top: 15px;
}
.mypage-benefit .new-member .coupon-item::before {
  background-color: #f6f7f8;
}
.mypage-benefit .new-member .coupon-item::after {
  background-color: #f6f7f8;
}
.mypage-benefit .new-member .btn-group {
  margin-top: 20px;
  background-color: transparent;
}
.mypage-benefit .grade-benefit {
  padding: 10px 0 40px 0;
}
.mypage-benefit .grade-benefit > li {
  display: flex;
}
.mypage-benefit .grade-benefit > li + li {
  padding-top: 19px;
  margin-top: 20px;
  border-top: 1px dashed #e1e3e8;
}
.mypage-benefit .grade-benefit .title {
  width: calc((100% - 40px) * 0.3);
  min-width: 120px;
}
.mypage-benefit .grade-benefit .title .row {
  display: flex;
  align-items: center;
}
.mypage-benefit .grade-benefit .title .row .icon-blue + span,
.mypage-benefit .grade-benefit .title .row .icon-vip + span,
.mypage-benefit .grade-benefit .title .row .icon-silver + span,
.mypage-benefit .grade-benefit .title .row .icon-gold + span {
  margin-bottom: -1px;
  margin-left: 4px;
  font-size: 2rem;
  font-weight: 800;
}
.mypage-benefit .grade-benefit .title .desc {
  margin-top: 5px;
  margin-left: 4px;
  font-size: 1.1rem;
  color: #78787d;
}
.mypage-benefit .grade-benefit .list {
  padding-top: 7px;
  padding-left: 23px;
}
.mypage-benefit .grade-benefit .list > li {
  padding-left: 15px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.mypage-benefit .grade-benefit .list > li .str {
  font-weight: 800;
  letter-spacing: 0;
}
.mypage-benefit .grade-benefit .list > li + li {
  margin-top: 7px;
}
.mypage-benefit .grade-benefit .list > li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  position: absolute;
  top: 0.65em;
  left: 0;
  vertical-align: middle;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.mypage-benefit .grade-benefit .list.pink > li .str {
  color: #ff526d;
}
.mypage-benefit .grade-benefit .list.pink > li::before {
  background: url("../img/common/icon-check-pink.png") no-repeat center;
  background-size: cover;
}
.mypage-benefit .grade-benefit .list.yellow > li .str {
  color: #ffce31;
}
.mypage-benefit .grade-benefit .list.yellow > li::before {
  background: url("../img/common/icon-check-yellow.png") no-repeat center;
  background-size: cover;
}
.mypage-benefit .grade-benefit .list.silver > li .str {
  color: #b4b8c0;
}
.mypage-benefit .grade-benefit .list.silver > li::before {
  background: url("../img/common/icon-check-silver.png") no-repeat center;
  background-size: cover;
}
.mypage-benefit .grade-benefit .list.blue > li .str {
  color: #26479a;
}
.mypage-benefit .grade-benefit .list.blue > li::before {
  background: url("../img/common/icon-check-primary.png") no-repeat center;
  background-size: cover;
}
.mypage-benefit .grade-benefit + .bullet-list-4 {
  padding-bottom: 40px;
  margin-top: -20px;
}
.mypage-benefit .benefit-info {
  box-sizing: border-box;
  width: calc(100% + 40px);
  margin-left: -20px;
}

/* 선물함 */
.gift-box .tab-showhide .tab-menu .list {
  justify-content: center;
}
.gift-box .select-head {
  margin-top: 25px;
}
.gift-box .gift-list > li + li {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px dashed #e1e3e8;
}
.gift-box .gift-list .gift-head label.check input[type=checkbox] + span {
  font-size: 1.8rem;
  font-weight: 600;
}
.gift-box .gift-list .prod-order-list + .order-info {
  margin-top: 30px;
}
.gift-box .gift-list .order-info .head {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.gift-box .gift-list .prod-order .action .group .btn-del {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.25;
  color: #8d8e8f;
}
.gift-box .result-info {
  padding: 150px 0;
}
.gift-box .result-info .title {
  font-size: 2rem;
}
.gift-box .result-info .action {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.gift-box .result-info .action .btn-noti {
  font-size: 1.1rem;
  font-weight: 700;
  color: #8d8e8f;
}

/* 관심 콘텐츠 */
.mypage-bookmark .result-info {
  padding: 150px 0;
}
.mypage-bookmark .result-info .title {
  font-size: 2rem;
}
.mypage-bookmark .result-info .action {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.mypage-bookmark .result-info .action .btn-noti {
  font-size: 1.1rem;
  font-weight: 700;
  color: #8d8e8f;
}

/* 선물함이용안내 팝업, 관심 콘텐츠 이용안내 */
.popup-mypage-guide .body .banner {
  width: calc(100% + 40px);
  margin-left: -20px;
  background-color: #26479a;
}
.popup-mypage-guide .body .banner > img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.popup-mypage-guide .body > .title {
  margin-top: 40px;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-mypage-guide .body > .title + .gift-step {
  margin-top: 20px;
}
.popup-mypage-guide .body > .title + .bookmark-step {
  margin-top: 20px;
}
.popup-mypage-guide .body .gift-step {
  padding: 20px 20px 30px 20px;
  background-color: #f6f7f8;
  border-radius: 5px;
}
.popup-mypage-guide .body .gift-step .visual {
  display: flex;
  justify-content: center;
}
.popup-mypage-guide .body .gift-step .visual .character-group-type5 {
  width: 74.5762711864%;
}
.popup-mypage-guide .body .gift-step .visual + .step-list {
  margin-top: 10px;
}
.popup-mypage-guide .body .gift-step .step-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 15px;
  background-color: #fff;
  border-radius: 5px;
}
.popup-mypage-guide .body .gift-step .step-list .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}
.popup-mypage-guide .body .gift-step .step-list .col:not(:last-child) {
  position: relative;
}
.popup-mypage-guide .body .gift-step .step-list .col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -110px -117px;
}
.popup-mypage-guide .body .gift-step .step-list .col > dt {
  font-size: 1.1rem;
}
.popup-mypage-guide .body .gift-step .step-list .col > dd {
  margin-top: 2px;
  font-size: 1.4rem;
  font-weight: 500;
}
.popup-mypage-guide .body .bookmark-step {
  padding: 25px 20px 0 20px;
  background-color: #f6f7f8;
  border-radius: 5px;
}
.popup-mypage-guide .body .bookmark-step .step-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.popup-mypage-guide .body .bookmark-step .step-list .row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-mypage-guide .body .bookmark-step .step-list .row > dt {
  font-size: 1.1rem;
  font-weight: 700;
}
.popup-mypage-guide .body .bookmark-step .step-list .row > dd {
  display: flex;
  align-items: center;
  margin-top: 3px;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.popup-mypage-guide .body .bookmark-step .step-list .row .icon-bookmark {
  display: inline-block;
  width: 10px;
  height: 12px;
  margin-right: 4px;
  background: url("../img/common/icon-bookmark.png") no-repeat center;
  background-size: cover;
}
.popup-mypage-guide .body .bookmark-step .step-list + .noti-img {
  margin-top: 15px;
}
.popup-mypage-guide .body .bookmark-step .noti-img > img {
  width: calc(100% + 40px);
  height: auto;
  margin-left: -20px;
  -o-object-fit: contain;
  object-fit: contain;
}

/* 주문내역 목록 */
.order-list .heading-5 + .paragraph-3 {
  letter-spacing: 0;
}
.order-list .heading-5 + .prod-order-list {
  margin-top: 10px;
}
.order-list .content-head {
  padding-bottom: 10px;
  position: relative;
}
.order-list .content-head::after {
  content: "";
  width: calc(100% + 40px);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: -20px;
  background-color: #e1e3e8;
}
.order-list .order-info {
  margin-top: 20px;
}
.order-list .order-info + .form-layout {
  padding: 15px;
}
.order-list .order-info .prod-order-list + .head {
  margin-top: 30px;
}
.order-list .form-layout + .order-info {
  margin-top: 30px;
}
.order-list .result-info {
  margin: 200px 0;
}

/* 주문취소 팝업 */
.popup-cancel-order .banner {
  width: calc(100% + 40px);
  margin-left: -20px;
}
.popup-cancel-order .banner > img {
  width: 100%;
  height: auto;
}
.popup-cancel-order .survey-form .count {
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #1582ed;
  letter-spacing: 0;
}
.popup-cancel-order .survey-form .content + .count {
  margin-top: 30px;
}
.popup-cancel-order .survey-form .content .select-list > li {
  flex-shrink: 0;
  width: 100%;
}
.popup-cancel-order .survey-form .content .select-list.col {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
.popup-cancel-order .survey-form .content .select-list.col > li {
  width: 50%;
}
.popup-cancel-order .cancel-message {
  margin-top: 40px;
  text-align: center;
}
.popup-cancel-order .cancel-message > p {
  margin-top: 5px;
}
.popup-cancel-order .container > .body > .btn-group {
  margin-top: 20px;
}

/* 주문취소2 팝업 */
.popup-cancel-order2 .container {
  padding: 60px 20px 40px;
}
.popup-cancel-order2 .container > .head {
  justify-content: center;
}
.popup-cancel-order2 .container > .head .title {
  color: #1d1d1e;
}
.popup-cancel-order2 .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-cancel-order2 .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.popup-cancel-order2 .form-layout {
  margin-top: 20px;
}
.popup-cancel-order2 .input-refund-account {
  margin-top: 0;
}

/* 반품신청 목록, 교환신청 목록 */
.mypage-request-list .heading-5 + .paragraph-3 {
  letter-spacing: 0;
}
.mypage-request-list .prod-order-list {
  margin-top: 20px;
}
.mypage-request-list .prod-order-list + .form-layout {
  margin-top: 32px;
}

/* 반품신청 작성, 교환신청 작성 */
.mypage-request-write > .accordion {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  border-bottom: 1px solid #f0f1f4;
}
.mypage-request-write .form-layout select.select + .select2 {
  min-width: 100%;
}
.mypage-request-write .address-info {
  position: relative;
}
.mypage-request-write .address-info > .row {
  display: flex;
}
.mypage-request-write .address-info > .row + .row {
  margin-top: 10px;
}
.mypage-request-write .address-info > .row:first-child .text {
  padding-right: 80px;
}
.mypage-request-write .address-info > .row .title {
  width: 100px;
  font-weight: 600;
}
.mypage-request-write .address-info > .row .text {
  box-sizing: border-box;
  width: calc(100% - 100px);
  font-weight: 300;
}
.mypage-request-write .address-info .action {
  position: absolute;
  top: 0;
  right: 0;
}
.mypage-request-write .address-info + .comment-list {
  padding: 0;
  margin-top: 20px;
}

/* 교환/반품 조회 */
.refund-detail .confirm-reason {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 40px;
}
.refund-detail .confirm-reason .img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}
.refund-detail .confirm-reason .img-list > li {
  width: calc((100% - 24px) / 4);
}
.refund-detail .confirm-reason .img-list .img {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.refund-detail .confirm-reason .img-list .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.refund-detail .btn-group {
  margin-top: 15px;
}

/* 최근 본 상품 */
.mypage-viewed .select-head + .content-head {
  padding-top: 20px;
  margin-top: 5px;
  border-top: 1px solid #e1e3e8;
}
.mypage-viewed .prod-order-list + .content-head {
  padding-top: 20px;
  margin-top: 17px;
  border-top: 1px dashed #e1e3e8;
}
.mypage-viewed .result-info {
  padding: 150px 0;
}

/* 알림 */
.mypage-notification {
  display: flex;
  flex-direction: column;
}
.mypage-notification .content-head .left .num {
  color: #ff526d;
}
.mypage-notification .notification-accordion {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.mypage-notification .btn-group {
  margin-top: 25px;
}
.mypage-notification .result-info {
  padding: 100px 0;
  margin: auto 0;
}

/* 마이 스케줄 팝업 */
.popup-my-schedule .daterangepicker {
  width: calc(100% - 40px);
  right: auto !important;
  left: auto !important;
}
.popup-my-schedule .datepicker-myschedule {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  margin-top: 10px;
  position: relative;
}
.popup-my-schedule .datepicker-myschedule .btn-open {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 5px;
  background-color: #b4b8c0;
  width: 40px;
  height: 0;
  max-height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
.popup-my-schedule .datepicker-myschedule .btn-open::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 19px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -50px;
}
.popup-my-schedule .datepicker-myschedule label:nth-of-type(1) {
  width: 100%;
  height: 0;
  padding-top: 40px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.popup-my-schedule .datepicker-myschedule .tilde {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 40px;
}
.popup-my-schedule .datepicker-myschedule .text {
  flex-grow: 1;
  width: calc((100% - 65px) / 2);
  text-align: center;
  cursor: default;
}
.popup-my-schedule .datepicker-myschedule .text[readonly] {
  background-color: #fff;
}
.popup-my-schedule .result-info {
  margin: 200px 0;
}

/* 식단정보 팝업 */
.common-popup.full .popup-menu-info .container > .body {
  padding-top: 10px;
}
.popup-menu-info .menu-info {
  padding: 0;
  margin: 0;
}
.popup-menu-info .menu-info .item {
  padding: 0;
}

/* 식단일일괄변경 팝업 */
.popup-all-date-modify .container {
  padding: 60px 20px 40px;
}
.popup-all-date-modify .container > .head {
  justify-content: center;
}
.popup-all-date-modify .container > .head .title {
  color: #1d1d1e;
}
.popup-all-date-modify .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-all-date-modify .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.common-popup .popup-all-date-modify {
  max-width: 400px;
  min-height: 270px;
}
.popup-all-date-modify .daterangepicker {
  width: calc(100% - 30px);
}
.popup-all-date-modify .form-layout > .row > .content select.select + .select2 {
  min-width: 100%;
}

/* 배송지일괄변경 팝업 */
.popup-all-delivery-modify .container {
  padding: 60px 20px 40px;
}
.popup-all-delivery-modify .container > .head {
  justify-content: center;
}
.popup-all-delivery-modify .container > .head .title {
  color: #1d1d1e;
}
.popup-all-delivery-modify .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-all-delivery-modify .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.common-popup .popup-all-delivery-modify {
  max-width: 400px;
  min-height: 270px;
}
.popup-all-delivery-modify .daterangepicker {
  width: calc(100% - 30px);
}
.popup-all-delivery-modify .form-layout > .row > .content select.select + .select2 {
  min-width: 100%;
}

/* 식단안내 팝업 */
.popup-menu-guide .container {
  padding: 60px 20px 40px;
}
.popup-menu-guide .container > .head {
  justify-content: center;
}
.popup-menu-guide .container > .head .title {
  color: #1d1d1e;
}
.popup-menu-guide .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-menu-guide .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.common-popup .popup-menu-guide {
  max-width: 400px;
  min-height: 270px;
}
.popup-menu-guide .menu-guide-list .item:not(:first-child) {
  margin-top: 25px;
}
.popup-menu-guide .menu-guide-list .title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.popup-menu-guide .menu-guide-list .title::before {
  content: "";
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-top: -0.22em;
  margin-right: 5px;
  background: url("../img/product/icon-today-menu.png") no-repeat;
  background-size: 100% auto;
  vertical-align: middle;
}
.popup-menu-guide .menu-guide-list .list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.popup-menu-guide .menu-guide-list .list > * {
  width: calc((100% - 10px) / 2);
}

/* 장바구니주문 공통 */
.order-container {
  padding: 20px 20px 50px;
}
.order-container > .accordion {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.order-container > .accordion > .item > .content > .wrap {
  padding: 10px 20px 0;
}
.order-container > .accordion .prod-order-list {
  padding-bottom: 22px;
}
.order-container > .accordion .prod-order-list + .info-delivery {
  margin-top: 0;
}
.order-container .info-delivery {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(100% + 40px);
  min-height: 40px;
  padding: 6px 20px;
  position: relative;
  left: -20px;
  border-top: 1px solid #f6f7f8;
}
.order-container .info-delivery .title {
  box-sizing: border-box;
  width: calc(100% - 60px);
  padding-right: 20px;
  position: relative;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-container .info-delivery .title .btn-tooltip {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 1.3rem;
  vertical-align: middle;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.order-container .info-delivery .price {
  width: 60px;
  height: 1.3em;
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1582ed;
  text-align: right;
}
.order-container .info-delivery .action {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.order-container .info-delivery .action .btn-more-txt {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}
.order-container .agreement-area {
  margin-top: 20px;
}
.order-container .agreement-area .agreement-list {
  padding-left: 0;
}

/* 장바구니 */
.order-cart .content-head .name {
  color: #1582ed;
  vertical-align: top;
}
.order-cart .content-head label.check input[type=checkbox] + span {
  padding-top: 0;
  padding-bottom: 0;
}
.order-cart .content-head label.check input[type=checkbox] + span::before {
  top: calc(0.75em - 3px);
}
.order-cart .result-info {
  margin: 100px 0;
}
.order-cart > .order-bill {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.order-cart .guide-box {
  margin-top: 10px;
}
.order-cart .user-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.order-cart .user-address .txt {
  width: calc(100% - 100px);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-cart .user-address .txt .str {
  font-weight: 600;
}
.order-cart .user-address .icon-location {
  margin-right: 2px;
  vertical-align: baseline;
  display: inline-flex;
  width: 13px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -70px -238px;
}
.order-cart .user-address .action {
  box-sizing: border-box;
  align-self: flex-start;
  width: 100px;
  text-align: right;
}
.order-cart .user-address .attention {
  box-sizing: border-box;
  width: 100%;
  padding-left: 18px;
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1582ed;
}
.order-cart .info-result {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: calc(100% + 40px);
  padding: 20px;
  position: relative;
  left: -20px;
  background-color: #f6f7f8;
  text-align: right;
}
.order-cart .info-result .calc {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  margin-bottom: 3px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-cart .info-result .calc .num {
  margin-left: 3px;
  vertical-align: top;
}
.order-cart .info-result .total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-cart .info-result .total .num {
  margin-right: 1px;
  margin-left: 12px;
  font-size: 2rem;
  letter-spacing: -0.03em;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

/* 주문결제 */
.order-register > .hide:first-child + .accordion {
  margin-top: -20px;
}
.order-register .agreement-list input[type=checkbox] + label .desc {
  color: #1582ed;
}
.order-register .accordion:first-child {
  margin-top: -20px;
}
.order-register .accordion .prod-order .option {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
  padding: 15px 20px;
  margin-top: 10px;
  background-color: rgba(15, 203, 203, 0.1019607843);
}
.order-register .accordion .prod-order .option > img {
  flex-shrink: 0;
  width: 13.5593220339%;
  height: 20.6779661017%;
}
.order-register .accordion .prod-order .option .info {
  width: 100%;
  padding: 0;
  margin-top: 0;
  background-color: unset;
}
.order-register .form-layout {
  margin-top: 40px;
}
.order-register .form-layout + .order-bill {
  margin-top: 20px;
}
.order-register .form-layout > .row > .title .btn {
  margin-left: auto;
}
.order-register .form-layout .content-head {
  align-items: center;
}
.order-register .form-layout .content-head .right {
  align-items: center;
}
.order-register .form-layout .content-head .right > span {
  font-weight: 600;
}
.order-register .form-layout .content-head .right .btn-tooltip {
  margin-right: 10px;
  margin-left: 3px;
}
.order-register > .order-bill {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.order-register .agreement-area .agreement-all {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.order-register .agreement-area .agreement-all input[type=checkbox] + label {
  padding: 6px 5px 3px 30px;
}
.order-register .agreement-area .agreement-all input[type=checkbox] + label .title {
  font-size: 1.6rem;
  font-weight: 400;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.order-register .agreement-area .agreement-all input[type=checkbox] + label .desc {
  font-weight: 300;
  color: #1582ed;
}
.order-register .input-select-payment {
  display: flex;
  flex-direction: column;
}
.order-register .input-select-payment .select {
  display: flex;
  gap: 10px;
  width: 100%;
}
.order-register .input-select-payment .select .radio-payment {
  flex: 1;
}
.order-register .input-select-payment .credit-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% + 40px);
  height: 0;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  left: -20px;
}
.order-register .input-select-payment .credit-box.is-active {
  height: auto;
}
.order-register .input-select-payment .credit-box .list {
  display: block;
  width: 80.59%;
  overflow: visible;
}
.order-register .input-select-payment .credit-box .item {
  display: block;
}
.order-register .input-select-payment .credit-box .card {
  width: 100%;
  height: 0;
  padding-top: 62.96%;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
}
.order-register .input-select-payment .credit-box .card .img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.order-register .input-select-payment .credit-box .btn-add {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 62.96%;
  overflow: hidden;
  position: relative;
  border: 2px dashed #26479a;
  border-radius: 22px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
}
.order-register .input-select-payment .credit-box .btn-add .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.order-register .input-select-payment .credit-box .btn-add .title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #26479a;
  letter-spacing: -0.03em;
}
.order-register .input-select-payment .credit-box .btn-add .icon {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  background: url("../img/order/icon-card-add.png") no-repeat;
  background-size: cover;
}
.order-register .input-select-payment .credit-box .action {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
  margin-top: 10px;
}
.order-register .input-select-payment .credit-box .btn-manage {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: #8d8e8f;
}
.order-register .input-select-payment .credit-box .btn-manage::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 4px;
  background: url("../img/order/icon-cogwheel.png") no-repeat;
  background-size: cover;
}
.order-register .radio-payment {
  cursor: pointer;
}
.order-register .radio-payment.bebecook input[type=radio] + span::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-bottom: 6px;
  background: url("../img/order/icon-bebecook.png") no-repeat;
  background-size: cover;
}
.order-register .radio-payment.bebecook input[type=radio]:checked + span::before {
  background-image: url("../img/order/icon-bebecook-active.png");
}
.order-register .radio-payment.credit input[type=radio] + span::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-bottom: 3px;
  background: url("../img/order/icon-credit.png") no-repeat;
  background-size: cover;
}
.order-register .radio-payment.credit input[type=radio]:checked + span::before {
  background-image: url("../img/order/icon-credit-active.png");
}
.order-register .radio-payment.account input[type=radio] + span::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-bottom: 3px;
  background: url("../img/order/icon-cash.png") no-repeat;
  background-size: cover;
}
.order-register .radio-payment.account input[type=radio]:checked + span::before {
  background-image: url("../img/order/icon-cash-active.png");
}
.order-register .radio-payment input[type=radio] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.order-register .radio-payment input[type=radio]:checked + span {
  background-color: #1582ed;
}
.order-register .radio-payment input[type=radio]:checked + span .main {
  color: #fff;
}
.order-register .radio-payment input[type=radio]:checked + span .sub {
  color: #fff;
}
.order-register .radio-payment input[type=radio] + span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 85px;
  background-color: rgba(21, 130, 237, 0.1);
  border-radius: 5px;
}
.order-register .radio-payment input[type=radio] + span .main {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-register .radio-payment input[type=radio] + span .sub {
  margin-bottom: -3px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-register .input-baby-memo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-register .input-baby-memo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 24.05.08_할부개월(고정윤 */
.order-register .input-baby-memo.input-padding {
  padding: 20px;
}
/* // 24.05.08 */
.order-register .input-recommend-id {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-register .input-mileage {
  display: flex;
  flex-direction: column;
}
.order-register .input-mileage .input-discount-txt {
  display: flex;
  align-items: center;
  margin-top: 12px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
}
.order-register .input-mileage .input-discount-txt + .input-discount-txt {
  margin-top: 5px;
}
.order-register .input-mileage .input-discount-txt .num {
  display: inline-block;
  margin-left: 2px;
  color: #1582ed;
}
.order-register .input-deposit {
  display: flex;
  flex-direction: column;
}
.order-register .input-deposit .input-discount-txt {
  display: flex;
  align-items: center;
  margin-top: 12px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
}
.order-register .input-deposit .input-discount-txt + .input-discount-txt {
  margin-top: 5px;
}
.order-register .input-deposit .input-discount-txt .num {
  display: inline-block;
  margin-left: 2px;
  color: #1582ed;
}
.order-register .input-coupon {
  display: flex;
  flex-wrap: wrap;
}
.order-register .input-coupon .input-select {
  width: 100%;
}
.order-register .input-coupon .input-coupon-txt {
  margin-top: 12px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.order-register .input-coupon .input-coupon-txt .num {
  margin: 0 2px;
  font-weight: 600;
  color: #1582ed;
  vertical-align: baseline;
}
.order-register .input-coupon .input-coupon-txt + .input-coupon-txt {
  margin-top: 5px;
}
.order-register .input-coupon .check-circle {
  margin-left: auto;
  -webkit-transform: translate(4px, 4px);
  transform: translate(4px, 4px);
}

/* 25.03 주문결제 추가  */
.order-register .row .content .desc {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 10px;
}

.order-register .row .content .desc.red {
  color: rgb(237, 21, 21);
  font-weight: 600;
}

/* 주문결과 */
.order-result {
  display: flex;
  flex-direction: column;
}
@-webkit-keyframes groupTypeAni1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes groupTypeAni1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes groupTypeAni2 {
  0% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes groupTypeAni2 {
  0% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    bottom: 20%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes groupTypeAni3 {
  0% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes groupTypeAni3 {
  0% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 50%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes groupTypeAni4 {
  0% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes groupTypeAni4 {
  0% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 22%;
    left: 40%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes groupTypeAni5 {
  0% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes groupTypeAni5 {
  0% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 30%;
    left: 50%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes groupTypeAni6 {
  0% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes groupTypeAni6 {
  0% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    top: 20%;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes groupTypeAni7 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes groupTypeAni7 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.common-popup.motion-in .order-result .character-group-type3.motion .img-1 {
  -webkit-animation: groupTypeAni1 0.5s;
  animation: groupTypeAni1 0.5s;
}
.common-popup.motion-in .order-result .character-group-type3.motion .img-2 {
  -webkit-animation: groupTypeAni2 1s;
  animation: groupTypeAni2 1s;
}
.common-popup.motion-in .order-result .character-group-type3.motion .img-3 {
  -webkit-animation: groupTypeAni3 1s;
  animation: groupTypeAni3 1s;
}
.common-popup.motion-in .order-result .character-group-type3.motion .img-4 {
  -webkit-animation: groupTypeAni4 1s;
  animation: groupTypeAni4 1s;
}
.common-popup.motion-in .order-result .character-group-type3.motion .img-5 {
  -webkit-animation: groupTypeAni5 1s;
  animation: groupTypeAni5 1s;
}
.common-popup.motion-in .order-result .character-group-type3.motion .img-6 {
  -webkit-animation: groupTypeAni6 1s;
  animation: groupTypeAni6 1s;
}
.common-popup.motion-in .order-result .character-group-type3.motion .img-7 {
  -webkit-animation: groupTypeAni7 0.5s;
  animation: groupTypeAni7 0.5s;
}
.order-result .result-info {
  padding: 20px 0 30px;
  margin: auto 0;
}
.order-result .result-info + .gift-message {
  margin-top: -10px;
}
.order-result .result-info ~ .customer-center {
  margin-top: 0;
}
.order-result .customer-center {
  margin-top: auto;
}
.order-result .gift-message {
  margin-bottom: 30px;
}
.order-result .guide-box {
  margin-bottom: 30px;
  background-color: #f6f7f8;
}
.order-result .guide-box .comment-list {
  color: #78787d;
}
.order-result .order-info {
  margin-bottom: 20px;
}
.order-result .order-info .total .str.blue {
  font-size: 2rem;
}

/* 추천인등록 팝업 */
.popup-recommend-register .container {
  padding: 60px 20px 40px;
}
.popup-recommend-register .container > .head {
  justify-content: center;
}
.popup-recommend-register .container > .head .title {
  color: #1d1d1e;
}
.popup-recommend-register .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-recommend-register .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.common-popup .popup-recommend-register {
  max-width: 400px;
  min-height: 270px;
}
.popup-recommend-register .comment-list {
  padding-top: 10px;
  padding-left: 0;
  margin-top: 20px;
  border-top: 1px dashed #e1e3e8;
}

/* 추천인적립 팝업 */
.popup-recommend-mileage .container {
  padding: 60px 20px 40px;
}
.popup-recommend-mileage .container > .head {
  justify-content: center;
}
.popup-recommend-mileage .container > .head .title {
  color: #1d1d1e;
}
.popup-recommend-mileage .container > .head .btn-close {
  top: 5px;
  right: 5px;
}
.popup-recommend-mileage .container > .body {
  max-height: calc(var(--vh, 1vh) - 40px - 60px - 31px - 50px - 40px - 10px - 20px);
}
.common-popup .popup-recommend-mileage {
  max-width: 335px;
  min-height: 270px;
}
.popup-recommend-mileage .container > .foot > .btn-group .btn:first-child {
  width: 108px;
  min-width: 108px;
}
.popup-recommend-mileage .paragraph-1,
.popup-recommend-mileage .paragraph-3 {
  text-align: center;
}
.popup-recommend-mileage .paragraph-1 {
  font-weight: 400;
}

/* 둘째아기주문안내 팝업 */
.popup-second-baby-guide .img {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.popup-second-baby-guide .img > img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* 영양식입문, 이유식졸업 팝업 */
.popup-first-purchase .img {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.popup-first-purchase .img > img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.popup-first-purchase .comment-warning-list {
  margin-top: 20px;
}

/* 사은품선택 팝업 */
.common-popup.full .popup-freebies .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-freebies .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-freebies .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-freebies .container {
  min-height: 100%;
  padding-bottom: 20px;
}
.common-popup.full .popup-freebies .container > .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--vh, 1vh) - 50px - 20px);
  padding: 50px 0;
  margin: 0;
}
.common-popup.full .popup-freebies .container > .body > .btn-group {
  margin-top: 30px;
}
.popup-freebies .body > .img {
  width: 76.4179104478%;
  margin: 0 auto;
  margin-bottom: 39px;
}
.popup-freebies .body > .img > img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.popup-freebies .body > .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 30px;
}
.popup-freebies .body > .title .main {
  font-size: 2.8rem;
  font-weight: 400;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-freebies .body > .title .sub {
  margin-bottom: 5px;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-freebies .heading-5 {
  margin-bottom: 22px;
}
.popup-freebies .freebies-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 0 5px;
}
.popup-freebies .freebies-list + .heading-5 {
  margin-top: 30px;
}
.popup-freebies .freebies-list .item input[type=radio] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.popup-freebies .freebies-list .item input[type=radio] ~ .wrap {
  box-sizing: border-box;
  position: relative;
}
.popup-freebies .freebies-list .item input[type=radio] ~ .wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -235px -25px;
}
.popup-freebies .freebies-list .item input[type=radio]:checked ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -100px -192px;
}
.popup-freebies .freebies-list .item input[type=radio][disabled] ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -100px -192px;
}
.popup-freebies .freebies-list .item input[type=radio][disabled]:checked ~ .wrap::before {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -100px -192px;
}
.popup-freebies .freebies-list .wrap {
  display: flex;
  align-items: center;
  padding-left: 30px;
}
.popup-freebies .freebies-list .img {
  flex-shrink: 0;
  align-self: flex-start;
  width: 26.8656716418%;
  padding-top: 26.8656716418%;
  margin-right: 15px;
  overflow: hidden;
  position: relative;
}
.popup-freebies .freebies-list .img::before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: 1px solid #f0f1f4;
}
.popup-freebies .freebies-list .img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.popup-freebies .freebies-list .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-self: center;
  width: calc(73.1343283582% - 15px);
}
.popup-freebies .freebies-list .content .title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 선물받기 팝업 */
.common-popup.full .popup-gift-accept .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-gift-accept .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-gift-accept .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.popup-gift-accept .guide-box {
  margin-top: 20px;
}
.popup-gift-accept .order-info {
  margin-top: 40px;
}
.popup-gift-accept .form-layout {
  margin-top: 30px;
}
.popup-gift-accept .schedule-calendar {
  margin-top: 10px;
}
.popup-gift-accept .agreement-list {
  gap: 0;
  padding-left: 0;
  margin-top: 40px;
}

/* 베베쿡페이관리 팝업 */
.common-popup.full .popup-bebecookpay-manage .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-bebecookpay-manage .container > .foot {
  width: 100%;
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.common-popup.full .popup-bebecookpay-manage .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.common-popup.full .popup-bebecookpay-manage .container {
  padding-top: 60px;
  padding-bottom: 70px;
}
.popup-bebecookpay-manage .management-list {
  border-top: 1px solid #f0f1f4;
  border-bottom: 1px solid #f0f1f4;
}
.popup-bebecookpay-manage .management-list li:not(:first-child) {
  border-top: 1px dashed #e1e3e8;
}
.popup-bebecookpay-manage .management-list a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 10px 25px 10px 0;
  position: relative;
}
.popup-bebecookpay-manage .management-list a::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 4px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.popup-bebecookpay-manage .management-list .title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}

/* 상품 공통 */
/* 상품 목록 */
.product-list .button-menu {
  margin-top: 20px;
}

/* 상품 상세 */
.product-detail .content-head .name {
  vertical-align: top;
}
.product-detail .content-head .check-circle input[type=checkbox] + span {
  padding: 0 5px 0 26px;
  font-size: 1.4rem;
}
.product-detail .content-head .check-circle input[type=checkbox] + span::before {
  top: 0.75em;
  background: url("../img/common/check-circle-small.png") no-repeat;
  background-size: 16px 16px;
}
.product-detail .content-head .check-circle input[type=checkbox]:checked + span::before {
  background-image: url("../img/common/check-circle-small-checked.png");
}
.product-detail .content-head .list-filter {
  margin-bottom: -6px;
}
.product-detail > .tab-showhide {
  margin-top: 30px;
}
.product-detail > .tab-showhide ~ .accordion {
  width: calc(100% + 40px);
  margin-top: 50px;
  margin-bottom: -50px;
  position: relative;
  left: -20px;
}
.product-detail .review-accordion {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.product-detail .product-top {
  margin-bottom: 20px;
}
.product-detail .product-top .image {
  width: calc(100% + 40px);
  margin-top: -30px;
  position: relative;
  left: -20px;
}
.product-detail .product-top .image .img {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}
.product-detail .product-top .image .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.product-detail .product-top .image .status-group {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  padding: 15px 10px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.product-detail .product-top .image .status-group .status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 26px;
  padding: 0 10px;
  background-color: #f6f7f8;
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.03em;
}
.product-detail .product-top .image .status-group .status.black {
  background-color: #1d1d1e;
}
.product-detail .product-top .image .status-group .status.blue {
  background-color: #1582ed;
}
.product-detail .product-top .image .status-group .status.yellow {
  background-color: #ffce31;
}
.product-detail .product-top .image .status-group .status.mint {
  background-color: #0fcbcb;
}
.product-detail .product-top .image .status-group .status.purple {
  background-color: #9d30e0;
}
.product-detail .product-top .image .status-group .icon-gift {
  margin-right: 4px;
  display: inline-flex;
  width: 14px;
  height: 0;
  max-height: 0;
  padding-top: 14px;
  overflow: hidden;
  background-image: url("../img/common/icon-gift.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px auto;
}
.product-detail .product-top .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: auto;
  right: 10px;
  bottom: 10px;
  left: auto;
}
.product-detail .product-top .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: rgba(29, 29, 30, 0);
  border: 1px solid rgba(29, 29, 30, 0.8);
  opacity: 1;
}
.product-detail .product-top .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
  border: 1px solid #1d1d1e;
}
.product-detail .product-top .content {
  padding: 0 4px;
  margin-top: 20px;
}
.product-detail .product-top .content .title {
  display: flex;
  align-items: center;
}
.product-detail .product-top .content .title .txt {
  flex-grow: 1;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.product-detail .product-top .content .util {
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.product-detail .product-top .content .util .btn-share {
  display: block;
  display: inline-flex;
  width: 31px;
  height: 0;
  max-height: 0;
  padding-top: 31px;
  overflow: hidden;
  background-image: url("../img/common/icon-share-gray.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto;
}
.product-detail .product-top .content .desc {
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.product-detail .product-top .content .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.product-detail .product-top .content .price .vpercent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ff526d;
}
.product-detail .product-top .content .price .vpercent::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../img/common/icon-vsale.png") no-repeat;
  background-size: cover;
}
.product-detail .product-top .content .price .percent {
  font-size:1.4em;
  color:#2982F1;
  font-weight:800;
  margin-right: 5px;
}
.product-detail .product-top .content .price .sale {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.product-detail .product-top .content .price .regular {
  margin-left: 4px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.product-detail .product-top .content .mileage {
  margin-top: 5px;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
}
.product-detail .product-top .content .mileage .percent {
  font-weight: 700;
  color: #1582ed;
  vertical-align: top;
}
.product-detail .product-top .content .tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 10px;
}
/* 24.06.14_원산지 추가 (고정윤) */
.product-detail .product-origin {
  padding: 0 10px;
  margin-top: 20px;
}

.product-detail .product-origin + .product-event {
  padding-top: 17px;
  margin-top: 20px;
  border-top: 1px solid #e1e3e8;
}
.product-detail .product-origin .title {
  margin-bottom: 0px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}

.product-detail .product-origin .content {
  display: flex;
  align-items: center;
}
.product-detail .product-origin .content + .content {
  margin-top: 5px;
}
.product-detail .product-origin .content .txt {
  flex-grow: 1;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
}
/* // 24.06.14_원산지 추가 (고정윤) */
.product-detail .product-delivery {
  padding: 0 10px;
  margin-top: 20px;
}
.product-detail .product-delivery span {
  vertical-align: baseline;
}
.product-detail .product-delivery + .product-event {
  padding-top: 17px;
  margin-top: 20px;
  border-top: 1px solid #e1e3e8;
}
.product-detail .product-delivery .title {
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.product-detail .product-delivery .btn-search {
  display: inline-flex;
  width: 17px;
  height: 0;
  max-height: 0;
  padding-top: 17px;
  overflow: hidden;
  background-image: url("../img/common/icon-search-small.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px auto;
}
.product-detail .product-delivery .icon-location {
  margin-right: 2px;
  vertical-align: middle;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
  display: inline-flex;
  width: 13px;
  height: 13px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -70px -238px;
}
.product-detail .product-delivery .content {
  display: flex;
  align-items: center;
}
.product-detail .product-delivery .content + .content {
  margin-top: 5px;
}
.product-detail .product-delivery .content .txt {
  flex-grow: 1;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
}
.product-detail .product-delivery .content a,
.product-detail .product-delivery .content button {
  flex-shrink: 0;
  margin-left: auto;
}
.product-detail .product-delivery .content .btn-tooltip {
  margin: 0;
  vertical-align: middle;
  -webkit-transform: translateY(-0.15em);
  transform: translateY(-0.15em);
}
.product-detail .product-event {
  padding: 0 10px;
  margin-top: 20px;
}
.product-detail .product-event .title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
}
.product-detail .product-event .title::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url("../img/product/icon-event.png") no-repeat;
  background-size: cover;
}
.product-detail .product-event .list li:not(:first-child) {
  margin-top: 5px;
}
.product-detail .product-event .list li a {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding-left: 10px;
  position: relative;
}
.product-detail .product-event .list li a::before {
  content: "";
  width: 3px;
  height: 3px;
  position: absolute;
  top: 0.65em;
  left: 0;
  background-color: #1d1d1e;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.product-detail .product-event .list .tit {
  flex-grow: 1;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-detail .product-event .list .date {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
}
.product-detail .banner-bar {
  margin-top: 20px;
}
.product-detail .banner-bar-scroll {
  margin-top: 20px;
}
.product-detail .banner-bar-scroll .banner-bar {
  margin-top: 0;
}
.product-detail .product-info {
  padding-bottom: 30px;
  margin-top: -30px;
}
.product-detail .product-info .detail-editor {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.product-detail .product-info .detail-editor.is-active {
  padding-bottom: 25px;
}
.product-detail .product-info .detail-editor.is-active .editor {
  height: auto;
}
.product-detail .product-info .detail-editor.is-active .btn-open::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.product-detail .product-info .detail-editor .editor {
  height: 500px;
  overflow: hidden;
}
.product-detail .product-info .detail-editor .editor > img {
  width: 100% !important;
  height: auto !important;
  -o-object-fit: contain;
  object-fit: contain;
}
.product-detail .product-info .detail-editor .btn-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 50%;
  background-color: #fff;
  border: 1px solid rgba(29, 29, 30, 0.8);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.product-detail .product-info .detail-editor .btn-open::before {
  content: "";
  margin-right: 6px;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  display: inline-flex;
  width: 14px;
  height: 8px;
  background-image: url(../img/sprites/common.png);
  background-size: 268px 253px;
  background-position: -203px -217px;
}
.product-detail .product-menu .product-menu-select {
  display: flex;
  gap: 10px;
}
.product-detail .product-menu .product-menu-select select.select + .select2 {
  flex: 1;
}
.product-detail .product-guide .guide-box {
  margin-top: 15px;
}
.product-detail .product-guide .heading-3 {
  margin-bottom: 20px;
}
.product-detail .product-review .result-info {
  margin: 100px 0;
}
.product-detail .product-review .head {
  display: flex;
  align-items: flex-end;
  margin-top: 30px;
  margin-bottom: 10px;
}
.product-detail .product-review .head:first-child {
  margin-top: 0;
}
.common-container > .hide:first-child + .product-detail .product-review .head {
  margin-top: 0;
}
.product-detail .product-review .head .heading-1,
.product-detail .product-review .head .heading-2,
.product-detail .product-review .head .heading-3,
.product-detail .product-review .head .heading-4,
.product-detail .product-review .head .heading-5 {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.product-detail .product-review .head .heading-1 + .paragraph-1, .product-detail .product-review .head .heading-1 + .paragraph-2, .product-detail .product-review .head .heading-1 + .paragraph-3, .product-detail .product-review .head .heading-1 + .paragraph-4,
.product-detail .product-review .head .heading-2 + .paragraph-1,
.product-detail .product-review .head .heading-2 + .paragraph-2,
.product-detail .product-review .head .heading-2 + .paragraph-3,
.product-detail .product-review .head .heading-2 + .paragraph-4,
.product-detail .product-review .head .heading-3 + .paragraph-1,
.product-detail .product-review .head .heading-3 + .paragraph-2,
.product-detail .product-review .head .heading-3 + .paragraph-3,
.product-detail .product-review .head .heading-3 + .paragraph-4,
.product-detail .product-review .head .heading-4 + .paragraph-1,
.product-detail .product-review .head .heading-4 + .paragraph-2,
.product-detail .product-review .head .heading-4 + .paragraph-3,
.product-detail .product-review .head .heading-4 + .paragraph-4,
.product-detail .product-review .head .heading-5 + .paragraph-1,
.product-detail .product-review .head .heading-5 + .paragraph-2,
.product-detail .product-review .head .heading-5 + .paragraph-3,
.product-detail .product-review .head .heading-5 + .paragraph-4 {
  margin-top: 5px;
}
.product-detail .product-review .head .paragraph-1,
.product-detail .product-review .head .paragraph-2,
.product-detail .product-review .head .paragraph-3,
.product-detail .product-review .head .paragraph-4 {
  width: 100%;
}
.product-detail .product-review .head + .heading-1, .product-detail .product-review .head + .heading-2, .product-detail .product-review .head + .heading-3, .product-detail .product-review .head + .heading-4, .product-detail .product-review .head + .heading-5, .product-detail .product-review .head + .content-head {
  margin-top: 20px;
}
.product-detail .product-review .head .left {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
}
.product-detail .product-review .head .right {
  display: flex;
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
}
.product-detail .product-review .head .count {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.3;
  color: #26479a;
}
.product-detail .product-inquire .result-info {
  margin: 100px 0;
}
.product-detail .product-inquire .head {
  display: flex;
  align-items: flex-end;
  margin-top: 30px;
  margin-bottom: 10px;
}
.product-detail .product-inquire .head:first-child {
  margin-top: 0;
}
.common-container > .hide:first-child + .product-detail .product-inquire .head {
  margin-top: 0;
}
.product-detail .product-inquire .head .heading-1,
.product-detail .product-inquire .head .heading-2,
.product-detail .product-inquire .head .heading-3,
.product-detail .product-inquire .head .heading-4,
.product-detail .product-inquire .head .heading-5 {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.product-detail .product-inquire .head .heading-1 + .paragraph-1, .product-detail .product-inquire .head .heading-1 + .paragraph-2, .product-detail .product-inquire .head .heading-1 + .paragraph-3, .product-detail .product-inquire .head .heading-1 + .paragraph-4,
.product-detail .product-inquire .head .heading-2 + .paragraph-1,
.product-detail .product-inquire .head .heading-2 + .paragraph-2,
.product-detail .product-inquire .head .heading-2 + .paragraph-3,
.product-detail .product-inquire .head .heading-2 + .paragraph-4,
.product-detail .product-inquire .head .heading-3 + .paragraph-1,
.product-detail .product-inquire .head .heading-3 + .paragraph-2,
.product-detail .product-inquire .head .heading-3 + .paragraph-3,
.product-detail .product-inquire .head .heading-3 + .paragraph-4,
.product-detail .product-inquire .head .heading-4 + .paragraph-1,
.product-detail .product-inquire .head .heading-4 + .paragraph-2,
.product-detail .product-inquire .head .heading-4 + .paragraph-3,
.product-detail .product-inquire .head .heading-4 + .paragraph-4,
.product-detail .product-inquire .head .heading-5 + .paragraph-1,
.product-detail .product-inquire .head .heading-5 + .paragraph-2,
.product-detail .product-inquire .head .heading-5 + .paragraph-3,
.product-detail .product-inquire .head .heading-5 + .paragraph-4 {
  margin-top: 5px;
}
.product-detail .product-inquire .head .paragraph-1,
.product-detail .product-inquire .head .paragraph-2,
.product-detail .product-inquire .head .paragraph-3,
.product-detail .product-inquire .head .paragraph-4 {
  width: 100%;
}
.product-detail .product-inquire .head + .heading-1, .product-detail .product-inquire .head + .heading-2, .product-detail .product-inquire .head + .heading-3, .product-detail .product-inquire .head + .heading-4, .product-detail .product-inquire .head + .heading-5, .product-detail .product-inquire .head + .content-head {
  margin-top: 20px;
}
.product-detail .product-inquire .head .left {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
}
.product-detail .product-inquire .head .right {
  display: flex;
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
}
.product-detail .product-inquire .head .count {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.3;
  color: #26479a;
}
.product-detail .product-noti .heading-7:not(:first-child) {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px dashed #e1e3e8;
}
.product-detail .product-noti .table-layout + .heading-7 {
  padding-top: 0;
  margin-top: 30px;
  border-top: 0;
}

/* 상품 검색 */
.product-search {
  display: flex;
  flex-direction: column;
  padding-top: 100px;
}
.product-search > * + .banner-box-scroll {
  margin-bottom: 30px;
}
.product-search .content-head {
  margin-top: 40px;
}
.product-search .form-box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  z-index: 3;
  background-color: #26479a;
}
.product-search .form-box.is-fixed {
  position: fixed;
  top: 50px;
  left: 0;
}
.product-search .form-box.is-fixed + .result-info {
  margin-top: 40px;
}
.product-search .form-box.is-fixed + .content-head {
  margin-top: 10px;
}
.product-search .form-box + .result-info {
  margin-top: 40px;
}
.product-search .form-box + .content-head {
  margin-top: 30px;
}
@media screen and (min-width: 1024px) {
  .side-area ~ .inner .product-search .form-box.is-fixed {
    width: 524px;
    margin-left: -245px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
.product-search .result-info {
  margin: 50px 0;
}
.product-search .result-info .title {
  font-size: 2rem;
}
.product-search .search-history {
  margin-top: 20px;
}
.product-search .search-history .result-info {
  margin: 0;
}
.product-search .search-history li {
  display: flex;
  align-items: center;
}
.product-search .search-history li:not(:first-child) {
  margin-top: 10px;
}
.product-search .search-history li a {
  flex-grow: 1;
  margin-right: auto;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}
.product-search .search-history li .btn-del {
  flex-shrink: 0;
  display: inline-flex;
  width: 30px;
  height: 0;
  max-height: 0;
  padding-top: 30px;
  overflow: hidden;
  background-image: url("../img/product/btn-del-history.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 9px auto;
}
.product-search .search-history .util {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e1e3e8;
}
.product-search .search-history .util .btn-del-all {
  display: block;
  padding: 4px 10px;
  margin-right: -10px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  color: #b4b8c0;
  letter-spacing: -0.03em;
}
.product-search .search-history .result-info {
  margin: 50px 0;
}
.product-search .search-recommend .list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: -5px;
}
.product-search .search-recommend .btn {
  font-size: 1.3rem;
  font-weight: 600;
}
.product-search .search-recommend .btn.skyblue {
  background-color: #e8f3fe;
  border-color: #e8f3fe;
  color: #1d1d1e;
}
.product-search .banner-box-scroll {
  width: calc(100% + 40px);
  padding-top: 30px;
  margin-top: auto;
  margin-bottom: -50px;
  position: relative;
  left: -20px;
}
.product-search .banner-box-scroll .swiper-pagination {
  top: 40px;
}

/* 택배배송안내 팝업 */
.common-popup.full .popup-delivery-info .container {
  padding-top: 60px;
}
.popup-delivery-info .guide-box {
  margin-top: 14px;
}

/* 안심배송안내 팝업 */
.common-popup.full .popup-quick-info .container {
  padding-top: 60px;
}
.popup-quick-info .guide-qna {
  width: calc(100% - 40px);
  margin: 20px auto 0;
  position: static;
  border-radius: 5px;
}
.popup-quick-info .img-content {
  padding-top: 92px;
  margin: 15px 0 30px 0;
  position: relative;
}
.popup-quick-info .img-content > .img {
  width: 375px;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.popup-quick-info .img-content > .img > img {
  width: 100%;
  height: auto;
}
.popup-quick-info .img-content > .content {
  width: calc(100% + 40px);
  padding-top: 60px;
  padding-bottom: 30px;
  position: relative;
  left: -20px;
  background-color: rgba(255, 206, 49, 0.1);
}
.popup-quick-info .img-content > .content .tit {
  font-size: 1.7rem;
  text-align: center;
  letter-spacing: -0.03em;
}
.popup-quick-info .img-content > .content .tit > b {
  font-size: 2rem;
}
.popup-quick-info .img-content > .content .tit + .con {
  margin-top: 5px;
}
.popup-quick-info .img-content > .content .con {
  font-size: 1.4rem;
  font-weight: 300;
  text-align: center;
  letter-spacing: -0.03em;
}

/* 오늘의식단 팝업 */
.common-popup.full .popup-today-menu .container > .body {
  overflow-x: visible;
}
.common-popup.full .popup-today-menu .container > .foot {
  margin-top: 0;
}
.popup-today-menu .button-menu {
  margin-top: 20px;
}
.popup-today-menu .icon-today-menu {
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 5px;
  background: url("../img/product/icon-today-menu.png") no-repeat;
  background-size: cover;
  vertical-align: middle;
  -webkit-transform: translateY(-0.11em);
  transform: translateY(-0.11em);
}
.popup-today-menu .icon-info-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 30px;
}
.popup-today-menu .icon-info-list li {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 서비스안내 공통 */
.service-container .comment-warning + .comment-list {
  margin-top: 6px;
}
.service-container .review-list {
  border-bottom: 1px solid #e1e3e8;
}
.service-container .review-list .item .content .con {
  font-weight: 400;
}

/* 서비스안내 소개 */
.service-intro {
  padding: 0 20px 0;
}
.service-intro .icon-menu {
  margin: 20px 0;
}
.service-intro .txt-boxmenu {
  margin-top: 30px;
  border-bottom: 0;
}
.service-intro .banner-line + .content-head {
  margin: 20px 0 6px;
}
.service-intro .banner-line + .content-head .right > .btn-more-txt {
  margin-right: -10px;
  font-weight: 700;
}
.service-intro .notice-list {
  padding-top: 16px;
  border-top: 1px solid #b4b8c0;
}
.service-intro .notice-list li {
  display: flex;
  align-items: center;
  width: 100%;
}
.service-intro .notice-list li:not(:first-child) {
  margin-top: 12px;
}
.service-intro .notice-list li a {
  display: flex;
  align-items: center;
  width: 100%;
}
.service-intro .notice-list li a .str {
  margin-right: 2px;
  font-weight: 600;
}
.service-intro .notice-list .title {
  flex-grow: 1;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  color: #1d1d1e;
  letter-spacing: -0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-intro .notice-list .title .str {
  margin-top: 2px;
}
.service-intro .notice-list .date {
  flex-shrink: 0;
  margin-left: 10px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  color: #8d8e8f;
  letter-spacing: -0.03em;
}

/* 이달의 식단표 */
.service-schedule .tab-menu {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}
.service-schedule .content-head {
  margin-top: 30px;
}
.service-schedule .content-head .item {
  padding: 5px;
}
.service-schedule .content-head .left {
  flex-wrap: nowrap;
  align-items: center;
}
.service-schedule .content-head .left > *:not(.heading-5) {
  flex-shrink: 0;
  width: auto;
  margin-left: 10px;
  font-size: 1.4rem;
  font-weight: 600;
}
.service-schedule .content-head .right {
  margin-left: 0;
  font-size: 1.4rem;
  font-weight: 600;
}
.service-schedule .content-head.off .heading-5 {
  color: #ed1515;
}
.service-schedule .content-head.off .status {
  color: #ed1515;
}
.service-schedule .content-head.empty .heading-5 {
  color: #b4b8c0;
}
.service-schedule .content-head.empty .status {
  color: #b4b8c0;
}
.service-schedule .icon-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 40px;
}
.service-schedule .icon-wrap > span {
  display: inline-flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 400;
}
.service-schedule .icon-wrap > span > span {
  margin-right: 5px;
}

/* 이용안내 */
.operation-guide > .tab-showhide .accordion {
  width: calc(100% + 40px);
  margin-top: 30px;
  position: relative;
  left: -20px;
}
.operation-guide > .tab-showhide .accordion:first-child {
  margin-top: 0;
}
.operation-guide > .tab-showhide .accordion:last-child {
  margin-bottom: -51px;
}
.operation-guide .join-benefit .benefit-list ~ .img-box {
  margin-top: 60px;
}
.operation-guide .join-benefit .benefit-list {
  margin-top: 30px;
}
.operation-guide .join-benefit .benefit-list .list > li:not(:first-child) {
  margin-top: 40px;
}
.operation-guide .join-benefit .benefit-list .list > li > .title {
  padding-left: 54px;
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.operation-guide .join-benefit .benefit-list .list > li > .title + .content {
  margin-top: 5px;
}
.operation-guide .join-benefit .benefit-list .list > li > .title .icon {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 5px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.operation-guide .join-benefit .benefit-list .list > li > .title .icon > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.operation-guide .join-benefit .benefit-list .list > li > .content {
  padding-left: 54px;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li {
  padding-left: 10px;
  position: relative;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li + li {
  margin-top: 6px;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li .con {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li .con > b {
  font-weight: 500;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li .btn-group {
  margin: 10px 0 20px 0;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li .desc-list {
  margin-top: 3px;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li .desc-list > li {
  padding-left: 10px;
  position: relative;
  font-size: 1.1rem;
  font-weight: 300;
  color: #8d8e8f;
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li .desc-list > li::after {
  content: "*";
  position: absolute;
  top: 0.65em;
  left: 0;
  font-size: 1.1rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.operation-guide .join-benefit .benefit-list .list > li > .content .detail-list > li::after {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 0.65em;
  left: 3px;
  background-color: #1d1d1e;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.operation-guide .join-benefit .benefit-list .btn-group {
  margin-top: 10px;
}
.operation-guide .do-order .icon-dday {
  display: inline-block;
  width: 44px;
  height: 44px;
  margin-right: 10px;
  background: url("../img/service/icon-dday.png") no-repeat center;
  background-size: cover;
  vertical-align: middle;
  -webkit-transform: translate(0, -0.1em);
  transform: translate(0, -0.1em);
}
.operation-guide .baby-food .step-guide .guide-box {
  padding: 10px;
  margin: 20px 0 25px;
}
.operation-guide .baby-food .step-guide .history-list {
  margin-top: 35px;
}
.operation-guide .baby-food .step-guide .history-list > .list > li:last-child {
  padding-bottom: 50px;
}
.operation-guide .delivery-info .guide-qna {
  width: calc(100% - 40px);
  margin: 20px auto 0;
  position: static;
  border-radius: 5px;
}
.operation-guide .delivery-info .guide-qna + .tab-showhide {
  margin-top: 30px;
}
.operation-guide .delivery-info .img-content {
  width: calc(100% + 40px);
  padding-bottom: 30px;
  margin: 16px 0 30px 0;
  position: relative;
  left: -20px;
}
.operation-guide .delivery-info .img-content > .img {
  width: 375px;
  margin: 0 auto;
  position: relative;
}
.operation-guide .delivery-info .img-content > .img::after {
  content: "";
  width: 100vh;
  height: 60%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.operation-guide .delivery-info .img-content > .img > img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.operation-guide .delivery-info .img-content > .content {
  margin-top: 30px;
}
.operation-guide .delivery-info .img-content > .content .tit {
  font-size: 1.7rem;
  text-align: center;
  letter-spacing: -0.03em;
}
.operation-guide .delivery-info .img-content > .content .tit > b {
  font-size: 2rem;
}
.operation-guide .delivery-info .img-content > .content .tit + .con {
  margin-top: 5px;
}
.operation-guide .delivery-info .img-content > .content .con {
  font-size: 1.4rem;
  font-weight: 300;
  text-align: center;
  letter-spacing: -0.03em;
}
.operation-guide .delivery-info .img-content > .content .con + .con {
  margin-top: 6px;
}
.operation-guide .delivery-info .img-content.yellow {
  background-color: rgba(255, 206, 49, 0.1);
}
.operation-guide .delivery-info .img-content.skyblue {
  background-color: rgba(15, 203, 203, 0.1);
}
.operation-guide .bebecook-recommend .heading-3 {
  margin-bottom: 15px;
}
.operation-guide .bebecook-recommend .heading-3 ~ .heading-3 {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid #e1e3e8;
}

/* 이유식 생산안내 */
.production-guide .tab-showhide .accordion {
  width: calc(100% + 40px);
  margin-top: 30px;
  position: relative;
  left: -20px;
}
.production-guide .tab-showhide .accordion:first-child {
  margin-top: 0;
}
.production-guide .tab-showhide .accordion:last-child {
  margin-bottom: -51px;
}
.production-guide .guide-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 15px;
  margin: 20px 0;
  background-color: #f6f7f8;
}
.production-guide .img-guide {
  margin-top: 15px;
  margin-bottom: 20px;
}
.production-guide .img-guide .box {
  display: inline-block;
  min-width: 50px;
  padding: 0 4px;
  margin-bottom: 5px;
  background-color: #1582ed;
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  text-align: center;
}
.production-guide .img-guide > .list > li {
  display: flex;
  gap: 15px;
}
.production-guide .img-guide > .list > li + li {
  margin-top: 5px;
}
.production-guide .img-guide > .list > li > .img {
  flex-shrink: 0;
  align-self: center;
  width: 120px;
  height: 0;
  padding-top: 120px;
  position: relative;
}
.production-guide .img-guide > .list > li > .img > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.production-guide .img-guide > .list > li > .content {
  padding: 10px 0;
}
.production-guide .img-guide > .list > li > .content .tit {
  display: block;
  margin-bottom: 5px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.production-guide .img-guide > .list > li > .content .con {
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.production-guide .ingredient-info .form-box .select {
  width: 100%;
}
.production-guide .ingredient-info .form-box .dropdown-option .title button {
  background-color: #fff;
}
.production-guide .ingredient-info .form-box + .ingredient-col-list {
  margin-top: 20px;
}
.production-guide .container-info .heading-3 + .guide-qna {
  margin-top: 15px;
}
.production-guide .container-info .paragraph-2 {
  margin-top: 10px;
}
.production-guide .nutri-list li {
  font-size: 1.1rem;
  font-weight: 400;
}
.production-guide .nutri-list li + li {
  margin-top: 5px;
}
.production-guide .nutri-list .comment-attention {
  margin-top: 2px;
}

/* 팝업 - 이유식가이드, 영앙식가이드 */
.popup-service-guide .heading-5 {
  margin-top: 30px;
  margin-bottom: 10px;
}
.popup-service-guide table {
  letter-spacing: -0.03em;
}
.popup-service-guide table > thead > tr > th {
  border-right: 1px dashed #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
}
.popup-service-guide table > thead > tr > th:last-child {
  border-right: 0;
}
.popup-service-guide table > tbody > tr > td {
  border-right: 1px dashed #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
  font-size: 1.3rem;
  font-weight: 400;
}
.popup-service-guide table > tbody > tr > td:first-child {
  font-weight: 600;
}
.popup-service-guide table > tbody > tr > td:last-child {
  border-right: 0;
}
.popup-service-guide .step-info {
  margin-top: 10px;
}
.popup-service-guide .step-info > div {
  display: flex;
  align-items: center;
}
.popup-service-guide .step-info > div + div {
  margin-top: 4px;
}
.popup-service-guide .step-info dt {
  min-width: 46px;
  margin-right: 17px;
  position: relative;
  font-size: 1.1rem;
  color: #8d8e8f;
}
.popup-service-guide .step-info dt::after {
  content: "";
  display: block;
  width: 1px;
  height: 11px;
  position: absolute;
  top: 50%;
  right: -8px;
  background-color: #d9d9d9;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.popup-service-guide .step-info dd {
  font-size: 1.1rem;
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .popup-service-guide .step-info dt {
    min-width: 60px;
  }
}
.popup-service-guide .food-info > dl:not(:first-child) {
  margin-top: 15px;
}
.popup-service-guide .food-info .title {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.popup-service-guide .food-info .title > img {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  vertical-align: middle;
  -webkit-transform: translate3d(0, -0.125em, 0);
  transform: translate3d(0, -0.125em, 0);
}
.popup-service-guide .food-info .desc {
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #1d1d1e;
}

/* 이유식 생산안내 */
.production-guide .tab-showhide .tab-content > .content > *:first-child.form-box {
  margin-top: -10px;
}
.production-guide .form-box .select + .select2 {
  min-width: 100%;
}
.production-guide .form-box .dropdown-option .title button {
  background-color: #fff;
}

/* 고객센터 */
.service-customer {
  display: flex;
  flex-direction: column;
}
.service-customer .form-box {
  margin-bottom: 20px;
}
.service-customer .review-list .item .content .con {
  font-weight: 400;
}
.service-customer .accordion.small {
  margin-top: 15px;
  border-bottom: 1px solid #f0f1f4;
}
.service-customer .accordion.small > .item > .title a {
  padding: 13px 54px 12px 10px;
}
.service-customer .accordion.small > .item .content::before {
  right: 10px;
}
.service-customer .accordion.small > .item .content .wrap {
  padding: 0;
}
.service-customer .result-info {
  padding: 100px 0;
}
.service-customer .button-menu {
  margin-bottom: 15px;
}
.service-customer .review-list + .guide-box {
  margin: 15px 0 50px;
}
.service-customer .icon-boxmenu {
  margin-top: auto;
  margin-bottom: -51px;
}
.service-customer .icon-boxmenu .link.consult::before {
  content: "";
  display: inline-block;
  width: 38px;
  height: 36px;
  margin-right: 10px;
  background: url("../img/common/icon-consult-kakao.png") no-repeat center;
  background-size: cover;
}
.service-customer .icon-boxmenu .link.menu::before {
  content: "";
  display: inline-block;
  width: 39px;
  height: 38px;
  margin-right: 10px;
  background: url("../img/common/icon-consult-menu.png") no-repeat center;
  background-size: cover;
}
.service-customer .ingredient-row-list {
  margin-top: 20px;
}

/* 영양과학 Q&A, 나의 Q&A */
.service-qna .form-box + .review-list {
  margin-top: 20px;
}
.service-qna .form-box .select-wrap {
  display: flex;
  gap: 9px;
  margin-bottom: 10px;
}
.service-qna .form-box .select-wrap .select2 {
  flex: 1;
}
.service-qna .tab-menu2 + .btn-group {
  margin-top: 30px;
  margin-bottom: 10px;
}
.service-qna .review-list + .btn-group {
  margin-top: 20px;
}
.service-qna .content-head {
  margin-top: 20px;
}
.service-qna .content-head .count {
  line-height: 1.4;
}
.service-qna .content-head .count .num {
  margin-left: 3px;
  color: #ff526d;
}
.service-qna .result-info {
  width: 100%;
  margin: 44px 0;
}
.service-qna .result-info .visual {
  margin-bottom: 10px;
}
.service-qna .result-info .title {
  margin-bottom: 6px;
  font-size: 2rem;
}

/* 공지사항 */
.service-notice .banner-box-scroll + .board-list {
  margin-top: 17px;
}
.service-notice .board-list + .btn-group {
  margin-top: 20px;
}

/* 1:1상담, 영양과학Q&A, 마이Q&A 상세 팝업 */
.popup-service-detail .container .body .content-head {
  padding-bottom: 6px;
  margin-top: 22px;
  border-bottom: 1px solid #1d1d1e;
}
.popup-service-detail .container .body .content-head .str {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}
.popup-service-detail .container .body .content-head + .review-detail {
  margin-top: 20px;
}

/* 서비스안내 작성관련 팝업 */
.common-popup.full .popup-service-register .container {
  padding-bottom: 100px;
}
.common-popup.full .popup-service-register .container > .foot {
  width: 100%;
  margin-top: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
}
.common-popup.full .popup-service-register .container > .foot .btn-group {
  gap: 0;
  width: 100%;
}
.popup-service-register .container .body > .form-box:first-child {
  margin-top: -9px;
}
.popup-service-register .container .body > .heading-3:first-child {
  margin-top: 18px;
  margin-bottom: 18px;
}
.popup-service-register .container .body .form-box {
  box-sizing: border-box;
  width: calc(100% + 40px);
  padding: 20px;
  position: relative;
  left: -20px;
  background-color: rgba(21, 130, 237, 0.1);
}
.popup-service-register .container .body .form-box + .form-layout {
  margin-top: 20px;
}
.popup-service-register .container .body .form-box .status-msg {
  display: none;
  margin-top: 6px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: #ed1515;
  text-align: left;
}
.popup-service-register .container .body .form-box .status-msg.is-invalid {
  display: block;
}
.popup-service-register .container .body .form-box .status-msg.is-valid {
  display: block;
  font-weight: 700;
  color: #1582ed;
}
.popup-service-register .container .body .form-box .status-msg.is-valid span {
  vertical-align: top;
}
.popup-service-register .container .body .form-box .radio-wrap {
  display: flex;
  gap: 15px;
}
.popup-service-register .container .body .form-box .radio-wrap + .select-wrap {
  margin-top: 3px;
}
.popup-service-register .container .body .form-box .select-wrap {
  display: flex;
  gap: 9px;
}
.popup-service-register .container .body .form-box .select-wrap .select2 {
  flex: 1;
}
.popup-service-register .container .body .form-layout input.text + .input-count-character {
  margin-top: 10px;
}
.popup-service-register .container .body .form-layout .input-tel + .check {
  margin-top: 10px;
}

/* 공지사항상세 팝업 */
.common-popup.full .popup-notice-detail .container > .foot {
  padding-top: 0;
  margin-top: 20px;
  position: relative;
}
.common-popup.full .popup-notice-detail .container > .foot .btn-group {
  padding-top: 20px;
}
.common-popup.full .popup-notice-detail .container > .foot .btn-group::after {
  content: "";
  width: calc(100% + 40px);
  height: 1px;
  position: absolute;
  top: 0;
  left: -20px;
  background-color: #e1e3e8;
}

/* 이물오인사례상세 팝업 */
.popup-misunderstood-detail .img {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  border-bottom: 1px solid #e1e3e8;
}
.popup-misunderstood-detail .img img {
  width: 100% !important;
  height: auto !important;
}
.popup-misunderstood-detail .btn-group {
  margin-top: 20px;
}
/*# sourceMappingURL=common.css.map */



/* 키움뱃지 */
.mypage-container.badge-wrap {
  background: #e6f4ff;
  padding : 0;
}
.badge-detail .banner-box {
  margin: 0;
}
.badge-detail .tab-showhide {
  margin-top: 0;
}
.badge-detail .tab-showhide .tab-menu2 {
  background: #fff;
}
.tab-content .my-badge {
  padding: 0 20px 0 20px;
  background-image: url('../img/mypage/badge/badge_bg.jpg') ;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
}
.badge-date {
  padding-top: 30px;
  margin-bottom: 35px;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}

/* 키움뱃지 - 나의 뱃지 */
/* 아이 키움 뱃지 */
.my-badge .badge-baby {
  margin-bottom: 25px;
}
.badge-baby .title {
  margin-top: 20px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.badge-list-col3 {
  width: 100%;
  margin: 0 auto;
}
.badge-list-col3 ul {
  padding: 0 7%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.badge-list-col3 ul.badge-baby-bg01 {
  background-image: url(../img/mypage/badge/badge_list_bg01.png) ;
  background-repeat: no-repeat;
  background-size: 100%;
}
.badge-list-col3 ul.badge-baby-bg02 {
  background-image: url(../img/mypage/badge/badge_list_bg02.png) ;
  background-repeat: no-repeat;
  background-size: 100%;
}
.badge-list-col3 ul.badge-baby-bg03 {
  background-image: url(../img/mypage/badge/badge_list_bg03.png) ;
  background-repeat: no-repeat;
  background-size: 100%;
}
.badge-list-col3 ul li {
  width: calc(100% / 3);
}
.badge-list-col3 ul li .img {
  display: block;
  width: 100%;
  overflow: hidden;
}
.badge-list-col3 ul li .img img {
  width: 100%;
  object-fit: cover;
}
.badge-list-col3 ul li img.badge-on {
  display: none;
}
.badge-list-col3 ul li.active img.badge-off {
  display: none;
}
.badge-list-col3 ul li.active img.badge-on {
  display: block;
}


/* 등급 키움 뱃지 */
.my-badge .badge-level {
  padding-bottom: 300px;
}
.badge-level .title {
  margin-top: 20px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1e;
  text-align: left;
  letter-spacing: -0.03em;
}
.badge-list-col4 {
  width: 100%;
  margin: 0 auto;
}
.badge-list-col4 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.badge-list-col4 ul li {
  width: calc(100% / 4);
}
.badge-list-col4 ul li .img {
  display: block;
  width: 100%;
  overflow: hidden;
}
.badge-list-col4 ul li .img img {
  width: 100%;
  object-fit: cover;
}
.badge-list-col4 ul li img:last-child {
  display: none;
}
.badge-list-col4 ul li.active img:first-child {
  display: none;
}
.badge-list-col4 ul li.active img:last-child {
  display: block;
}

/* 키움뱃지 - 뱃지 소개 */
.tab-content .badge-info {
  height: 100%;
  margin-top: -30px;
  background: #fff;
}
.badge-info .badge-detail {
  width: 100%;
}
.badge-info .badge-detail .img {
  width: 100%;
}
.badge-info .badge-detail .img img {
  width: 100%;
}
.badge-detail .badge-detail-list {
  width: auto;
  background: #e6f4ff;
  margin: 0 auto;
  padding: 0 5%;
}
.badge-detail .badge-detail-list ul {
  background: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 25px 0 30px;
}
.badge-detail .badge-detail-list ul li {
  width: calc(100% / 2);
  text-align: center;
  margin-bottom: 20px;
}
.badge-detail .badge-detail-list ul li img {
  width : 65%;
}
.badge-detail .badge-detail-list ul li .content {
  min-width: 75%;
  padding: 5px 0;
  background-color: #1582ed;
  border-radius: 25px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6rem;
  color: #fff;
  display: inline-block;
}
.badge-detail .badge-detail-list ul li .content .num {
  font-size: 1.6rem;
  font-weight: 700;
  vertical-align: baseline;
}

/* 키움뱃지 팝업 */
.common-popup .popup-badge {
  overflow-x: hidden;
  overflow-y: visible;
}
.common-popup .popup-badge .container {
  padding: 60px 0 50px;
  position: relative;
}
.common-popup .popup-badge .container > .head {
  height: 0;
}
.common-popup .popup-badge .container > .body {
  max-height: none;
  padding: 0;
  margin: 0;
}
.common-popup .popup-badge .container .badge-pop-img {
  width: 60%;
  margin: 0 auto;
}
.common-popup .popup-badge .container .badge-pop-img img {
  width: 100%;
}
.common-popup .popup-badge .container .heading-4 {
  margin: 10px 0 10px;
}


.banner-photo-scroll {
  position: relative;
}
.banner-photo-scroll .banner-box {
  margin-top: 0;
}
.banner-photo-scroll .swiper-pagination {
  display: flex;
  gap: 4px;
  width: auto;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}
.banner-photo-scroll .swiper-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0;
  background-color: transparent;
  border: 1px solid #1d1d1e;
  opacity: 1;
}
.banner-photo-scroll .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1d1d1e;
}
.banner-photo-scroll.full {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
}

/* 베스트 리뷰 */
.banner-photo-scroll.best-review {
  margin-top: -20px;
  margin-bottom: 30px;
}
.banner-photo-scroll.best-review .img-container {
  width: 100%;
  position :relative;
  padding-top: 100%;
  border-radius: 10px;
  overflow: hidden;
}.banner-photo-scroll.best-review .img-container img {
   position: absolute;
   top:0;
   left: 0;
   width:100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

[v-cloak] {
  display: none;
}

hide {
  display: none;
}

body.hide-quick-menu .bottom-area div.quick-menu {
  display: none;
}

body.hide-bottom-menu .bottom-area div.menu {
  display: none;
}

body.hide-search header.header div.wrap div.util-menu:nth-last-child(1) {
  display: none;
}

body.hide-footer footer.footer {
  display: none;
}

/*label.radio-circle input[type=checkbox] {*/
/*  width:       1px;*/
/*  height:      1px;*/
/*  padding:     0;*/
/*  margin:      -1px;*/
/*  overflow:    hidden;*/
/*  position:    absolute;*/
/*  clip:        rect(0 0 0 0);*/
/*  border:      0;*/
/*  white-space: nowrap*/
/*}*/

/*label.radio-circle input[type=checkbox]:checked + span:before {*/
/*  display:             inline-flex;*/
/*  width:               20px;*/
/*  height:              20px;*/
/*  background-image:    url(/assets/img/sprites/common.png);*/
/*  background-size:     234px 233.5px;*/
/*  background-position: -25px -138px*/
/*}*/

/*label.radio-circle input[type=checkbox] + span {*/
/*  box-sizing:     border-box;*/
/*  display:        inline-flex;*/
/*  min-width:      60px;*/
/*  padding:        6px 5px 6px 30px;*/
/*  position:       relative;*/
/*  font-size:      1.6rem;*/
/*  font-weight:    500;*/
/*  color:          #1d1d1e;*/
/*  letter-spacing: -0.03em;*/
/*  vertical-align: middle*/
/*}*/

/*label.radio-circle input[type=checkbox] + span:before {*/
/*  content:             "";*/
/*  position:            absolute;*/
/*  top:                 calc(.65em + 6px);*/
/*  left:                0;*/
/*  transform:           translateY(-50%);*/
/*  display:             inline-flex;*/
/*  width:               20px;*/
/*  height:              20px;*/
/*  background-image:    url(/assets/img/sprites/common.png);*/
/*  background-size:     234px 233.5px;*/
/*  background-position: -50px -138px*/
/*}*/