/*!* 상단검색 *!*/

/*.top-search-wrap .searchForm .input-search-wrap {*/
/*  height: 40px;*/
/*  margin: 0 auto 20px;*/
/*  max-width: 672px;*/
/*  width: 95%;*/
/*}*/


/*.select-surgery-wrap > ul > li .btn-green {*/
/*  background-color: #3a4c40;*/
/*  color: #ffffff;*/
/*}*/

/*.select-surgery-wrap > ul > li .btn-gray::after {*/
/*  background: url("../images/icons/heart-outline-green.svg") no-repeat center / cover;*/
/*  border: 1px solid #efefef;*/
/*  border-radius: 50%;*/
/*  content: "";*/
/*  height: 20px;*/
/*  position: absolute;*/
/*  right: -10px;*/
/*  top: -10px;*/
/*  width: 20px;*/
/*}*/


/*!* 시술상세 *!*/

/*.select-surgery {*/
/*  align-items: center;*/
/*  display: flex;*/
/*  gap: 8px;*/
/*  grid-area: select;*/
/*}*/

/*.surgery-detail-wrap .select-surgery select {*/
/*  border: 1px solid #ededed;*/
/*  border-radius: 8px;*/
/*  height: 40px;*/
/*  padding: 11px 16px;*/
/*  width: 252px;*/
/*}*/

/*!* 화살표 커스텀 *!*/
/*.surgery-detail-wrap .select-surgery select {*/
/*  -moz-appearance: none; !*for firefox*!*/
/*  -webkit-appearance: none; !* for chrome *!*/
/*  appearance: none;*/
/*  background-image: url('../images/icons/arrow-down-gray.svg');*/
/*  background-position: center right 14px;*/
/*  background-repeat: no-repeat;*/
/*  background-size: 13px 7.5px;*/
/*}*/

/*.surgery-detail-wrap .select-surgery select::-ms-expand {*/
/*  display: none; !*for IE10,11*!*/
/*}*/

/*.surgery-detail-wrap .btn-wrap {*/
/*  align-items: center;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 10px;*/
/*  grid-area: btn;*/
/*  justify-content: center;*/
/*  width: 100%;*/
/*}*/

/*.surgery-detail-wrap .btn-wrap div {*/
/*  width: 100%;*/
/*}*/

/*.surgery-detail-wrap .btn-wrap > div:first-child {*/
/*  text-align: center;*/
/*}*/

/*.surgery-detail-wrap .btn-more {*/
/*  color: #1c1c1c;*/
/*  font-size: 15px;*/
/*  text-align: center;*/
/*  text-decoration: underline;*/
/*}*/

/*.surgery-detail-wrap .btn-more .icon.search-detail {*/
/*  height: 20px;*/
/*  margin-right: 8px;*/
/*  width: 20px;*/
/*}*/

/*.surgery-detail-wrap .btn-consult {*/
/*  background-color: #1c1c1c;*/
/*  border-radius: 8px;*/
/*  color: #fff;*/
/*  font-size: 16px;*/
/*  font-weight: 500;*/
/*  height: 60px;*/
/*  margin: 0;*/
/*  width: 100%;*/
/*}*/

/*.surgery-detail-wrap .btn-consult:hover {*/
/*  background-color: #3c3c3c;*/
/*}*/

/*.surgery-detail-wrap .btn-consult-wrap {*/
/*  text-align: center;*/
/*}*/

/*@media screen and (max-width: 768px) {*/

/*  .surgery-detail-wrap .surgery-detail-turn-specific .turn-specific {*/
/*    max-width: calc((100% - 16px) / 3);*/
/*    white-space: nowrap;*/
/*  }*/

/*  .surgery-detail-wrap .surgery-detail-sub {*/
/*    font-size: 14px;*/
/*    width: 100%;*/
/*  }*/

/*  .surgery-detail-wrap .surgery-detail-price {*/
/*    align-items: flex-start;*/
/*    border-top: 0;*/
/*    flex-direction: column-reverse;*/
/*    grid-template-areas: "ori ori"*/
/*                            "sale sale"*/
/*                           "select select";*/
/*  }*/

/*  .surgery-detail-wrap .event-detail-price {*/
/*    align-items: flex-start;*/
/*    border-top: 0;*/
/*    flex-direction: column-reverse;*/
/*    grid-template-areas: "ori ori"*/
/*                            "sale sale"*/
/*                           "select select";*/
/*  }*/

