html {
  scroll-behavior: smooth;
}

main {
  background: var(--color-gray-175);
}

.notice {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 8px;
  background: var(--color-gray-3);
  color: var(--color-gray-7);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 6px 12px;
}
.notice .icon {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 8px;
}
.notice .icon svg, .notice .icon path {
  fill: var(--color-gray-7);
}
.notice p {
  font-size: 13px;
  line-height: 18.2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.notice .icon, .notice > svg {
  width: 20px;
  height: 20px;
}

.hr {
  width: 100%;
  height: 0;
  border-top: 1px solid transparent;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-rgb-white), 0.2)), color-stop(50%, rgba(var(--color-rgb-white), 0.2)), color-stop(50%, transparent), to(transparent));
  background-image: linear-gradient(to right, rgba(var(--color-rgb-white), 0.2) 0%, rgba(var(--color-rgb-white), 0.2) 50%, transparent 50%, transparent 100%);
  background-size: 8px 1px;
  margin: 16px auto;
}

.moreInfo {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (min-width: 768px) {
  .moreInfo {
    display: none;
  }
}
.moreInfo .moreInfoBtn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--color-gray-175);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 8px;
  cursor: pointer;
}
.moreInfo .moreInfoBtn.lineOpen > svg {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.moreInfo .moreInfoBtn svg {
  width: 16px;
  height: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.moreInfo .moreInfoBtn svg path {
  fill: var(--color-white);
}

.kvArea .kv {
  width: 100%;
  height: 0;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 0;
  background-color: var(--color-gray-1);
  border-radius: 0 0 0 40px;
  padding-bottom: 26.0416666667%;
  display: block;
  overflow: hidden;
  background-image: url('data:image/svg+xml,<svg width="360" height="92" viewBox="0 0 360 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M114.953 18.7812C112.168 18.7812 110.638 20.6712 109.742 22.9153L98.1739 52.536L87.3113 22.9153C86.3222 20.4012 84.7963 18.7812 82.0108 18.7812C78.9547 18.7812 76.6172 21.0299 76.6172 24.0751C76.6172 24.7922 76.8877 25.8766 77.247 26.6821L92.7714 66.1998L85.5192 84.4316C84.2684 87.5831 86.6237 90.9869 90.0169 90.9382C91.9197 90.9116 93.6229 89.7519 94.3503 87.9947L119.726 26.5006C119.908 25.965 120.174 24.7921 120.174 23.898C120.17 21.0298 117.832 18.7812 114.953 18.7812Z" fill="%23424242"/><path d="M7.60933 3.30078C10.679 3.30078 13.3241 5.11855 14.5271 7.73605C14.6005 7.86238 14.67 7.9923 14.7351 8.1258L35.9475 51.6176L57.16 8.1258C57.1966 8.05046 57.2347 7.97641 57.2741 7.90338C57.3046 7.84701 57.3359 7.79115 57.3679 7.73605C58.5709 5.11855 61.2161 3.30078 64.2857 3.30078C68.4883 3.30078 71.895 6.7075 71.895 10.9101V61.8139C71.895 64.7122 69.5455 67.0617 66.6472 67.0617C63.749 67.0617 61.3994 64.7122 61.3994 61.8139V23.376L41.5908 63.4649C41.5908 63.4649 39.8729 66.5369 35.9475 66.5369C32.0222 66.5369 30.3043 63.4649 30.3043 63.4649L10.4956 23.376V61.8139C10.4956 64.7122 8.14609 67.0617 5.24781 67.0617C2.34954 67.0617 0 64.7122 0 61.8139V10.9101C0 6.7075 3.40679 3.30078 7.60933 3.30078Z" fill="%23424242"/><path d="M186.299 24.243C186.299 21.2029 188.549 18.7812 191.502 18.7812C194.454 18.7812 196.794 21.2029 196.794 24.243V61.6835C196.794 64.7281 194.454 67.0611 191.502 67.0611C188.643 67.0611 186.299 64.7325 186.299 61.6835V24.243Z" fill="%23424242"/><path d="M197.319 6.45061C197.319 9.63962 194.733 12.221 191.544 12.221C188.355 12.221 185.773 9.63962 185.773 6.45061C185.773 3.2616 188.359 0.675781 191.544 0.675781C194.737 0.680217 197.319 3.26603 197.319 6.45061Z" fill="%23424242"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.566 0.675781C244.74 0.675781 242.45 2.96656 242.45 5.79239V23.1818C238.392 20.2491 233.407 18.5207 228.018 18.5207C214.396 18.5207 203.354 29.5632 203.354 43.1847C203.354 56.8063 214.396 67.8488 228.018 67.8488C241.639 67.8488 252.682 56.8063 252.682 43.1847C252.682 43.1842 252.682 43.1836 252.682 43.1831H252.683V5.7924C252.683 2.96657 250.392 0.675781 247.566 0.675781ZM242.45 42.9021V43.1831H242.452C242.452 43.1836 242.452 43.1842 242.452 43.1847C242.452 51.1569 235.99 57.6196 228.018 57.6196C220.045 57.6196 213.583 51.1569 213.583 43.1847C213.583 35.2126 220.045 28.7499 228.018 28.7499C235.895 28.7499 242.299 35.0604 242.45 42.9021Z" fill="%23424242"/><path fill-rule="evenodd" clip-rule="evenodd" d="M335.336 57.6184C343.308 57.6184 349.771 51.1557 349.771 43.1836C349.771 35.2114 343.308 28.7487 335.336 28.7487C327.364 28.7487 320.901 35.2114 320.901 43.1836C320.901 51.1557 327.364 57.6184 335.336 57.6184ZM335.336 67.8476C348.958 67.8476 360 56.8052 360 43.1836C360 29.562 348.958 18.5195 335.336 18.5195C321.714 18.5195 310.672 29.562 310.672 43.1836C310.672 56.8052 321.714 67.8476 335.336 67.8476Z" fill="%23424242"/><path d="M169.468 6.68111L152.185 54.7676L134.906 6.68111C134.157 4.6476 132.223 3.30078 130.069 3.30078C126.465 3.30078 123.972 6.91159 125.227 10.3052L144.171 61.4575C145.418 64.8289 148.616 67.0617 152.189 67.0617C155.767 67.0617 158.961 64.8289 160.207 61.4575L179.147 10.3052C180.402 6.91159 177.909 3.30078 174.309 3.30078C172.151 3.30078 170.221 4.6476 169.468 6.68111Z" fill="%23424242"/><path d="M283.344 67.8371C269.589 67.8371 258.98 57.8499 258.98 43.1831V43.0031C258.98 29.4156 268.601 18.2578 282.175 18.2578C297.28 18.2578 304.74 30.6748 304.74 41.6526C304.74 44.7117 302.403 46.8715 299.616 46.8715H269.859C271.027 54.6102 276.511 58.9285 283.524 58.9285C288.108 58.9285 291.706 57.31 294.762 54.7902C295.571 54.1609 296.29 53.8009 297.549 53.8009C299.975 53.8009 301.863 55.6894 301.863 58.2092C301.863 59.5598 301.234 60.729 300.425 61.5383C296.109 65.4087 290.715 67.8371 283.344 67.8371ZM294.131 39.6741C293.413 32.6546 289.277 27.1658 282.085 27.1658C275.433 27.1658 270.757 32.2947 269.769 39.6741H294.131Z" fill="%23424242"/></svg>');
  background-position: center center;
  background-size: 180px;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  .kvArea .kv {
    border-radius: 0 0 0 60px;
  }
}
.kvArea .kv img {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}

.promoArea {
  padding: 32px 24px 0;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .promoArea {
    max-width: 960px;
    padding: 40px 80px 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1200px) {
  .promoArea {
    padding: 64px 80px 0;
  }
}
.promoArea .promoTitle {
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .promoArea .promoTitle {
    margin-bottom: 40px;
  }
}
.promoArea .promoTitle h1 {
  font-size: 28px;
  line-height: 39.2px;
  font-weight: bold;
  color: var(--color-white);
  margin-bottom: 4px;
}
@media screen and (min-width: 768px) {
  .promoArea .promoTitle h1 {
    font-size: 40px;
    line-height: 56px;
  }
}
.promoArea .promoTitle time, .promoArea .promoTitle p {
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
  color: var(--color-white);
  display: block;
}
@media screen and (min-width: 768px) {
  .promoArea .promoTitle time, .promoArea .promoTitle p {
    font-size: 18px;
    line-height: 27px;
  }
}
.promoArea .promoTitle time {
  margin-bottom: 16px;
}

.promoGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: auto;
  gap: 16px;
}
.promoGroup .promoSec {
  width: 100%;
  background: var(--color-gray-2);
  border-radius: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec {
    padding: 24px 40px;
  }
}
.promoGroup .promoSec#terms {
  scroll-margin-top: 84px;
}
@media screen and (min-width: 1200px) {
  .promoGroup .promoSec#terms {
    scroll-margin-top: 64px;
  }
}
.promoGroup .promoSec h2 {
  font-size: 16px;
  line-height: 22.4px;
  font-weight: bold;
  color: var(--color-white);
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec h2 {
    font-size: 18px;
    line-height: 25.2px;
  }
}
.promoGroup .promoSec .promoBox {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.promoGroup .promoSec .promoBox .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .promoBox .row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 16px;
  }
}
.promoGroup .promoSec .promoBox .row h3, .promoGroup .promoSec .promoBox .row p {
  font-size: 14px;
  line-height: 19.6px;
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .promoBox .row h3, .promoGroup .promoSec .promoBox .row p {
    font-size: 15px;
    line-height: 21px;
  }
}
.promoGroup .promoSec .promoBox .row h3 {
  color: var(--color-gray-6);
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .promoBox .row h3 {
    width: 200px;
  }
}
.promoGroup .promoSec .promoBox .row p {
  color: var(--color-white);
}
.promoGroup .promoSec .promoBox .row p.orange {
  color: var(--color-orange-2);
  text-decoration: none;
}
.promoGroup .promoSec .giftBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .giftBox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 16px 24px;
  }
}
.promoGroup .promoSec .giftBox .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  gap: 16px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 calc(100% - 16px);
          flex: 1 1 calc(100% - 16px);
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .giftBox .row {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc((100% - 24px) / 2);
            flex: 1 1 calc((100% - 24px) / 2);
  }
}
.promoGroup .promoSec .giftBox .row .image {
  width: 120px;
  height: 120px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-gray-2);
  border: 1px solid var(--color-gray-5);
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}
.promoGroup .promoSec .giftBox .row .image img {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: contain;
     object-fit: contain;
}
.promoGroup .promoSec .giftBox .row .image img {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .giftBox .row .image:hover img {
    -webkit-transform: scale(1.6);
        -ms-transform: scale(1.6);
            transform: scale(1.6);
  }
}
@media screen and (min-width: 1200px) {
  .promoGroup .promoSec .giftBox .row .image {
    width: 165px;
    height: 165px;
  }
}
.promoGroup .promoSec .giftBox .row .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}
.promoGroup .promoSec .giftBox .row .content h4 {
  font-size: 14px;
  line-height: 21px;
  font-weight: normal;
  color: var(--color-white);
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .giftBox .row .content h4 {
    font-size: 15px;
    line-height: 22.5px;
  }
}
.promoGroup .promoSec .giftBox .row .content p {
  font-size: 13px;
  line-height: 19.5px;
  font-weight: normal;
  color: var(--color-gray-7);
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .giftBox .row .content p {
    font-size: 14px;
    line-height: 21px;
  }
}
.promoGroup .promoSec .formBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
@media screen and (min-width: 1200px) {
  .promoGroup .promoSec .formBox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.promoGroup .promoSec .formBox .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .formBox .row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.promoGroup .promoSec .formBox .row .inputWrapBase {
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .promoGroup .promoSec .formBox .row .inputWrapBase {
    width: 170px;
  }
}
@media screen and (min-width: 1200px) {
  .promoGroup .promoSec .formBox .row.row-1, .promoGroup .promoSec .formBox .row.row-1 .inputWrapBase {
    width: 100%;
  }
}
.promoGroup .promoSec .formBox .inputWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}
.promoGroup .promoSec .formBox .inputWrap label {
  font-size: 13px;
  line-height: 18.2px;
  color: var(--color-gray-7);
  font-weight: normal;
  padding: 0 16px;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .formBox .inputWrap label {
    font-size: 15px;
    line-height: 21px;
    padding: 0 24px;
  }
}
.promoGroup .promoSec .termsBox {
  position: relative;
}
.promoGroup .promoSec .termsBox ol, .promoGroup .promoSec .termsBox ol li {
  list-style: decimal;
}
@media screen and (max-width: 767px) {
  .promoGroup .promoSec .termsBox .termsList {
    max-height: 336px;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
  }
}
.promoGroup .promoSec .termsBox ol li {
  color: var(--color-white);
  margin-left: 24px;
  margin-bottom: 4px;
}
.promoGroup .promoSec .termsBox ol li:last-child {
  margin-bottom: 0;
}
.promoGroup .promoSec .termsBox p, .promoGroup .promoSec .termsBox ol li {
  font-size: 14px;
  line-height: 21px;
}
@media screen and (min-width: 768px) {
  .promoGroup .promoSec .termsBox p, .promoGroup .promoSec .termsBox ol li {
    font-size: 15px;
    line-height: 22.5px;
  }
}

.floatArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  gap: 16px;
  padding: 20px 20px 52px;
  margin-top: 24px;
  -webkit-transition: none;
  transition: none;
}
@media screen and (min-width: 768px) {
  .floatArea {
    width: 100%;
    gap: 24px;
    padding: 0 80px 64px;
    margin-top: 40px;
  }
}
.floatArea .floatGroup {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 960px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .floatArea .floatGroup {
    gap: 24px;
    text-align: center;
  }
}
.floatArea .floatGroup .confirmBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.floatArea .floatGroup .confirmBox .highlight {
  font-weight: bold;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--color-orange-2);
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  .floatArea .floatGroup .confirmBox .highlight {
    font-size: 18px;
    line-height: 25.2px;
  }
}
.floatArea .floatGroup .confirmBox .highlight a {
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  display: inline;
}
.floatArea .floatGroup .confirmBox .highlight a:hover {
  color: var(--color-orange-2-hover);
}
@media screen and (min-width: 768px) {
  .floatArea .floatGroup .confirmBox .checkboxBase {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.floatArea .floatGroup .btn {
  width: 100%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .floatArea .floatGroup .btn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.floatArea .floatGroup .disabledBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
}
.floatArea .floatGroup .disabledBox i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gray-7);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.floatArea .floatGroup .disabledBox i svg {
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.floatArea .floatGroup .disabledBox i svg path {
  fill: var(--color-black);
}
.floatArea .floatGroup .disabledBox p {
  font-size: 16px;
  line-height: 22.4px;
  font-weight: bold;
  color: var(--color-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .floatArea .floatGroup .disabledBox p {
    font-size: 18px;
    line-height: 25.2px;
  }
}
.floatArea.sticky {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 24px;
  background: var(--color-gray-1);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  z-index: 5;
}
@media screen and (min-width: 768px) {
  .floatArea.sticky {
    padding: 20px 80px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.floatArea.sticky.slideDown {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.floatArea.sticky .floatGroup {
  text-align: left;
}
@media screen and (min-width: 768px) {
  .floatArea.sticky .floatGroup {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 40px;
  }
}
@media screen and (min-width: 768px) {
  .floatArea.sticky .floatGroup .confirmBox {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media screen and (min-width: 768px) {
  .floatArea.sticky .floatGroup .confirmBox .highlight {
    margin-bottom: 4px;
  }
}
@media screen and (min-width: 768px) {
  .floatArea.sticky .floatGroup .btn {
    margin: 0;
  }
}
@media screen and (min-width: 768px) {
  .floatArea.sticky .floatGroup .btn.size_66_66_50 {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding: 0 24px;
  }
}