@charset "UTF-8";
@import "utils.scss";

/*변수파일 import*/
//장바구니 레이아웃 및 요소
.contentWarp {
  .cartView {
    padding-left: 2rem;
    padding-right: 2rem;

    @include desktopMin {
      width: 120rem;
    }

    @include desktopMax {
      padding-left: 0rem;
      padding-right: 0rem;
    }

    .pageTitle {
      h1 {
        font-size: 3rem;
        font-weight: 600;
        line-height: 1;

        @include desktopMin {
          font-size: 4.5rem;
          font-weight: 600;
        }
      }

      p {
        font-size: 1.6rem;
        font-weight: 400;
        margin-top: 1.5rem;

        @include desktopMin {
          font-size: 1.8rem;
          font-weight: 400;
          margin-top: 2rem;
        }
      }
    }

    .pageSubTitle {
      margin-top: 7rem;

      h2 {
        font-size: 2.4rem;
        font-weight: 600;
      }
    }

    .productListWarp {
      margin-top: 2rem;

      @include desktopMin {
        margin-top: 3rem;
      }

      .allSelect {
        border: 1px solid #dedede;
        border-radius: 0.6rem;
        padding: 2rem;
        height: 5.5rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        span {
          color: #676767;
          font-size: 1.6rem;
          margin-left: 2rem;
        }
      }

      .productLis {
        margin-top: 1rem;

        ul {
          li {
            border: 1px solid #dedede;
            border-radius: 0.6rem;

            .cartItemWrap {
              display: flex;
              padding: 2rem;
              padding-left: 2rem;

              @include maxmobile {
                flex-wrap: wrap;
              }

              @include mobileSmall {
                flex-wrap: wrap;
              }

              @include tablet {
                flex-wrap: nowrap;
                justify-content: space-between;
              }

              @include desktopMin {
                padding: 3rem;
                padding-left: 2rem;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
              }

              .cartItem {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                flex-shrink: 2;
                align-items: center;

                @include tablet {
                  flex-wrap: nowrap;
                  padding-right: 3rem;
                }

                @include desktopMin {
                  justify-content: space-between;
                  padding-right: 5rem;
                  flex-wrap: nowrap;
                }

                .cartItemInfo {
                  display: flex;
                  width: 100%;
                  flex-wrap: wrap;
                  align-items: center;
                  padding-bottom: 2rem;
                  margin-bottom: 2rem;
                  border-bottom: 1px solid #dedede;

                  @include tablet {
                    padding-bottom: 0;
                    margin-bottom: 0;
                    border-bottom: none;
                    flex-wrap: nowrap;
                  }

                  >div {
                    display: flex;
                    margin-top: 1.4rem;

                    @include tablet {
                      margin-top: 0;
                    }

                    >p {
                      min-width: 7.5rem;
                      height: 7.5rem;
                      overflow: hidden;
                      border-radius: 0.6rem;
                      margin-left: 0rem;

                      @include tablet {
                        min-width: 10rem;
                        height: 10rem;
                        margin-left: 2rem;
                      }

                      @include desktopMin {
                        min-width: 17rem;
                        height: 17rem;
                      }

                      img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        aspect-ratio: 1 / 1;
                      }
                    }

                    dl {
                      margin-left: 1.5rem;
                      display: flex;
                      flex-wrap: wrap;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      width: 100%;

                      @include tablet {
                        max-width: 50%;
                        margin-left: 2rem;
                      }

                      @include desktopMin {
                        max-width: 58%;
                      }

                      dt {
                        font-weight: 600;
                        font-size: 1.6rem;
                        color: #000;
                        line-height: 2rem;

                        a {
                          color: #000;
                        }

                        @include desktopMin {
                          font-size: 2rem;
                          line-height: 2.6rem;
                        }
                      }

                      dd {
                        font-weight: 400;
                        font-size: 1.4rem;
                        line-height: 2rem;
                        color: #676767;

                        @include desktopMin {
                          line-height: 2.2rem;
                        }
                      }

                      dt,
                      dd {
                        width: 100%;
                        white-space: normal;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;

                        @include desktopMin {
                          -webkit-line-clamp: 2;
                        }
                      }

                      dt+dd {
                        margin-top: 0.5rem;

                        @include desktopMin {
                          margin-top: 0.8rem;
                        }
                      }

                      dd+dd {
                        margin-top: 1.5rem;
                        font-size: 1.4rem;

                        @include desktopMin {
                          margin-top: 2rem;
                        }
                      }
                    }
                  }
                }

                .cartItemInfo+dl {
                  @include maxmobile {
                    width: 100%;
                  }

                  @include tablet {
                    min-width: 14rem;
                    text-align: right;
                  }

                  @include desktopMin {
                    min-width: 14rem;
                    text-align: right;
                  }

                  dt {
                    font-size: 1.4rem;

                    @include desktopMin {
                      font-size: 1.6rem;
                    }

                    &.experienceInfo {
                      padding: 0.2rem 0;

                      &.cost {
                        font-weight: 600;
                      }
                    }
                  }

                  dd {
                    font-size: 2rem;
                    font-weight: 600;
                    margin-top: 1rem;

                    @include desktopMin {
                      font-size: 2.4rem;
                    }
                  }
                }
              }

              .addBtnWarp {
                display: flex;
                flex-grow: 1;
                align-items: center;
                margin-top: 3rem;
                margin-left: 4rem;
                justify-content: flex-end;

                @include maxmobile {
                  width: 100%;
                  margin-left: 0rem;
                }

                @include tablet {
                  margin-top: 0;
                  flex-basis: 18rem;
                  margin-left: 0rem;
                }

                .towButton {
                  width: 100%;
                  min-width: 18rem;

                  button+button {
                    margin-top: 1rem;
                  }

                  @include mobile {
                    max-width: inherit;
                  }

                  @include tablet {
                    min-width: 15rem;
                    max-width: 15rem;
                    flex-direction: column;
                  }

                  @include desktopMin {
                    min-width: 18rem;
                    max-width: 18rem;
                  }

                  .rightBtn {
                    @include tablet {
                      margin-left: 0;
                    }
                  }
                }
              }
            }

            .components {
              background-color: #f3f3f3;
              padding: 3rem 3rem 3rem 6rem;

              @include maxtablet {
                padding: 2rem;
              }

              .componentsTitle {
                font-size: 1.6rem;
                font-weight: 600;
                color: #000000;

                @include maxtablet {
                  font-size: 1.4rem;
                }
              }

              .componentsList {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                margin-top: 0.2rem;

                @include maxtablet {
                  display: block;
                  margin-top: 0.8rem;
                }

                .item {
                  width: 17rem;
                  margin-top: 1.8rem;
                  margin-right: 1.8rem;
                  text-align: center;

                  @media (max-width: 1024px) {
                    width: 10rem;
                  }

                  @include maxtablet {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 100%;
                    margin-top: 1.2rem;
                    margin-right: 0;
                    text-align: left;
                  }

                  .itemImg {
                    width: 17rem;
                    height: 17rem;
                    border-radius: 0.6rem;
                    overflow: hidden;

                    @media (max-width: 1024px) {
                      width: 10rem;
                      height: 10rem;
                    }

                    @include maxtablet {
                      width: 4rem;
                      height: 4rem;
                    }

                    img {
                      width: 17rem;
                      height: 17rem;

                      @media (max-width: 1024px) {
                        width: 10rem;
                        height: 10rem;
                      }

                      @include maxtablet {
                        width: 4rem;
                        height: 4rem;
                      }
                    }
                  }

                  .itemTitle {
                    margin-top: 1.2rem;
                    font-size: 1.4rem;
                    font-weight: 600;
                    line-height: 1.8rem;

                    @include maxtablet {
                      margin-top: 0;
                      margin-left: 0.7rem;
                      font-weight: 400;
                    }
                  }
                }
              }
            }

            .componentsPayment {
              background-color: #f3f3f3;
              padding: 3rem;

              @include maxtablet {
                padding: 2rem;
              }

              .componentsTitle {
                font-size: 1.6rem;
                font-weight: 600;
                color: #000000;

                @include maxtablet {
                  font-size: 1.4rem;
                }
              }

              .componentsList {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 0.2rem;

                @include maxtablet {
                  display: block;
                  margin-top: 0.8rem;
                }

                .item {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  width: 33.333%;
                  text-align: center;
                  margin-bottom: 1.5rem;
                  padding-right: 1.5rem;

                  @media (max-width: 1024px) {
                    width: 100%;
                    margin-right: 0;
                    text-align: left;
                  }

                  .itemImg {
                    width: 4rem;
                    height: 4rem;
                    border-radius: 0.6rem;
                    overflow: hidden;

                    img {
                      width: 4rem;
                      height: 4rem;
                    }
                  }

                  .itemTitle {
                    padding-left: 1.2rem;
                    font-size: 1.4rem;
                    font-weight: 600;
                    line-height: 1.8rem;
                    text-align: left;
                    width: calc(100% - 4rem);

                    @include maxtablet {
                      margin-top: 0;
                      padding-left: 0.7rem;
                      font-weight: 400;
                    }
                  }
                }
              }

              &.spec {
                .componentsList {
                  align-items: flex-start;
                  width: 100%;

                  h3 {
                    width: 17rem;
                    font-size: 1.6rem;
                  }

                  .item {
                    flex: 1;
                    flex-wrap: wrap;
                    padding: 0;
                    margin-bottom: 0;
                    gap: 1rem;

                    dl {
                      display: flex;
                      justify-content: space-between;
                      width: 100%;

                      dt {
                        font-size: 1.4rem;
                        color: #676767;
                        font-weight: 400;
                      }

                      dd {
                        font-size: 1.6rem;
                        color: #000;
                        font-weight: 600;
                      }
                    }
                  }
                }
              }
            }

            .streamingPremiumComponents {
              background-color: #f3f3f3;
              padding: 2rem;
              display: flex;
              flex-direction: column;
              align-items: flex-start;

              @include tablet {
                flex-direction: row;
                align-items: center;
              }

              .componentsTitle {
                font-size: 1.6rem;
                font-weight: 600;
                color: #000000;

                @include tablet {
                  flex-basis: 30%;
                  margin-left: 2rem;
                  display: flex;
                  align-items: center;
                }

                @include maxtablet {
                  font-size: 1.4rem;
                }
              }

              .componentsList {
                display: flex;
                flex-direction: column;
                margin-top: 0.2rem;
                width: 100%;

                @include tablet {
                  flex-basis: 70%;
                }

                @include maxtablet {
                  margin-top: 0.8rem;
                }

                .item {
                  padding: 0.4rem 0;
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                  position: relative;

                  @include maxtablet {
                    text-align: left;
                  }

                  .itemTitle {
                    font-size: 1.4rem;
                    line-height: 1.8rem;
                    flex-basis: 55%;
                    word-wrap: break-word;

                    @include maxtablet {
                      margin-top: 0;
                    }
                  }

                  .itemPrice {
                    flex-basis: 45%;
                    text-align: right;

                    @include maxtablet {
                      align-self: flex-end;
                    }
                  }
                }
              }
            }
          }

          li+li {
            margin-top: 1rem;
          }

          .noPrice {
            padding: 2rem;
            text-align: center;

            @include tablet {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              justify-content: space-between;
            }

            @include desktopMin {
              padding-left: 3rem;
              min-height: 17rem;
            }

            >p {
              font-weight: 600;
              font-size: 1.8rem;
              color: #9ea1a2;

              @include desktopMin {
                font-size: 2.4rem;
              }
            }

            .PriceGoList {
              display: flex;
              flex-wrap: wrap;
              width: 100%;
              margin: 0 auto;

              @include maxtablet {
                width: 18rem;
              }

              @include maxmobile {
                width: 100%;
              }

              @include tablet {
                flex-wrap: nowrap;
                margin: 0;
                width: fit-content;
              }

              @include desktopMin {
                flex-wrap: nowrap;
                margin: 0;
                width: fit-content;
              }

              >p {
                width: 100%;
                display: flex;
                align-items: center;
                font-size: 2.4rem;
                font-weight: 600;
              }

              .oneButton {
                margin-top: 3rem;

                @include tablet {
                  margin-top: 0;
                  min-width: 15rem;
                  margin-left: 5rem;
                  width: fit-content;
                }

                @include desktopMin {
                  margin-top: 0;
                  min-width: 18rem;
                  margin-left: 5rem;
                }

                button,
                a {

                  &::before,
                  &::after {
                    @include tablet {
                      width: 3.2rem;
                    }

                    @include desktopMin {
                      width: 3.2rem;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .totalWarp {
        background-color: #f3f3f3;
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 3rem 2rem 2rem 2rem;
        border-radius: 0.6rem;

        @include mobile {
          padding: 2rem;
        }

        @include maxtablet {
          flex-wrap: nowrap;
          width: inherit;
        }

        @include maxmobile {
          flex-wrap: wrap;
        }

        @include desktopMin {
          flex-wrap: nowrap;
          padding: 3rem;
          padding-left: 6rem;
          max-height: 12rem;
        }

        >p {
          font-size: 1.4rem;

          @include mobile {
            font-size: 1.6rem;
          }
        }

        .totalPrice {
          display: flex;
          flex-wrap: wrap;
          margin-top: 1.5rem;
          width: 100%;

          @include mobile {
            margin-top: 0;
          }

          @include maxtablet {
            width: 18rem;
          }

          @include maxmobile {
            width: 100%;
          }

          @include tablet {
            flex-wrap: nowrap;
            margin-top: 0;
            width: fit-content;
          }

          @include desktopMin {
            flex-wrap: nowrap;
            margin-top: 0;
            width: fit-content;
          }

          >p {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 2rem;
            font-weight: 600;

            @include mobile {
              justify-content: flex-end;
            }
          }

          .oneButtonBlack {
            margin-top: 3rem;

            @include mobile {
              margin-top: 1rem;
            }

            @include tablet {
              margin-top: 0;
              min-width: 15rem;
              margin-left: 5rem;
              width: fit-content;
            }

            @include desktopMin {
              margin-top: 0;
              min-width: 18rem;
              margin-left: 5rem;
            }

            button,
            a {

              &::before,
              &::after {
                @include tablet {
                  width: 3.2rem;
                }

                @include desktopMin {
                  width: 3.2rem;
                }
              }
            }
          }
        }
      }
    }

    .counponList {
      margin-top: 3rem;
      border-top: 1px solid #dedede;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.5rem 0;

        @media (max-width: 768px) {
          display: block;
        }

        .infoWrap {
          width: calc(100% - 15rem);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          @media (max-width: 768px) {
            width: 100%;
          }

          .info {
            display: flex;
            flex-wrap: wrap;

            .radioItem {
              margin-top: 0.5rem;

              [type="radio"] {
                position: relative;
                top: -0.1rem;
                vertical-align: middle;
                appearance: none;
                border: max(1px, 0.1em) solid #05141f;
                border-radius: 50%;
                width: 1.5rem;
                height: 1.5rem;
                transition: border 0.3s ease-in-out;
              }

              [type="radio"]:checked::after {
                content: "";
                position: absolute;
                top: 0.3rem;
                left: 0.3rem;
                width: 0.7rem;
                height: 0.7rem;
                background: #000000;
                border-radius: 100%;
              }

              [type="radio"]:disabled {
                background-color: #dedede;
                box-shadow: none;
                opacity: 0.7;
                cursor: not-allowed;
              }

              [type="radio"]:disabled+span {
                opacity: 0.5;
                cursor: not-allowed;
              }

              span {
                position: relative;
                font-size: 1.6rem;
                font-weight: 600;
                padding-left: 0.5rem;
                color: #000000;

                &::before {
                  content: "";
                  position: absolute;
                  top: 0.1rem;
                  right: -1.2rem;
                  display: inline-block;
                  width: 0.1rem;
                  height: 1.5rem;
                  background-color: #dedede;
                  padding-top: 0.2rem;
                }
              }

              &.none {
                span {
                  &::before {
                    display: none;
                  }
                }
              }
            }

            .title {
              position: relative;
              padding-left: 2.4rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-top: 0.5rem;
              font-size: 1.6rem;
              font-weight: 600;
              color: #676767;
            }
          }

          .date {
            margin-top: 1.2rem;
            margin-left: 2.4rem;
            font-size: 1.4rem;
            font-weight: 400;
            color: #676767;
          }
        }

        .benefit {
          width: 15rem;
          margin-top: 2.5rem;
          text-align: right;
          font-size: 2rem;
          font-weight: 600;
          color: 600;

          @media (max-width: 768px) {
            width: 100%;
            margin-left: 2.4rem;
            text-align: left;
            font-size: 1.8rem;
          }
        }

        &.noList {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 8rem;
          margin-top: 2rem;
          border: 1px solid #dedede;
          border-radius: 0.6rem;
          width: 100%;
          overflow: hidden;
          color: #9ea1a2;
        }
      }

      .coupon-active {
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        min-height: 8rem;
        width: 100%;
        padding: 2rem 4rem 2rem 2rem;
        font-size: 1.6rem;
        color: #000;
        border: 1px solid #dedede;
        border-radius: 0.6rem;
        text-align: left;

        @include tablet {
          padding: 2rem 4rem 2rem 3rem;
        }

        &:after {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          right: 2rem;
          transform: translateY(-50%);
          width: 1rem;
          height: 2rem;
          background: url(../images/common/icon-bgo.svg) no-repeat center / 100% auto;
        }

        &.active {
          color: #fff;
          background-color: #05141f;

          strong {
            display: flex;
            align-items: center;

            &:before {
              content: "";
              display: inline-block;
              width: 2.4rem;
              height: 2rem;
              margin-right: 1.2rem;
              background: url(../images/common/icon_coupon_w.png) no-repeat center / 100% auto;
            }
          }

          &:after {
            filter: brightness(0) saturate(100%) invert(100%);
          }
        }
      }
    }
  }
}

.couponPopup {
  .coupon-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
    max-height: 59vh;
    margin: 0;
    padding: 0;
    border: none;

    li {
      position: relative;

      &+li {
        margin-top: 2rem;
      }
    }

    input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      appearance: none;

      &:focus {
        outline: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

      &:checked {
        &~.coupon-item {
          border-color: #111;

          &:focus {
            outline: none;
          }

          .icon-check {
            background-color: #05141f;
            background-image: url("../images/common/coupon_check_on.png");
          }
        }
      }

      &:disabled {
        &~.coupon-item {
          background-color: #f1f1f1;
          border-color: #e0e0e0;
          color: #aaa;
          cursor: not-allowed;

          .coupon-label {
            color: #aaa;

            strong {
              color: #9ea1a2;
            }

            small {
              color: #bbb;
            }
          }
        }
      }
    }

    .coupon-item {
      position: relative;
      display: flex;
      justify-content: space-between;
      gap: 1.2rem;
      border: 1px solid #ccc;
      border-radius: 0.8rem;
      background-color: #fff;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent; //

      &:focus {
        outline: none;
      }

      &.coupon-none {
        @include tablet {
          height: 8rem;
        }

        .coupon-label {
          @include tablet {
            display: flex;
            align-items: center;
            padding: 1.6rem 3rem;
          }
        }
      }

      .coupon-label {
        flex: 1;
        padding: 1.6rem;
        line-height: 1.4;

        @include tablet {
          padding: 4rem 3rem;
        }

        strong {
          display: block;
          font-size: 1.6rem;
          font-weight: 600;
          color: #000;

          @include tablet {
            font-size: 1.8rem;
            line-height: 1.35;
          }
        }

        small {
          display: block;
          margin-top: 0.4rem;
          padding-left: 6.6rem;
          text-indent: -6.6rem;
          font-size: 1.4rem;
          font-weight: 400;
          color: #676767;

          @include tablet {
            margin-top: 1rem;
            line-height: 1.6;
          }
        }

        span {
          display: inline-block;
        }

        .error-text {
          display: block;
          font-size: 1.4rem;
          color: #ea0029;
        }
      }

      .icon-check {
        display: flex;
        width: 4.4rem;
        background: url("../images/common/coupon_check.png") no-repeat center / 2.2rem auto;
        flex-shrink: 0;
        border-left: 1px dashed #dedede;
        border-radius: 0 0.8rem 0.8rem 0;

        @include tablet {
          width: 16rem;
        }
      }
    }
  }

  .popInner {
    @include tablet {
      max-width: 76rem;
    }

    .towButton {
      margin-top: 3rem;
      gap: 1rem;

      @include tablet {
        justify-content: center;

        &>a {
          width: 18rem;
          margin: 0;
        }
      }
    }
  }
}

//주문결재 레이아웃
.contentWarp.carsw {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;

  @include maxtablet {
    flex-wrap: wrap;
  }

  @include desktopMax {
    width: 120rem;
  }

  .carswLeft {
    margin-top: 6rem;
    width: 100%;

    @include tablet {
      width: 60%;
      margin-top: 10rem;
      padding-bottom: 15rem;
    }

    @include maxtablet {
      flex-wrap: wrap;
    }

    @include desktopMin {
      width: 70%;
      margin-top: 10rem;
    }

    @include desktopMax {
      width: 73rem;
    }

    .pageSubTitle {
      margin-top: 4rem;

      @include tablet {
        margin-top: 7rem;
      }

      h2 {
        font-size: 1.8rem;

        @include tablet {
          font-size: 2.4rem;
        }
      }
    }

    .productListWarp {
      .productLis {
        ul {
          li {
            .cartItemWrap {
              padding: 0;

              .cartItem {
                padding-right: 2rem !important;
                justify-content: space-between;
                border-radius: 0.6rem;
                overflow: hidden;

                @include desktopMin {
                  padding-right: 1rem;
                }

                @media (max-width: 767px) {
                  padding: 2rem;
                }

                .cartItemInfo {
                  >div {
                    margin-top: 0;

                    >p {
                      margin-left: 0;
                      border-radius: 0;

                      @media (max-width: 767px) {
                        border-radius: 0.6rem;
                      }

                      @include tablet {
                        width: 10rem;
                        height: 10rem;
                      }

                      @include desktopMin {
                        min-width: 18rem;
                        height: 18rem;
                      }

                      img {
                        width: 7.5rem;
                        height: 7.5rem;

                        @include tablet {
                          width: 18rem;
                          height: 18rem;
                        }
                      }
                    }
                  }
                }

                .cartItemInfo+dl {
                  min-width: 20rem;

                  dd {
                    font-size: 2rem;
                    font-weight: 600;
                    margin-top: 0.5rem;

                    @include desktopMin {
                      font-size: 2.4rem;
                    }

                    .discount {
                      display: block;
                      font-size: 1.6rem;
                      font-weight: 600;
                      color: #9ea1a2;
                      text-decoration: line-through;
                    }

                    .price {
                      display: flex;
                      align-items: center;
                      justify-content: flex-start;

                      @include tablet {
                        justify-content: flex-end;
                      }

                      strong {
                        order: 1;

                        @include tablet {
                          order: 2;
                        }
                      }

                      .dc {
                        order: 2;
                        margin-left: 0.4rem;
                        font-size: 1.8rem;
                        font-weight: 600;
                        color: #ea0029;

                        @include tablet {
                          order: 1;
                          margin-left: 0;
                          margin-right: 0.8rem;
                        }
                      }
                    }
                  }
                }

                >dl {
                  .couponBtn {
                    display: flex;
                    justify-content: flex-end;
                    margin-top: 1rem !important;

                    @media (max-width: 767px) {
                      justify-content: flex-start;
                    }

                    .info {
                      display: flex;
                      align-items: center;
                      margin-right: 1rem;
                      font-size: 1.4rem;
                      font-weight: 400;
                      color: #000000;
                    }

                    .apply {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 7.2rem;
                      height: 2.4rem;
                      font-size: 1.4rem;
                      font-weight: 400;
                      color: #ffffff;
                      background-color: #05141f;
                    }

                    .clear {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 7.2rem;
                      height: 2.4rem;
                      font-size: 1.4rem;
                      font-weight: 400;
                      color: #9ea1a2;
                      background-color: #f3f3f3;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .couponInfo {
      margin-top: 2rem;

      ul {
        li {
          display: flex;
          align-items: center;
          margin-bottom: 0.5rem;
          font-size: 1.4rem;
          font-weight: 400;
          color: #676767;
          line-height: 2.2rem;

          &::before {
            content: "∙";
            margin-right: 0.5rem;
          }
        }
      }
    }
  }

  .carswRight {
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #f3f3f3;
    width: 100%;
    margin-top: 5rem;
    padding-bottom: 6rem;

    @include tablet {
      width: 38%;
      min-height: 89rem;
      margin-top: 0rem;
      padding-bottom: 0rem;
    }

    @include desktopMin {
      width: 30%;
    }

    @include desktopMax {
      width: 40rem;
      padding-left: 5rem;
      padding-right: 5rem;
    }

    .carswRightInner {
      margin-top: 5rem;

      @include tablet {
        margin-top: 21.6rem;
      }

      h2 {
        font-size: 1.8rem;
        font-weight: 600;

        @include tablet {
          font-size: 2.4rem;
        }
      }

      .carswInfo {
        margin-top: 4rem;

        @include tablet {
          margin-top: 5rem;
        }

        dl {
          padding-bottom: 2.5rem;
          margin-bottom: 2rem;
          border-bottom: 1px solid #dedede;

          @include tablet {
            padding-bottom: 2.5rem;
            margin-bottom: 2rem;
          }

          dt {
            font-size: 1.6rem;
            color: #676767;
          }

          dd {
            font-size: 3rem;
            font-weight: 600;
            margin-top: 1rem;

            @include tablet {
              font-size: 4rem;
            }
          }

          &.carType {
            padding-bottom: 2rem;
            margin-bottom: 2rem;

            @include tablet {
              padding-bottom: 2rem;
              margin-bottom: 2rem;
            }

            dd {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              font-size: 1.6rem;
              font-weight: 400;
              color: #000000;

              strong {
                font-size: 1.6rem;
                font-weight: 600;
                color: #000000;
              }

              span {
                display: inline-block;
                width: 0.1rem;
                height: 1.4rem;
                margin: 0 0.8rem;
                background-color: #dedede;
              }
            }
          }
        }

        .amount {
          margin-bottom: 2.5rem;
          padding-bottom: 2rem;
          border-bottom: 1px dashed #dedede;

          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
              font-size: 1.6rem;
              font-weight: 400;
              color: #676767;
            }

            .value {
              font-size: 1.6rem;
              font-weight: 400;
              color: #000000;
            }

            &:last-child {
              margin-top: 2rem;
            }
          }
        }

        .kiaPayBox {
          padding: 2rem;
          margin-bottom: 2rem;
          border-radius: 0.6rem;
          background-color: #ffffff;

          .pointInfo {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 1rem;

            .title {
              font-size: 1.4rem;
              width: 50%;
              color: #676767;
            }

            .info {
              font-size: 1.4rem;
              width: 50%;
              text-align: right;
              color: #000000;
            }
          }

          .caution {
            margin-top: 2rem;
            font-size: 1.4rem;
            line-height: 2.2rem;
            color: #676767;
          }

          .cautionKiaPay {
            font-size: 1.4rem;
            line-height: 2.2rem;
            color: #676767;

            span {
              font-weight: 600;
              color: #000000;
            }
          }

          .oneButton {
            margin-top: 2rem;
          }
        }

        >a {
          display: flex;
          font-size: 1.4rem;
          color: #676767;

          span {
            border-bottom: 1px solid #676767;
          }

          &::after {
            content: "";
            display: block;
            width: 0.6rem;
            margin-left: 0.8rem;
            background-image: url(../images/common/icon-mMarrow.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center right;
          }
        }

        a+a {
          margin-top: 1.5rem;
        }

        >label {
          display: flex;
          margin-top: 2rem;
          align-items: flex-start;
          cursor: pointer;

          span {
            font-size: 1.4rem;
            margin-left: 1rem;
            line-height: 2.2rem;
          }
        }

        .oneButtonBlack {
          margin-top: 4rem;

          button {

            &::before,
            &::after {
              width: 3.2rem;
            }
          }
        }

        .safariCaution {
          display: none;
          margin-top: 2rem;
          padding: 2rem;
          border-radius: 0.6rem;
          background-color: #ffffff;
          font-size: 1.4rem;
          font-weight: 400;
        }
      }
    }
  }

  .carsFull {
    margin-top: 6rem;
    width: 100%;
    padding-bottom: 9rem;

    @include tablet {
      margin-top: 10rem;
      padding-bottom: 15rem;
    }

    @include maxtablet {
      flex-wrap: wrap;
    }

    @include desktopMin {
      margin-top: 10rem;
    }

    .pageSubTitle {
      margin-top: 4rem;

      @include tablet {
        margin-top: 7rem;
      }

      h2 {
        font-size: 1.8rem;

        @include tablet {
          font-size: 3rem;
        }
      }

      p {
        @include tablet {
          font-size: 1.8rem;
        }
      }
    }

    .privacyStatement {
      margin-top: 3rem;

      @include tablet {
        margin-top: 4rem;
      }

      .contentsBox {
        padding: 2rem;
        border: 0.1rem solid #dedede;
        border-radius: 0.6rem;

        @include tablet {
          padding: 4rem;
        }

        .title {
          font-size: 1.6rem;
          font-weight: 600;
          color: #000000;
          line-height: 2.2rem;

          @include tablet {
            font-size: 2rem;
            line-height: 2.8rem;
          }
        }

        .contents {
          margin-top: 1rem;
          font-size: 1.4rem;
          font-weight: 400;
          color: #676767;
          line-height: 2.2rem;

          @include tablet {
            margin-top: 2rem;
            font-size: 1.6rem;
            line-height: 2.4rem;
          }
        }
      }

      label {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 1.5rem;

        @include tablet {
          margin-top: 2rem;
        }

        span {
          margin-left: 1rem;
          font-size: 1.4rem;
          color: #000000;
        }
      }
    }

    .installGuide {
      margin-top: 4rem;
      padding: 2rem;
      border: 1px solid #dedede;
      border-radius: 0.6rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;

      @include tablet {
        flex-wrap: nowrap;
        padding: 4rem;
      }

      @include desktopMin {
        margin-top: 7rem;
      }

      div {
        p {
          strong {
            font-size: 1.8rem;
            font-weight: 600;
            line-height: 2.4rem;

            @include tablet {
              font-size: 2.4rem;
              line-height: 3.2rem;
            }
          }

          span {
            font-size: 1.4rem;
            line-height: 2.4rem;

            @include tablet {
              font-size: 1.6rem;
            }
          }
        }

        p+p {
          margin-top: 2rem;
        }

        &:last-child {
          width: 100%;
          margin-top: 3rem;

          @include tablet {
            margin-top: 0;
            width: 16rem;
          }

          div {
            a {

              &::before,
              &::after {
                width: 3.2rem;

                @include tablet {
                  width: 3.2rem;
                }
              }
            }
          }
        }

        &:first-child {
          width: initial;
          margin-top: initial;

          @include tablet {
            margin-top: initial;
            width: initial;
          }
        }
      }
    }

    .completeForm {
      margin-top: 4rem;

      >div {
        border-top: 1px solid #999999;

        @include tablet {
          border-top: 1px solid #dedede;
        }

        >dl {
          border-bottom: 1px solid #dedede;
          display: flex;
          flex-wrap: wrap;
          align-items: center;

          @include tablet {
            flex-wrap: nowrap;
          }

          &:last-child {
            border-bottom: 1px solid #999;

            @include tablet {
              border-bottom: 1px solid #dedede;
            }
          }

          >dt {
            padding-top: 1rem;

            @include tablet {
              padding-top: 2.2rem;
              padding-bottom: 2.2rem;
            }
          }

          >dd {
            padding-top: 1rem;
            padding-bottom: 1rem;
            font-weight: 600;

            @include tablet {
              padding-top: 2.2rem;
              padding-bottom: 2.2rem;
              font-weight: 400;
            }
          }

          >dt {
            width: 100%;
            font-size: 1.4rem;
            padding-left: 0rem;
            text-align: left;
            padding-bottom: 0;
            color: #676767;
            font-weight: 700;

            @include tablet {
              position: relative;
              font-size: 1.6rem;
              padding-bottom: 2.2rem;
              min-width: 15.7rem;
              width: auto;

              &::after {
                content: "";
                position: absolute;
                top: 2.2rem;
                right: 0;
                width: 0.1rem;
                height: 1.6rem;
                background-color: #dedede;
              }
            }
          }

          >dd {
            padding-left: 0;
            width: 100%;
            font-size: 1.4rem;
            color: #000;

            @include tablet {
              padding-left: 2rem;
              font-size: 1.6rem;
            }
          }

          .completeItemList {
            padding-left: 0;
            padding-top: 0;
            padding-bottom: 0;

            ul {
              li {
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;

                @include tablet {
                  padding: 3rem;
                  flex-wrap: nowrap;
                }

                .imgItem {
                  display: flex;
                  align-items: center;
                  margin-top: 1.5rem;
                  width: 100%;

                  @include tablet {
                    width: inherit;
                    margin-top: 0;
                  }

                  >div {
                    position: relative;
                    border-radius: 0.6rem;
                    overflow: hidden;
                    min-width: 7.5rem;
                    height: 7.5rem;

                    img {
                      width: 7.5rem;
                      height: 7.5rem;
                    }
                  }

                  dl {
                    margin-left: 2rem;

                    dt {
                      width: 100%;
                      position: relative;
                      font-size: 1.6rem;
                      font-weight: 600;
                      line-height: 1.2;
                      height: 4rem;
                      /* 말줄임 */
                      display: -webkit-box;
                      white-space: normal;
                      text-overflow: ellipsis;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                      -webkit-line-clamp: 2;

                      @include tablet {
                        font-size: 1.8rem;
                        padding-right: 5rem;
                      }
                    }

                    dd {
                      margin-top: 0.8rem;
                      font-size: 1.4rem;
                      color: #676767;

                      span {
                        display: block;
                        font-size: 1.4rem;
                        color: #05141f;
                        margin-bottom: 1rem;
                        font-weight: 700;
                      }
                    }
                  }
                }

                .cachItem {
                  display: flex;
                  align-items: center;
                  margin-top: 2.1rem;
                  flex-wrap: wrap;
                  width: 100%;

                  @include tablet {
                    margin-top: 0;
                    flex-wrap: nowrap;
                    width: inherit;
                  }

                  dl {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    min-width: fit-content;

                    @include tablet {
                      display: block;
                      width: inherit;
                    }

                    dt {
                      color: #676767;
                      font-size: 1.4rem;
                      text-align: right;

                      @include tablet {
                        font-size: 1.6rem;
                      }
                    }

                    dd {
                      margin-top: 0rem;
                      font-size: 1.4rem;
                      font-weight: 600;

                      @include tablet {
                        font-size: 1.6rem;
                        margin-top: 1rem;
                      }
                    }
                  }

                  dl+dl {
                    margin-top: 1rem;

                    @include tablet {
                      margin-left: 2rem;
                      margin-top: 0;
                    }
                  }

                  >div {
                    margin-left: 0rem;
                    width: 100%;
                    margin-top: 3rem;

                    @include tablet {
                      margin-left: 4rem;
                      width: 16rem;
                      margin-top: 0;
                    }

                    a {

                      &::before,
                      &::after {
                        width: 3.2rem;

                        @include tablet {
                          width: 3.2rem;
                        }
                      }
                    }
                  }
                }
              }

              li+li {
                border-top: 0;
                margin-top: 1.5rem;

                @include tablet {
                  margin-top: 0;
                  padding-bottom: 2rem;
                  border-top: 1px solid #dedede;
                }
              }
            }
          }
        }

        dl.innerList {
          padding-bottom: 2rem;

          @include tablet {
            padding-bottom: 0;
          }
        }
      }
    }

    .carswBtn {
      width: 100%;
      margin: 0 auto;
      margin-top: 4rem;

      @include tablet {
        width: 37rem;
        margin-top: 5rem;
        padding-left: 2rem;
        padding-right: 2rem;
      }

      .towButton {
        display: flex;
        flex-wrap: wrap;

        @include tablet {
          flex-wrap: nowrap;
        }

        button+button {
          margin-top: 1rem;

          @include tablet {
            margin-left: 0.5rem;
            margin-top: 0;
          }
        }
      }
    }
  }
}

.refund-table-area {
  .pageSubTitle {
    h2 {
      margin-bottom: 2rem;
    }
  }

  .table-area {
    margin-bottom: 12rem;

    @include maxtablet {
      margin-bottom: 5rem;
    }

    .index {
      padding: 1.6rem 0 1rem;
      font-size: 1.4rem;
      color: #676767;
      text-align: right;
    }

    table {
      width: 100%;
      border-top: 1px solid #999;

      th {
        height: 7.6rem;
        padding: 0 1rem;
        font-size: 1.6rem;
        font-weight: 600;
        vertical-align: middle;
        text-align: center;
      }

      tbody {
        border-top: 1px solid #dedede;
        border-bottom: 1px solid #dedede;

        td {
          padding: 1rem;
          font-size: 1.4rem;
          font-weight: 400;
          text-align: center;
        }
      }
    }
  }
}

.agree-label {
  display: flex;
  flex-direction: column;

  +.agree-label {
    margin-top: 2.5rem;
  }

  label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;

    span {
      font-size: 1.4rem;
      margin-left: 1rem;
      line-height: 2.2rem;
    }
  }

  a {
    align-self: end;
    font-size: 1.4rem;
    color: #676767;
  }
}