/*  .surgery-detail-wrap .btn-consult {*/
/*    font-size: 18px;*/
/*  }*/

/*  .surgery-detail-wrap .select-surgery > span {*/
/*    font-size: 14px;*/
/*    height: auto;*/
/*    line-height: initial;*/
/*    margin-bottom: 4px;*/
/*    text-align: left;*/
/*    width: auto;*/
/*  }*/

/*  .surgery-detail-wrap .select-surgery select {*/
/*    max-width: 300px;*/
/*    !*margin-bottom : 15px;*!*/
/*  }*/

/*  .surgery-detail-wrap .btn-wrap {*/
/*    align-items: center;*/
/*    display: flex;*/
/*    gap: 10px;*/
/*    justify-content: center;*/
/*    !*flex-direction: row;*!*/
/*  }*/


/*  .surgery-detail-wrap .sales-price {*/
/*    font-size: 14px;*/
/*  }*/

/*  .select-surgery-wrap > ul {*/
/*    gap: 8px;*/
/*  }*/

/*  .top-search-wrap .searchForm .input-search {*/
/*    font-size: 14px;*/
/*  }*/

/*  .surgery-detail-wrap > ul > li {*/
/*    align-items: center;*/
/*    column-gap: 16px;*/
/*    grid-template-areas:*/
/*        "title title"*/
/*        "sub sub"*/
/*        "spec spec"*/
/*        "turn turn"*/
/*        "price btn";*/
/*    grid-template-columns: 2fr 1fr;*/
/*    row-gap: 8px;*/
/*    width: 100%;*/
/*  }*/

/*  .surgery-detail-wrap .event-detail-turn {*/
/*    gap: 8px;*/
/*  }*/

/*  .surgery-detail-wrap .event-detail-turn .btn-turn {*/
/*    width: calc((100% - 24px) / 4);*/
/*  }*/
/*}*/

/*@media screen and (max-width: 480px) {*/
/*  .surgery-detail-wrap > ul {*/
/*    padding: 20px 10px;*/
/*  }*/

/*  .surgery-detail-wrap .sales-price {*/
/*    font-size: 14px;*/
/*  }*/

/*  .surgery-detail-wrap .btn-more {*/
/*    font-size: 14px;*/
/*  }*/

/*  .surgery-detail-wrap > ul > li {*/
/*    grid-template-areas:*/
/*        "title title"*/
/*        "sub sub"*/
/*        "turn turn"*/
/*        "price price"*/
/*    "btn btn";*/
/*    grid-template-columns: 1fr 1fr;*/
/*    padding: 20px 10px;*/
/*    width: 100%;*/
/*  }*/

/*  .event-list .btn-wrap button {*/
/*    width: 100%;*/
/*  }*/

/*  .surgery-detail-wrap .select-surgery {*/
/*    align-items: flex-start;*/
/*    flex-direction: column;*/
/*    justify-content: flex-start;*/
/*    width: 100%;*/
/*  }*/

/*  .surgery-detail-wrap .select-surgery span {*/
/*    word-break: keep-all;*/
/*  }*/

/*  .surgery-detail-wrap .select-surgery select {*/
/*    width: 100%;*/
/*  }*/

/*  .surgery-detail-wrap .surgery-detail-price {*/
/*    gap: 8px;*/
/*  }*/

/*  .surgery-detail-wrap .btn-wrap {*/
/*    flex-direction: row;*/
/*    justify-content: space-between;*/
/*    margin-top: 16px;*/
/*  }*/

/*  .surgery-detail-wrap .event-detail-turn .btn-turn {*/
/*    width: calc((100% - 16px) / 3);*/
/*  }*/

/*  .surgery-detail-wrap > ul > li .info p:nth-child(2) {*/
/*    font-size: 16px;*/
/*  }*/
/*}*/

