@charset "UTF-8";
@import "utils.scss";
/*변수파일 import*/

.contentWarp {
  //결재페이지
  .productView {
    display: block;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;

    @include tablet {
      display: flex;
      justify-content: space-between;
    }
    @include desktopMin {
      width: 100%;
    }
    @include desktopMax {
      width: 120rem;
      display: flex;
      justify-content: space-between;
      padding-left: 0rem;
      padding-right: 0rem;
    }
    .productLeft {
      width: 100%;

      @include tablet {
        width: 50%;
        margin-right: 2rem;
      }
      @include desktopMax {
        width: 60rem;
      }
      .productImg {
        border-radius: 0.6rem;
        overflow: hidden;
        position: sticky;
        top: 7.5rem;
        .productSwiper {
          width: 100%;
          height: auto;

          @include desktopMax {
            width: 100%;
          }
          .swiper-slide {
            position: relative;
            background-color: #666;
            height: auto;
            line-height: 0;
            img {
              width: 100%;
              height: 100%;
            }
            .productSmallVideo {
              width: 100%;
              height: 100%;
              overflow: hidden;
              position: relative;

              img {
                position: absolute;
                top: 0;
                left: 0;
              }
              video {
                position: absolute;
                width: 100%;
                aspect-ratio: 1 / 1;
                height: 100%;
                object-fit: cover;
                position: relative;
                left: 0;
                top: 0;
                opacity: 1;
              }
            }
            .movie_info {
              position: absolute;
              top: 1rem;
              right: 1rem;
              font-size: 1.4rem;
              color: #ffffff;
              text-shadow: 1px 1px 1px #333;
              z-index: 1;
              line-height: 1;
            }
          }
          .swiper-pagination {
            bottom: 2rem;
            @include desktopMax {
              bottom: 2.5rem;
            }
            span {
              width: 5.6rem;
              height: 0.4rem;
              border-radius: 0;
              background-color: #fff;
            }
          }
        }
        @include desktopMax {
          width: 60rem;
          height: 60rem;
        }
      }
    }

    .productRight {
      width: 100%;
      margin-top: 3rem;
      @include tablet {
        width: 50%;
        margin-left: 2rem;
        margin-top: 0;
      }
      @include desktopMax {
        width: 50rem;
        margin-top: 0;
      }
      .musicBtn {
        margin-top: 4rem;
      }
      .optionWarp {
        .producTitle {
          h1 {
            position: relative;
            padding-right: 4rem;
            @include tablet {
              font-size: 4.5rem;
            }
            .btn-wish {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
              width: 3rem;
              height: 3rem;
              background: url(../images/kia/pdp/display_theme_disney/Icon_heart.png) no-repeat center / 100% auto;
            }
          }
          span {
            color: #676767;
            font-size: 1.5rem;
            font-weight: 400;
            @include desktopMax {
              font-size: 1.4rem;
              line-height: initial;
            }
          }
          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            h1 {
              width: calc(100% - 3rem);
              padding-right: 2rem;
              color: #000;
              font-size: 3rem;
              font-weight: 600;

              @include desktopMax {
                font-size: 4.5rem;
              }
            }
            a {
              display: block;
              width: 3rem;
              height: 3rem;
              background-image: url("/kr/assets/images/common/icon-wishlist-d.svg");
              background-repeat: no-repeat;
              background-size: contain;
              &.active {
                background-image: url("/kr/assets/images/common/icon-wishlist-s.svg");
              }
            }
          }

          > p {
            color: #000;
            font-size: 1.6rem;
            font-weight: 400;
            margin-top: 2.3rem;
            line-height: 2.4rem;
          }
        }
        .producInfoWarp {
          margin-top: 5rem;
          h2 {
            color: #000;
            font-size: 1.6rem;
            font-weight: 600;
            @include desktopMin {
              font-size: 1.8rem;
            }
          }
          .producInfoLogOut {
            margin-top: 2rem;
            > p {
              color: #000;
              font-size: 1.4rem;
              line-height: 2.2rem;
              @include desktopMin {
                font-size: 1.6rem;
                line-height: 2.4rem;
              }
            }
            > span {
              display: block;
              color: #676767;
              font-size: 1.4rem;
              margin-top: 1.5rem;
              line-height: 2.2rem;
              @include desktopMin {
                font-size: 1.6rem;
                line-height: 2.4rem;
              }
            }
          }
          .producInfoLogIn {
            margin-top: 2rem;
            > p {
              color: #000;
              font-size: 1.4rem;
              margin-top: 1rem;
              line-height: 2.2rem;
              @include desktopMin {
                font-size: 1.6rem;
                line-height: 2.4rem;
              }
            }
            > span {
              display: block;
              color: #676767;
              font-size: 1.4em;
              margin-top: 1.5rem;
              line-height: 2.2rem;
              @include desktopMin {
                font-size: 1.6rem;
                line-height: 2.4rem;
              }
            }
            ul {
              li {
                input[type="radio"] {
                  visibility: hidden;
                  position: absolute;
                  &:checked + label {
                    background-color: #05141f;
                    dt,
                    dd {
                      color: #fff;
                      p,
                      strong {
                        color: #fff;
                      }
                    }
                  }
                }
                label {
                  display: block;
                  padding: 2.5rem;
                  border: 1px solid #dedede;
                  border-radius: 0.6rem;
                  cursor: pointer;
                  dl {
                    dt {
                      font-size: 1.8rem;
                      font-weight: bold;
                    }
                    dd {
                      margin-top: 1rem;
                      p {
                        color: #676767;
                        font-size: 1.6rem;
                        line-height: 2.4rem;
                      }
                      strong {
                        display: block;
                        color: #676767;
                        font-size: 1.6rem;
                        line-height: 2.4rem;
                        font-weight: bold;
                        margin-top: 2rem;
                      }
                    }
                    dd:last-child {
                      display: flex;
                      justify-content: flex-end;
                      margin-top: 3rem;
                      font-weight: bold;
                      font-size: 2rem;
                    }
                  }
                  &:hover {
                    border: 1px solid #000;
                  }
                }
              }
              li + li {
                margin-top: 1rem;
              }
            }
            .disabledBtn {
              label {
                border: 1px solid #dedede;
                dt {
                  color: #9ea1a2 !important;
                }
                dd {
                  color: #9ea1a2 !important;
                }
              }

              &:hover {
                label {
                  border: 1px solid #dedede;
                }
              }
            }
          }
          .termsOK {
            margin-top: 3rem;
            > 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("/kr/assets/images/common/icon-mMarrow.svg");
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center right;
              }
            }
            > label {
              display: flex;
              margin-top: 2rem;
              align-items: flex-start;
              cursor: pointer;
              span {
                font-size: 1.4rem;
                margin-left: 1rem;
                line-height: 2.2rem;
                display: block;
              }
            }
          }
          .noStreaming {
            margin-top: 2rem;
            padding: 3rem 2rem;
            background-color: #f3f3f3;
            border-radius: 0.6rem;
            P {
              font-size: 1.6rem;
              line-height: 2.4rem;
              font-weight: 600;
              color: #000000;
            }
            span {
              margin-top: 1rem;
              font-size: 1.6rem;
              font-weight: 400;
              line-height: 2.4rem;
              color: #676767;
            }
          }
        }
        .packageOption {
          margin-top: 5rem;
          h2 {
            color: #000;
            font-size: 1.6rem;
            font-weight: 600;
            @include desktopMin {
              font-size: 1.8rem;
            }
          }
          .optionList {
            margin-top: 2rem;
            padding: 2.5rem;
            border: 1px solid #dedede;
            border-radius: 0.6rem;

            @include maxtablet {
              padding: 2rem;
            }
            .productSmallVideo {
              min-width: 9rem;
              height: 9rem;
              overflow: hidden;
              position: relative;
              @include desktopMin {
                max-width: 100%;
              }
              @include desktopMax {
                min-width: 9rem;
                max-width: 9rem;
              }
              img {
                position: absolute;
                top: 0;
                left: 0;
                width: 9rem;
                height: 9rem;
                border-radius: 0.6rem;
              }
              video {
                position: absolute;
                height: 9rem;
                position: relative;
                left: 0;
                top: 0;
                opacity: 1;
                border-radius: 0.6rem;
              }
            }
            .optionItem {
              display: flex;
              width: 100%;
              height: 9rem;
              overflow: hidden;
              position: relative;
              margin-top: 2.5rem;
              .optionText {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                padding-left: 2.5rem;
                @include maxtablet {
                  padding-left: 2rem;
                }
                p {
                  width: 100%;
                  span,
                  strong {
                    display: block;
                    width: 100%;
                    font-size: 1.4rem;

                    line-height: 1.4;
                    white-space: normal;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    @include desktopMax {
                      font-size: 1.6rem;
                      line-height: 2rem;
                    }
                  }
                  strong {
                    font-weight: 600;
                  }
                  span {
                    font-weight: 400;
                  }
                  strong + span {
                    margin-top: 1rem;
                  }
                }
              }
              &:first-child {
                margin-top: 0;
              }
              @include maxtablet {
                margin-top: 2rem;
                &:first-child {
                  margin-top: 0;
                }
              }
              img {
                width: 9rem;
                height: 9rem;
                border-radius: 0.6rem;
              }
            }
          }
        }
        .producOption {
          margin-top: 5rem;
          h2 {
            color: #000;
            font-size: 1.6rem;
            font-weight: 600;
            @include desktopMin {
              font-size: 1.8rem;
            }
          }
          .optionList {
            overflow: auto;
            max-height: 642px;
            margin-top: 2rem;
            @include maxtablet {
              max-height: 44.5rem;
            }
            .checkBtn {
              label {
                display: flex;
                width: 100%;
                height: 12rem;
                overflow: hidden;
                cursor: pointer;
                position: relative;
                @include maxtablet {
                  height: 8rem;
                }
                p {
                  img {
                    width: 12rem;
                    height: 12rem;
                    @include maxtablet {
                      width: 8rem;
                      height: 8rem;
                    }
                  }
                }
              }
              .productSmallVideo {
                min-width: 12rem;
                height: 12rem;
                overflow: hidden;
                position: relative;
                @include desktopMin {
                  max-width: 100%;
                }
                @include desktopMax {
                  min-width: 12rem;
                  max-width: 12rem;
                }
                img {
                  position: absolute;
                  top: 0;
                  left: 0;
                }
                video {
                  position: absolute;
                  height: 12rem;
                  position: relative;
                  left: 0;
                  top: 0;
                  opacity: 1;
                }
              }

              input[type="checkbox"] {
                visibility: hidden;
                position: absolute;
                &:checked + label {
                  background-color: #05141f;
                  border: 1px solid #05141f;
                  &::before {
                    content: "";
                    position: absolute;
                    right: 1.5rem;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    display: block;
                    width: 1.5rem;
                    height: 1.5rem;
                    background-image: url("/kr/assets/images/common/icon_select.svg");
                    background-size: contain;
                    background-repeat: no-repeat;
                    @include desktopMax {
                      width: 2rem;
                      height: 2rem;
                      right: 2rem;
                    }
                  }
                  div {
                    p {
                      span,
                      strong {
                        color: #fff;
                      }
                    }
                  }
                }
              }
              &:hover {
                label {
                  border: 1px solid #000;
                }
              }

              .optionText {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                padding-left: 2rem;
                width: 100%;
                @include desktopMax {
                  padding-left: 3rem;
                }

                p {
                  position: relative;
                  width: 100%;
                  span,
                  strong {
                    display: block;
                    width: 100%;
                    font-size: 1.4rem;
                    width: 75%;
                    line-height: 1.2;
                    white-space: normal;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    @include desktopMax {
                      font-size: 1.4rem;
                    }
                  }
                  strong {
                    font-size: 1.6rem;
                    font-weight: 600;
                    em {
                      display: block;
                      font-size: 1.2rem;
                    }
                  }
                  span {
                    font-size: 1.2rem;
                    font-weight: 400;
                  }
                  strong + span {
                    margin-top: 1rem;
                    @include maxtablet {
                      margin-top: 0.5rem;
                    }
                  }
                  .badge {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 0;
                    right: 2.4rem;
                    width: 6rem;
                    height: 2.4rem;
                    padding-top: 0.25rem;
                    color: #fff;
                    font-weight: 600;
                    font-size: 1.2rem;
                    background-color: rgba(5, 20, 31, 0.6);
                    border-radius: 1.2rem;
                    line-height: 0;
                  }

                  @include maxtablet {
                    strong {
                      font-size: 1.4rem;
                      em {
                        font-size: 1rem;
                      }
                    }
                    span {
                      font-size: 1rem;
                    }
                    .badge {
                      right: 1.2rem;
                      width: 5rem;
                      height: 2rem;
                      padding-top: 0.15rem;
                      font-size: 1rem;
                      border-radius: 1rem;
                    }
                  }
                }
              }
            }
            .disabledBtn {
              label {
                border: 1px solid #dedede;
                span,
                strong {
                  color: #9ea1a2;
                }
                p {
                  opacity: 0.5;
                }
              }
              &:hover {
                label {
                  border: 1px solid #dedede;
                }
              }
            }
            .checkBtn + .checkBtn {
              margin-top: 1rem;
            }
          }
        }
        .priceOption {
          margin-top: 5rem;
          h2 {
            color: #000;
            font-size: 1.6rem;
            font-weight: 600;
            @include desktopMax {
              font-size: 1.8rem;
            }
          }
          .priceList {
            margin-top: 2rem;
            .radioBtn {
              label {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 2.5rem;
                height: 9rem;
                overflow: hidden;
                cursor: pointer;
                position: relative;
                border-radius: 0.6rem;
                border: 1px solid #dedede;
                @media (max-width: 1024px) {
                  height: 8rem;
                  padding: 2rem;
                }
                span {
                  font-size: 1.4rem;
                  font-weight: 400;
                  color: #000;
                  @include desktopMax {
                    font-size: 1.6rem;
                  }
                }
                strong {
                  font-size: 1.7rem;
                  font-weight: 600;
                  text-align: right;
                  color: #000;
                  @include desktopMax {
                    font-size: 2rem;
                  }
                  span {
                    display: block;
                    margin-top: 0.5rem;
                    font-size: 1.4rem;
                    text-align: right;
                  }
                }
                .discount {
                  display: block;
                  font-size: 1.4rem;
                  color: #9ea1a2;
                  text-align: right;
                  @media (max-width: 1024px) {
                    width: 100%;
                    margin: 0.2rem 0 0;
                  }
                  b {
                    font-weight: 600;
                  }
                  i {
                    font-weight: 400;
                    text-decoration: line-through;
                  }
                }
                .dc {
                  margin-right: 0.8rem;
                  color: #ea0029;
                }
              }
              input[type="radio"] {
                visibility: hidden;
                position: absolute;
                &:checked + label {
                  background-color: #05141f;
                  border: 1px solid #05141f;
                  span,
                  strong {
                    color: #fff;
                  }
                  span {
                    .title {
                      color: #fff;
                    }
                    .info {
                      color: #fff;
                    }
                  }
                  .discount {
                    color: #9ea1a2;
                  }
                  .dc {
                    color: #f3c300;
                  }
                }
              }
              &:hover {
                label {
                  border: 1px solid #000;
                }
              }
              &.coupon {
                background-color: #f3f3f3;
                border-radius: 0.6rem;
                label {
                  .title {
                    font-size: 1.6rem;
                    font-weight: 600;
                    color: #000000;
                    &::after {
                      content: "";
                      display: inline-block;
                      width: 1.4rem;
                      height: 1.3rem;
                      background-image: url(/kr/assets/images/common/coupon_star.svg);
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center right;
                    }
                  }
                  .info {
                    margin-top: 0.5rem;
                    font-size: 1.6rem;
                    font-weight: 400;
                    color: #676767;
                  }
                }
              }
            }
            .disabledBtn {
              label {
                border: 1px solid #dedede;
                span,
                strong {
                  color: #9ea1a2;
                }
                span {
                  .title {
                    color: #9ea1a2 !important;
                  }
                  .info {
                    color: #9ea1a2 !important;
                  }
                }
              }
              &:hover {
                label {
                  border: 1px solid #dedede;
                }
              }
            }
            .radioBtn + .radioBtn {
              margin-top: 1rem;
            }
          }
        }

        .priceTotal {
          margin-top: 4rem;
          .total {
            display: block;
            @include desktopMax {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            dt {
              font-size: 1.4rem;
              font-weight: 600;
              color: #666;
              @include desktopMax {
                font-size: 1.6rem;
              }
            }
            dd {
              font-size: 3rem;
              font-weight: 600;
              color: #000;
              margin-top: 1.5rem;
              @include desktopMax {
                margin-top: 0;
              }
            }
          }
          .paymentButton {
            display: block;
            margin-top: 3rem;
            width: 100%;
            max-width: initial;
            @include tablet {
              display: flex;
            }
            @include desktopMax {
              display: flex;
              justify-content: space-between;
              margin-top: 3.2rem;
            }
            .cartBtn,
            .PurchaseBtn {
              width: 100%;
            }
            .cartBtn {
              margin-right: 0rem;
              @include tablet {
                margin-right: 0.5rem;
              }
              @include desktopMax {
                margin-right: 0.5rem;
              }
            }
            .PurchaseBtn {
              margin-left: 0;
              @include tablet {
                margin-left: 0.5rem;
              }
              @include desktopMax {
                margin-left: 0.5rem;
              }
            }
            button + button {
              margin-top: 0.8rem;
              @include tablet {
                margin-top: 0rem;
              }
              @include desktopMax {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
  }
}

.pdpListBtn {
  width: 100%;
  height: 7.4rem;
  background-color: #f3f3f3;
  padding: 0 2rem;
  @include tablet {
    height: 10rem;
    padding: 0;
  }
  .inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 7.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #000000;
    @include tablet {
      max-width: 120rem;
      margin: 0 auto;
      height: 10rem;
      font-size: 1.6rem;
      color: #000000;
    }
    @media (max-width: 1240px) {
      padding: 0 2rem;
    }
    a {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        margin-left: 1rem;
        color: #000000;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }
}