.wrap.customer-recommend-wrap {
  padding-top: 0;

  & .input-search-wrap {
    border-radius: 8px;
    height: fit-content;
    margin: 0;
    min-width: 300px;

    & form {
      flex: 1;

      & .input-search-wrap {
        border-radius: 8px;
        height: fit-content;
        margin: 0;
        min-width: 300px;

        & input {
          height: 50px;
          padding: 10px;

          &::placeholder {
            color: #999999;
          }
        }
      }
    }
  }

  & .select-surgery-wrap {
    margin-top: 20px;

    & ul {
      display: grid;
      gap: 6px;
      grid-template-columns:  repeat(5, 1fr);
      @media screen and (max-width: 768px) {
        grid-template-columns:  repeat(3, 1fr);
      }

      & li {
        & button {
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          color: #aaaaaa;
          height: 44px;
          position: relative;
          transition: all 0.2s ease-in-out;
          width: 100%;

          &:hover {
            background: #e0e0e0;
            border-color: #e0e0e0;
          }

          &.btn-green {
            background-color: #3a4c40;
            color: #ffffff;
          }

          &.btn-gray {
            &::after {
              background: url("../images/icons/heart-outline-green.svg") no-repeat center / cover;
              border: 1px solid #efefef;
              border-radius: 50%;
              content: "";
              height: 20px;
              position: absolute;
              right: -5px;
              top: -5px;
              width: 20px;
            }
          }
        }
      }
    }
  }

  & .event-list {

    & ul {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 40px;

      & li {
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        transition: all 0.2s ease-in-out;
        width: 100%;

        &:hover {
          border: 1px solid #22c55e;
        }

        & .top-box {
          border-bottom: 1px solid #e0e0e0;
          padding: 20px;

          & .event-title {
            display: flex;
            flex-direction: column;
            gap: 10px;

            & span.chips {
              background: #F3E7DC;
              border-radius: 4px;
              color: #B87333;
              font-weight: 600;
              padding: 4px 10px;
              width: fit-content;
            }

            & > span:not(.chips) {
              font-size: 20px;
              font-weight: 600;
            }
          }

          & .event-content {
            color: #999999;
            margin-top: 4px;
          }
        }

        & .bottom-box {
          align-items: flex-end;
          display: flex;
          justify-content: space-between;
          padding: 20px;

          & .event-price {
            font-family: "Lato", sans-serif;
            font-size: 36px;
            font-weight: bold;

            & span {
              font-family: 'Pretendard', 'Noto Sans SC', sans-serif;
              font-size: 14px;
              font-weight: 300;
              margin-left: 4px;
            }
          }

          & .btn-wrap {
            & button.btn-more {
              align-items: center;
              background: #3a4c40;
              border-radius: 6px;
              color: #ffffff;
              display: flex;
              font-size: 14px;
              font-weight: 500;
              height: 44px;
              justify-content: space-between;
              padding: 0 20px;
            }
          }
        }

        &.default {
          & .info {
            align-items: center;
            display: flex;
            flex-direction: column;
            padding: 20px;

            & p {
              color: #666666;
              font-size: 16px;
              font-weight: 500;

              & i.icon.warning-black {
                height: 40px;
                width: 40px;
              }

              &:nth-child(2) {
                color: #333333;
                font-size: 20px;
                font-weight: 600;
                margin: 10px 0;
              }
            }
          }
        }
      }
    }

    & button.btn-consult {
      align-items: center;
      background: #3a4c40;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      font-size: 16px;
      font-weight: 600;
      height: 60px;
      justify-content: center;
      margin-top: 20px;
      width: 100%;
    }
  }
}

.customer-recommend-detail-wrap {
  margin: 0 auto;
  max-width: 1016px;

  & .btn-back {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    font-size: 16px;
    gap: 8px;
    height: 40px;
    justify-content: center;
    margin-bottom: 20px;
    min-width: 120px;
    transition: 0.3s;

    & i {
      height: 20px;
      width: 20px;
    }
  }

  & .event {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 40px;
    padding: 20px 0;
    width: 100%;

    & .event-title {
      display: flex;
      flex-direction: column;
      font-size: 16px;
      gap: 10px;
      margin-bottom: 4px;
      padding: 0 20px;

      & .chips {
        background: #F3E7DC;
        border-radius: 4px;
        color: #B87333;
        font-weight: 600;
        padding: 4px 10px;
        width: fit-content;
      }

      & > span:not(.chips) {
        font-size: 20px;
        font-weight: 600;
      }
    }

    & .event-content {
      color: #959595;
      font-size: 12px;
      padding: 0 20px;
    }

    & .event-period-price {
      border-top: 1px solid #f2f2f2;
      margin-top: 20px;
      padding: 20px 20px 0;

      & .event-price {
        color: #777777;
        font-size: 14px;

        & .min-price, .max-price {
          color: #111111;
          font-family: "Lato", sans-serif;
          font-size: 36px;
          font-weight: 900;
        }

        & .max-price {
          margin-left: 10px;
        }
      }
    }
  }

  .customer-recommend-detail-box {
    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      & li {
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        transition: border 0.3s ease-in-out;
        width: calc((100% - 20px) / 2);

        &:hover {
          border: 1px solid #22c55e;
        }

        & .li-header {
          border-radius: 10px 10px 0 0;
          flex: 1;

          padding: 20px;

          & .surgery-detail-title {
            color: #111111;
            font-size: 20px;
            font-weight: 700;
            position: relative;
            width: fit-content;
            z-index: 2;

            &:after {
              background-color: #86efac;
              border-radius: 2px;
              bottom: 2px;
              content: '';
              display: block;
              height: 14px;
              left: 50%;
              opacity: 0.5;
              position: absolute;
              transform: translateX(-50%);
              width: calc(100% + 10px);
              z-index: -1;
            }
          }

          & .surgery-detail-sub {
            color: #777777;
            font-size: 14px;
            font-weight: 400;
            margin-top: 4px;
          }
        }

        & .select-surgery {
          align-items: flex-start;
          display: flex;
          flex: 1;
          flex-direction: column;
          gap: 4px;
          justify-content: flex-end;
          padding: 0 20px;

          & span {
            color: #777777;
            font-size: 12px;
          }

          & select {
            background: url(/images/icons/arrow-down-gray.svg) no-repeat right 10px center;
            border: 1px solid #EAEAEA;
            border-radius: 6px;
            height: 32px;
            padding: 0 30px 0 10px;
          }
        }


        & .event-detail-price, .surgery-detail-price {
          align-items: flex-end;
          border-top: 1px solid #f2f2f2;
          display: flex;
          flex: 0;
          justify-content: space-between;
          margin-top: 20px;
          padding: 20px 20px;

          & .origin-price {
            color: #777777;
            font-size: 14px;
            font-weight: 200;

            & span {
              font-family: "Lato", sans-serif;
              font-weight: 300;
              margin-right: 2px;
              text-decoration: line-through;
            }
          }

          & .final-price-box {
            align-items: flex-start;
            display: flex;
            gap: 6px;
            justify-content: flex-start;
            margin-top: 4px;

            & .discount {
              color: #D40023;
              font-family: "Lato", sans-serif;
              font-size: 20px;
              font-weight: 500;
            }

            & .sales-price {
              color: #333333;

              & span {
                font-family: "Lato", sans-serif;
                font-size: 20px;
                font-weight: 600;
                margin-right: 2px;
              }
            }
          }

          & .btn-wrap {
            & button {
              align-items: center;
              background-color: #3a4c40;
              border-radius: 6px;
              color: #ffffff;
              display: flex;
              font-size: 16px;
              height: 40px;
              padding: 0 20px;
              width: 100%;
            }
          }
        }

        & .surgery-detail-turn-specific {
          display: flex;
          margin-bottom: 6px;
          padding: 0 20px;

          & button {
            align-items: center;
            border: 1px solid #EAEAEA;
            border-right: 1px solid transparent;
            color: #A5A5A5;
            display: flex;
            font-size: 12px;
            font-weight: 500;
            height: 32px;
            justify-content: center;
            padding: 0 10px;

            &.active {
              background: #3A4C4007;
              border: 1px solid #3A4C40;
              color: #333333;
              font-weight: 600;
            }

            &:nth-child(1) {
              border-bottom-left-radius: 6px;
              border-top-left-radius: 6px;
            }

            &:nth-last-child(1) {
              border-bottom-right-radius: 6px;
              border-right: 1px solid #eaeaea;
              border-top-right-radius: 6px;

              &.active {
                border-right: 1px solid #3A4C40;
              }
            }
          }
        }

        & .event-detail-turn {
          align-items: flex-end;
          display: flex;
          padding: 0 20px;

          & button.disabled {
            align-items: center;
            border: 1px solid #EAEAEA;
            border-right: 1px solid transparent;
            color: #A5A5A5;
            display: flex;
            font-size: 12px;
            font-weight: 500;
            height: 32px;
            justify-content: center;
            padding: 0 10px;

            &.active {
              background: #3A4C4007;
              border: 1px solid #3A4C40;
              color: #333333;
              font-weight: 600;
            }

            &:nth-child(1) {
              border-bottom-left-radius: 6px;
              border-top-left-radius: 6px;
            }

            &:nth-last-child(1) {
              border-bottom-right-radius: 6px;
              border-right: 1px solid #eaeaea;
              border-top-right-radius: 6px;

              &.active {
                border-right: 1px solid #3A4C40;
              }
            }
          }
        }
      }
    }
  }

  .equipment-introduction > ul > li {
    width: calc((100% - (16px * 3)) / 4);

    &:hover {
      border: 1px solid #e0e0e0;
    }
  }
}

& .customer-recommend-detail-wrap {
  display: flex;
  gap: 40px;
  margin: 0 auto;
  max-width: 1600px;
  position: relative;
  @media screen and (max-width: 1600px) {
    padding: 0 20px;
  }
  @media screen and (max-width: 1280px) {
    gap: 30px;
  }
  @media screen and (max-width: 1016px) {
    padding-top: 0;
  }

  & > div {
    & > .title-wrap {
      margin-bottom: 10px;

      & h2 {
        font-size: 24px;
        margin-bottom: 4px;
        padding: 0;
        text-align: left;

        & strong {
          color: #22c55e;
        }
      }

      & p {
        color: #767676;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }
  }

  & .left {
    flex: 1;

    & .event {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      margin-bottom: 40px;
      padding: 20px 0;
      width: 100%;

      & .event-title {
        display: flex;
        flex-direction: column;
        font-size: 16px;
        gap: 10px;
        margin-bottom: 4px;
        padding: 0 20px;

        & .chips {
          background: #F3E7DC;
          border-radius: 4px;
          color: #B87333;
          font-weight: 600;
          padding: 4px 10px;
          width: fit-content;
        }

        & > span:not(.chips) {
          font-size: 20px;
          font-weight: 600;
        }
      }

      & .event-content {
        color: #959595;
        font-size: 12px;
        padding: 0 20px;
      }

      & .event-period-price {
        border-top: 1px solid #f2f2f2;
        margin-top: 20px;
        padding: 20px 20px 0;

        & .event-price {
          color: #777777;
          font-size: 14px;

          & .min-price, .max-price {
            color: #111111;
            font-size: 36px;
            font-weight: 900;
          }

          & .max-price {
            margin-left: 10px;
          }
        }
      }
    }

    & .customer-recommend-detail-box {
      & > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        & li {
          border: 1px solid #e0e0e0;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          transition: border 0.3s ease-in-out;
          width: calc((100% - 20px) / 2);
          @media screen and (max-width: 1280px) {
            width: 100%;
          }

          & .li-header {
            border-radius: 10px 10px 0 0;
            padding: 20px;

            & .surgery-detail-title {
              color: #111111;
              font-size: 20px;
              font-weight: 700;
              position: relative;
              width: fit-content;
              z-index: 2;

              &:after {
                background-color: #86efac;
                border-radius: 2px;
                bottom: 2px;
                content: '';
                display: block;
                height: 14px;
                left: 50%;
                opacity: 0.5;
                position: absolute;
                transform: translateX(-50%);
                width: calc(100% + 10px);
                z-index: -1;
              }
            }
          }

          & .surgery-detail-sub {
            color: #777777;
            font-size: 14px;
            font-weight: 400;
            margin-top: 4px;
          }

          &:hover {
            border: 1px solid #22c55e;
          }
        }

        & .surgery-detail-turn-specific {
          display: flex;
          margin-bottom: 6px;

          padding: 0 20px;

          & button {
            align-items: center;
            border: 1px solid #EAEAEA;
            color: #A5A5A5;
            display: flex;
            font-size: 12px;
            font-weight: 500;
            height: 32px;
            justify-content: center;
            padding: 0 10px;

            &.active {
              background: #3A4C4007;
              border: 1px solid #3A4C40;
              color: #333333;
              font-weight: 600;
            }

            &:nth-child(1) {
              border-bottom-left-radius: 6px;
              border-top-left-radius: 6px;
            }

            &:nth-last-child(1) {
              border-bottom-right-radius: 6px;
              border-right: 1px solid #eaeaea;
              border-top-right-radius: 6px;

              &.active {
                border-right: 1px solid #3A4C40;
              }
            }
          }
        }

        & .event-detail-turn {
          align-items: flex-end;
          display: flex;
          flex: 1;
          padding: 0 20px;

          & button.disabled {
            align-items: center;
            border: 1px solid #EAEAEA;
            color: #A5A5A5;
            display: flex;
            font-size: 12px;
            font-weight: 500;
            height: 32px;
            justify-content: center;
            padding: 0 10px;

            &.active {
              background: #3A4C4007;
              border: 1px solid #3A4C40;
              color: #333333;
              font-weight: 600;
            }

            &:nth-child(1) {
              border-bottom-left-radius: 6px;
              border-top-left-radius: 6px;
            }

            &:nth-last-child(1) {
              border-bottom-right-radius: 6px;
              border-top-right-radius: 6px;
            }
          }
        }

        & .select-surgery {
          align-items: flex-start;
          display: flex;
          flex: 1;
          flex-direction: column;
          gap: 4px;
          justify-content: flex-end;
          padding: 0 20px;

          & span {
            color: #777777;
            font-size: 12px;
          }

          & select {
            background: url('/images/icons/arrow-down-gray.svg') no-repeat right 10px center;
            border: 1px solid #EAEAEA;
            border-radius: 6px;
            height: 32px;
            padding: 0 30px 0 10px;
          }
        }

        & .event-detail-price, .surgery-detail-price {
          align-items: flex-end;
          border-top: 1px solid #f2f2f2;
          display: flex;
          flex: 0;
          justify-content: space-between;
          margin-top: 20px;
          padding: 20px 20px;

          & .origin-price {
            color: #777777;
            font-size: 14px;
            font-weight: 200;

            & span {
              font-family: "Lato", sans-serif;
              font-weight: 300;
              margin-right: 2px;
              text-decoration: line-through;
            }
          }

          & .final-price-box {
            align-items: flex-start;
            display: flex;
            gap: 6px;
            justify-content: flex-start;
            margin-top: 4px;

            & .discount {
              color: #D40023;
              font-family: "Lato", sans-serif;
              font-size: 20px;
              font-weight: 500;
            }

            & .sales-price {
              color: #333333;

              & span {
                font-family: "Lato", sans-serif;
                font-size: 20px;
                font-weight: 600;
                margin-right: 2px;
              }
            }
          }
        }

        & .btn-wrap {
          & button {
            align-items: center;
            background-color: #3a4c40;
            border-radius: 6px;
            color: #ffffff;
            display: flex;
            font-size: 16px;
            height: 40px;
            padding: 0 20px;
            width: 100%;
          }
        }
      }
    }
  }

  & > .cart-wrap {
    height: fit-content;
    position: sticky;
    top: 160px;
    width: 500px;
    @media screen and (max-width: 1016px) {
      background: #ffffff;
      border-radius: 20px 20px 0 0 ;
      bottom: 0;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
      left: 0;
      padding-bottom: 80px;
      position: fixed;
      top: auto;
      transition: transform 0.2s ease-in-out;
      width: 100%;
      z-index: 999;
    }

    & button.cart-toggle-button {
      display: none;
      /*left: 50%;*/
      height: 40px;
      position: absolute;
      /*transform: translateX(-50%);*/
      right: 20px;
      top: 14px;
      width: 40px;
      @media screen and (max-width: 1016px) {
        display: block;
      }
      @media screen and (max-width: 768px) {
        right: 10px;
      }

      & i.arrow {
        background: url("/images/icons/swiper-down.svg") no-repeat center / contain;
        height: 100%;
        width: 100%;
      }
    }

    &.hide {
      @media screen and (max-width: 1016px) {
        transform: translateY(calc(100% - 124px));
      }

      & i.arrow {
        transform: rotate(180deg);
      }
    }

    & .cart-box {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      border-top: 4px solid #86efac;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      height: fit-content;
      padding: 20px;
      width: 100%;
      @media screen and (max-width: 1016px) {
        border: none;
        box-shadow: none;
        padding: 0;
      }

      & > .title-wrap {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px;
        @media screen and (max-width: 1016px) {
          padding: 20px 20px 0;
        }
        @media screen and (max-width: 768px) {
          padding: 20px 20px 0;
        }

        & h2.title {
          align-items: center;
          display: flex;
          gap: 10px;
          height: 30px;
          margin-bottom: 6px;
          padding: 0;
          @media screen and (max-width: 1016px) {
            font-size: 20px;
            margin-bottom: 20px;
          }

          & span {
            font-size: 24px;
            margin: 0;
            @media screen and (max-width: 1016px) {
              font-size: 20px;
              margin: 0;
            }
          }

          & .search-box {
            display: none;
            position: relative;
            @media screen and (max-width: 460px) {
              display: block;
            }

            & input {
              height: 30px;
            }

            & .search-gray {
              height: 20px;
              position: absolute;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);
              width: 20px;
            }
          }

        }

        & p {
          display: flex;
          justify-content: space-between;

          & span {
            color: #22c55e;
          }

          & button {
            text-decoration: underline;
          }
        }
      }

      & ul {
        @media screen and (max-width: 1016px) {
          max-height: calc(100vh - 600px);
          overflow-y: auto;
          padding: 0 20px;
        }
        @media screen and (max-width: 768px) {
          padding: 0 10px;
        }

        & li {
          border-bottom: 1px solid #e0e0e0;
          padding: 10px 0;

          &:first-child {
            border-top: 1px solid #e0e0e0;
          }

          &:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }

          & label {
            align-items: flex-end;
            cursor: pointer;
            display: flex;
            padding-left: 30px;
            position: relative;

            & .left {
              & .title-wrap {
                margin-bottom: 10px;

                & .event-detail-title {
                  font-size: 16px;
                  font-weight: 600;
                }

                & .event-detail-sub {
                  color: #767676;
                  font-size: 14px;
                  font-weight: 400;
                }
              }

              & .event-detail-turn {
                align-items: flex-end;
                display: flex;
                flex: 1;

                & button {
                  align-items: center;
                  border: 1px solid #EAEAEA;
                  border-right: 1px solid transparent;
                  color: #A5A5A5;
                  display: flex;
                  font-size: 12px;
                  font-weight: 500;
                  height: 32px;
                  justify-content: center;
                  padding: 0 10px;
                  transition: all 0.3s ease-in-out;

                  &.active {
                    background: #3A4C4007;
                    border: 1px solid #3A4C40;
                    color: #333333;
                    font-weight: 600;

                    & + button {
                      border-left: 1px solid transparent;
                    }
                  }

                  &:nth-child(1) {
                    border-bottom-left-radius: 6px;
                    border-top-left-radius: 6px;
                  }

                  &:nth-last-child(1) {
                    border-bottom-right-radius: 6px;
                    border-right: 1px solid #EAEAEA;
                    border-top-right-radius: 6px;

                    &.active {
                      border-right: 1px solid #3A4C40;
                    }
                  }
                }
              }
            }

            & > .right {
              & .price-wrap {
                align-items: flex-end;
                display: flex;
                gap: 2px;
                justify-content: flex-end;
                width: 150px;
                @media screen and (max-width: 1016px) {
                  width: 90px;
                }

                & span {
                  margin-bottom: 2px;
                }

                & p {
                  font-family: "Lato", sans-serif;
                  font-size: 24px;
                  font-weight: 600;
                  @media screen and (max-width: 1016px) {
                    font-size: 16px;
                  }
                }
              }
            }
          }

          & .checkbox + label:before {
            display: block;
            flex: 0;
            left: 0;
            margin: 0;
            position: absolute;
            top: 0;
          }

          & .checkbox#invitationVisit + label:before {
            left: 20px;
            top: 20px;
          }
        }
      }
    }

    & .reservation-button-wrap {
      margin-top: 10px;
      @media screen and (max-width: 1016px) {
        padding: 0 20px;
      }
      @media screen and (max-width: 768px) {
        padding: 0 10px;
      }

      & .total-box {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        height: fit-content;
        margin-bottom: 20px;
        padding: 20px;
        @media screen and (max-width: 1016px) {
          background: #fafafa;
          border: none;
          border-radius: 6px;
          box-shadow: none;
          padding: 10px;
        }

        & .total-price {
          align-items: flex-start;
          display: flex;
          flex-direction: column;
          @media screen and (max-width: 1016px) {
            align-items: center;
            flex-direction: row;
          }

          & > span {
            display: block;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            width: auto;
          }

          & > div {
            text-align: right;
            width: 100%;

            & .total-price-number {
              color: #22c55e;
              font-family: "Lato", sans-serif;
              font-size: 32px;
              @media screen and (max-width: 1016px) {
                font-size: 20px;
              }
            }

            & > span {
              font-size: 14px;
            }
          }
        }

        & .text-box {
          @media screen and (max-width: 1016px) {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
          }

          & p {
            color: #A5A5A5;
          }
        }
      }

      & button {
        background: #3a4c40;
        border-radius: 10px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        height: 50px;
        width: 100%;
      }
    }
  }
}