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

html {
  body {
    font-family: "KiaSignature";
    font-weight: 400;
    overflow-x: hidden;
  }

  input[type="checkbox"] {
    accent-color: #000;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    border-color: #dedede;
  }

  button {
    font-family: "KiaSignature";
  }

  // 아이콘
  .icon-cs {
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../../images/common/icon-wcs.svg);
  }

  .icon-user {
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../../images/common/icon-wuser.svg);
  }

  .icon-cart {
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../../images/common/icon-wcart.svg);
  }

  .hederWarp.noBoder,
  .hederWarp.hBoder {
    .icon-cs {
      width: 2.4rem;
      height: 2.4rem;
      background-image: url(../../images/common/icon-tbcs.svg);
    }

    .icon-user {
      width: 2.4rem;
      height: 2.4rem;
      background-image: url(../../images/common/icon-user.svg);
    }

    .icon-cart {
      width: 2.4rem;
      height: 2.4rem;
      background-image: url(../../images/common/icon-cart.svg);
    }
  }

  .hederWarp_n.noBoder,
  .hederWarp_n.hBoder {
    .icon-cs {
      width: 2.4rem;
      height: 2.4rem;
      background-image: url(../../images/common/icon-tbcs.svg);
    }

    .icon-user {
      width: 2.4rem;
      height: 2.4rem;
      background-image: url(../../images/common/icon-user.svg);
    }

    .icon-cart {
      width: 2.4rem;
      height: 2.4rem;
      background-image: url(../../images/common/icon-cart.svg);
    }
  }

  textarea {
    width: 100%;
    border: 1px solid #dedede;
    outline: 0 none;
    border-radius: 0;
    padding: 1.5rem 1.7rem;
    font-size: 1.6rem;
    font-family: "KiaSignature";
  }

  .icon-tbarrow {
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../../images/common/icon-tbarrow.svg);
  }

  .icon-wtbarrow {
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../../images/common/icon-wtbarrow.svg);
  }

  .scrollDisable {
    .hederWarp {
      .headerInner {
      }
    }

    .logoImg {
      background-image: url(../../images/kia/kia-blogo-n.svg);
    }
  }

  //메인
  .mainNotice {
    background-color: #f3f3f3;
    height: 11.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;

    @include tablet {
      height: 10rem;
    }

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

    .noticInnerWarp {
      width: 100%;

      @include desktopMax {
        width: 120rem;
      }

      .noticeInner {
        display: flex;
        height: 11.5rem;
        position: relative;

        @include tablet {
          height: 10rem;
        }

        h2 {
          display: none;

          @include tablet {
            font-size: 2.2rem;
            font-weight: 600;
            color: #000;
            display: flex;
            align-items: center;
          }
        }

        .mainNiticeList {
          margin-left: 0rem;
          display: flex;
          align-items: center;
          height: 11.5rem;
          width: 100%;
          overflow: hidden;
          justify-content: space-between;

          @include tablet {
            margin-left: 7.5rem;
            width: calc(100% - 25rem);
            height: 10rem;
          }

          @include desktopMin {
            width: calc(100% - 40rem);
          }

          @include desktopMin {
            width: calc(100% - 35rem);
          }

          ul {
            li {
              display: flex;
              align-items: flex-start;
              padding-top: 2.3rem;

              @include tablet {
                align-items: center;
                padding-top: 0;
              }

              dl {
                display: flex;
                flex-wrap: wrap;
                align-items: center;

                @include tablet {
                  flex-wrap: nowrap;
                }

                dt,
                dd {
                  font-size: 1.4rem;
                  width: 100%;

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

                dt {
                  color: #9ea1a2;
                }

                dd {
                  color: #000;
                  margin-top: 0.8rem;

                  @include tablet {
                    margin-top: 0;
                    border-left: 1px solid rgba(0, 0, 0, 0.3);
                    padding-left: 1rem;
                    margin-left: 1rem;
                  }
                }
              }
            }
          }

          .swiperButtonWarp {
            right: 0;
            margin-top: 0rem;

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

            .swiper-button-next,
            .swiper-button-prev {
              position: relative;
              justify-content: flex-end;
              top: 55%;
              margin-top: 0;
              height: auto;
              width: auto;
              right: inherit;

              &::after {
                content: "";
                display: block;
                width: 1.4rem;
                height: 0.8rem;
                background-image: url(../../images/common/icon-notice.svg);
                background-repeat: no-repeat;
                background-position: center;
              }
            }

            .swiper-button-next {
              transform: rotate(0deg);
              margin-top: -2rem;
              right: 0;
            }

            .swiper-button-prev {
              transform: rotate(-180deg);
              margin-bottom: 0;
              left: 0;
              margin-top: 2rem;
            }
          }
        }
      }
    }
  }

  .mainBanner {
    background-image: url(../../images/kia/product-img/producy-mtemp8.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 36rem;
    margin-top: 6rem;
    display: flex;
    align-items: center;

    @include tablet {
      height: 34rem;
      background-image: url(../../images/kia/product-img/producy-temp8.png);
    }

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

    .mabannerInner {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      max-width: 120rem;
      width: 100%;
      margin: 0 auto;
      padding-left: 2rem;
      padding-right: 2rem;

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

      dl {
        width: 100%;

        dt,
        dd {
          width: 100%;
          color: #fff;
        }

        dt {
          font-size: 2.5rem;
          font-weight: 600;

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

        dd {
          margin-top: 1.5rem;
          line-height: 2.2rem;

          br {
            display: none;

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

      .listImgBtn {
        width: 100%;
        margin-top: 3rem;

        @include tablet {
          width: 17.6rem;
        }

        .oneButton {
          div {
            &::after,
            &::before {
              width: 3.2rem;

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

  //헤더
  .hederWarp {
    .headerInner {
      .headerTop {
        .headerGnb {
          .logo {
            a {
              font-family: "KiaSignature";

              .logoImg {
                display: block;
                width: 16.7rem;
                height: 1.5rem;
                background-image: url(../../images/kia/kia-logo-n.svg);

                @include desktopMin {
                  height: 2rem;
                  width: 22.8rem;
                }
              }
            }
          }

          .logo.on {
            a {
              .logoImg {
                background-image: url(../../images/kia/kia-blogo-n.svg);
              }
            }

            p {
              color: #000;
            }
          }

          .topUtil {
            .gnbIcon {
              .mMenuWarp {
                .mobileMember {
                  button {
                    font-weight: 700;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .hederWarp.hBoder,
  .hederWarp.noBoder {
    .headerInner {
      .headerGnb {
        .logo {
          a {
            .logoImg {
              background-image: url(../../images/kia/kia-blogo-n.svg);
            }
          }
        }
      }
    }
  }

  .hederWarp_n.hBoder,
  .hederWarp_n.noBoder {
    .headerInner {
      .gnb {
        .logoWrap {
          a {
            .logoImg {
              background-image: url(../../images/kia/kia-blogo-n.svg);
            }
          }
        }
      }
    }
  }

  .hederWarp_n {
    .headerInner {
      .gnb {
        .logoWrap {
          a {
            font-family: "KiaSignature";

            .logoImg {
              display: block;
              width: 16.7rem;
              height: 1.5rem;
              background-image: url(../../images/kia/kia-logo-n.svg);
              background-repeat: no-repeat;
              transition: width 0.3s ease-in-out, height 0.3s ease-in-out;

              @include desktopMin {
                height: 2rem;
                width: 22.8rem;
                transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
              }
            }
          }
        }
      }
    }

    &.menu-open {
      .headerInner {
        .gnb {
          .logoWrap {
            a {
              .logoImg {
                background-image: url(../../images/kia/kia-blogo-n.svg);
              }
            }
          }
        }
      }
    }
  }

  .mainSwiper {
    ul {
      li {
        .mainText {
          p {
            strong + span {
              margin-top: 2.5rem;
            }

            span {
              line-height: 2.6rem;
            }
          }

          .oneButton {
            margin-top: 5rem;

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

  .mainCarNum {
    .oneButton {
      a {
        position: relative;

        &::before,
        &::after {
          background-image: initial;
          width: 0;
          height: 0;
        }

        &::after {
          content: "";
          position: absolute;
          right: 2rem;
          top: 2.5rem;
          width: 1.2rem;
          height: 0.6rem;
          background: url("/kr/assets/images/common/icon-wtbarrow.svg") center center no-repeat;
          -webkit-transform: rotate(-90deg);
        }

        &:hover {
          p {
            color: #ffffff;
            background-color: initial;
          }

          &::after {
            background-image: url("/kr/assets/images/common/icon-wtbarrow.svg");
          }
        }

        p {
          justify-content: flex-start;
          margin-left: 2rem;
          background-color: initial;
          color: #ffffff;
          border-width: initial;
          border-style: initial;
          border-color: initial;

          &:hover {
            color: #ffffff;
            border-color: initial;
            background-color: initial;
          }
        }
      }

      @include desktopMin {
        width: 16rem;

        a {
          &::before,
          &::after {
            background-image: initial;
            width: 5rem;
            margin-left: -0.1rem;
          }

          &::before {
            content: "";
            background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
            height: 5.6rem;
          }

          &::after {
            content: "";
            position: initial;
            background-image: url(../../images/kia/svg/kia-btn-wright.svg);
            height: 5.6rem;
            -webkit-transform: initial;
          }

          p {
            justify-content: center;
            margin-left: initial;
            background-color: #fff;
            color: #05141f;
            border-width: 1px 0 1px 0;
            border-style: solid;
            border-color: #9ba1a5;

            &:hover {
              color: #05141f;
              border-color: #f3c300;
              background-color: #f3c300;
            }
          }

          &:hover {
            p {
              color: #05141f;
              background-color: #f3c300;
            }

            &::before {
              content: "";
              background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
              height: 5.6rem;
            }

            &::after {
              content: "";
              background-image: url(../../images/kia/svg/kia-btn-yright.svg);
              height: 5.6rem;
            }
          }
        }
      }
    }
  }

  //기아푸터
  .footer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #05141f;
    color: #fff;
    font-family: "KiaSignature";
    padding-top: 9rem;

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

    @include desktopMax {
      padding-top: 15rem;
      height: 39rem;
      padding-bottom: 0rem;
    }

    &::before {
      content: "";
      position: absolute;
      top: -4rem;
      right: 0;
      width: 100%;
      height: 4rem;
      display: block;
      background-image: url(../../images/kia/svg/footer-bg.svg);
      background-position: top right -35rem;
      background-repeat: no-repeat;

      @include desktopMin {
        background-position: top right -22rem;
      }

      @include desktopMax {
        background-position: top right;
      }
    }

    .kiaInner {
      position: relative;
      width: 100%;
      padding-left: 2rem;
      padding-right: 2rem;
      margin: 0 auto;
      background-color: #05141f;
      display: block;
      padding-bottom: 10.3rem;

      @include tablet {
        display: flex;
        padding-bottom: 0rem;
      }

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

      .tLeft {
        display: block;

        @include desktopMax {
          display: flex;
        }

        .logoSEction {
          width: 15rem;

          img {
            width: 9rem;
            height: 2.2rem;
          }
        }

        .companyInfo {
          margin-left: 0rem;
          margin-top: 2rem;

          @include desktopMax {
            margin-left: 5.5rem;
            margin-top: 0;
            padding-right: 18rem;
          }

          ul {
            display: flex;

            li {
              display: flex;
              align-items: center;
              color: #aaa;
              font-size: 1.2rem;
              font-weight: 400;

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

              a {
                color: #aaa;
                font-size: 1.4rem;
                font-weight: 400;
              }

              &:first-child {
                a {
                  color: #fff;
                  font-weight: 600;
                }
              }

              &::after {
                content: "";
                display: block;
                margin-left: 1rem;
                margin-right: 1rem;
                width: 1px;
                height: 1.5rem;
                background-color: rgba(68, 68, 68, 1);
              }

              &:last-child {
                &::after {
                  display: none;
                }
              }
            }
          }

          ul + ul {
            margin-top: 1.3rem;
            flex-wrap: wrap;

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

            li {
              margin-bottom: 1rem;

              &:nth-child(3) {
                &::after {
                  display: none;
                }
              }

              &:nth-child(1),
              &:nth-child(2),
              &:nth-child(3),
              &:nth-child(4) {
                width: 100%;

                @include tablet {
                  width: fit-content;
                }

                &::after {
                  display: none;

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

      .csTime {
        min-width: 24rem;
        margin-top: 5rem;

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

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

        p {
          strong {
            display: block;
            font-size: 1.6rem;
            font-weight: 400;
            color: #fff;
            margin-bottom: 1rem;
          }

          span {
            display: block;
            font-size: 1.4rem;
            font-weight: 400;
            color: #aaa;
          }
        }

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

      .copyRight {
        position: absolute;
        left: 2rem;
        bottom: 4rem;
        font-size: 1.2rem;

        @include tablet {
          bottom: 0;
        }

        @include desktopMax {
          left: 15rem;
        }

        span {
          font-family: Arial, Helvetica, sans-serif;
        }
      }

      .familyBoxWarp {
        display: flex;
        justify-content: flex-start;
        width: 100%;

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

        .familyBox {
          margin-top: 2.7rem;
          width: 100%;

          .familyInner {
            .cont-select {
              position: relative;
              width: 100%;
              height: 4.5rem;
              min-width: 10rem;

              @include tablet {
                width: 24rem;
              }

              .btn-select {
                position: relative;
                width: 100%;
                height: 4.5rem;
                font-size: 1.4rem;
                padding: 1.4rem 2rem;
                background-color: #05141f;
                border: 1px solid #676767;
                box-sizing: border-box;
                cursor: pointer;
                text-align: left;
                color: #fff;
                line-height: 1;
                /* 말줄임 */
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

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

                &::after {
                  content: "";
                  position: absolute;
                  right: 1rem;
                  top: 40%;
                  transform: translate(-50%, 0);
                  width: 1.2rem;
                  height: 1.2rem;
                  display: block;
                  background: url("/kr/assets/images/common/icon-wplus.svg");
                  background-size: contain;
                  background-repeat: no-repeat;
                  transform: rotate(-180deg);
                }
              }

              .list-member {
                display: none;
                position: absolute;
                padding: 1rem 1.5rem;
                width: 100%;
                bottom: 4.4rem;
                left: 0;
                border: 1px solid #676767;
                box-sizing: border-box;
                background-color: #05141f;
                z-index: 1;
              }

              .btn-select.on {
                &::after {
                  transform: rotate(0deg);
                }
              }

              .btn-select.on + .list-member {
                display: block;
              }

              .list-member li {
                display: flex;
                align-items: center;
                font-size: 1.4rem;
                line-height: 2;
                height: 3rem;
                box-sizing: border-box;
              }

              .list-member li a {
                display: block;
                width: 100%;
                font-size: 1.4rem;
                border: none;
                cursor: pointer;
                text-align: left;
                color: #676767;
                /* 말줄임 */
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                &:hover {
                  color: #fff;
                }
              }
            }
          }
        }

        .searchTextBox {
          width: 100%;
          border: 1px solid #dedede;
          border-left: 0;
          height: 4.5rem;
          padding: 1rem 2rem;
          display: flex;
          justify-content: space-between;

          @include tablet {
            width: 32rem;
          }

          input[type="text"] {
            width: 100%;
          }

          .icon-search {
            display: block;
            width: 2.4rem;
            height: 2.4rem;
            background-image: url(../../images/common/icon-search.svg);
            background-size: contain;
          }
        }
      }
    }

    .top {
      position: absolute;
      right: 2rem;
      bottom: 45rem;
      display: none;
    }
  }

  //기아 결재버튼 [3개 짜리]
  .threeButton {
    display: block;
    gap: 1rem;
    @include tablet {
      display: flex;
      justify-content: center;
    }

    .leftBtn,
    .centerBtn,
    .rightBtn {
      height: 5.6rem;
      display: flex;
      width: 100%;
      @include tablet {
        width: 18rem;
      }

      p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 5.6rem;
        font-size: 1.4rem;
        font-weight: 600;
        font-family: "KiaSignature";
      }
    }

    .leftBtn {
      p {
        padding-right: 2.8rem;
        background-color: #fff;
        color: #000;
        border-width: 1px 1px 1px 0;
        border-style: solid;
        border-color: #9ba1a5;
        border-radius: 0 0.4rem 0.4rem 0;
      }

      &::before {
        content: "";
        display: block;
        width: 3.2rem;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
        background-size: auto;
        background-repeat: no-repeat;
      }

      &:hover {
        p {
          color: #05141f;
          border-color: #f3c300;
          background-color: #f3c300;
        }

        &::before {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
        }

        @media (hover: hover) and (pointer: fine) {
          p {
            color: #05141f;
            border-color: #f3c300;
            background-color: #f3c300;
          }

          &::before {
            content: "";
            background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
          }
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          p {
            color: #05141f;
            border-color: #f3c300;
            background-color: #f3c300;
          }

          &::before {
            content: "";
            background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
          }
        }
      }
    }

    .centerBtn {
      margin: 1rem 0;
      @include tablet {
        margin: 0;
      }
      p {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5.6rem;
        padding: 0 1.6rem;
        background-color: #fff;
        color: #000;
        border: 1px solid #9ba1a5;
        border-radius: 0.4rem;
      }
      &:hover {
        p {
          color: #05141f;
          border-color: #f3c300;
          background-color: #f3c300;
        }

        @media (hover: hover) and (pointer: fine) {
          p {
            color: #05141f;
            border-color: #f3c300;
            background-color: #f3c300;
          }
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          p {
            color: #05141f;
            border-color: #f3c300;
            background-color: #f3c300;
          }
        }
      }
    }

    .rightBtn {
      border-radius: 0.4rem;

      p {
        background-color: #05141f;
        color: #fff !important;
        border: none;
        border-right: none;
        border-radius: 0.4rem 0 0 0.4rem;
        padding-left: 2.8rem;
        font-family: "KiaSignature";
        text-align: center;
      }

      &::after {
        content: "";
        display: block;
        width: 3.2rem;
        border: none;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-bright.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top right;
        margin-left: -1px;

        @include tablet {
          width: 3.2rem;
        }
      }

      &:hover {
        p {
          color: #05141f;
          border-color: #cdd0d2;
          background-color: #cdd0d2;
        }

        &::after {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-gright.svg);
        }
      }
    }
  }

  //기아 결재버튼 [2개 짜리]
  .towButton {
    display: flex;
    justify-content: space-between;

    .leftBtn,
    .centerBtn,
    .rightBtn {
      height: 5.6rem;
      display: flex;
      width: 100%;

      p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 5.6rem;
        font-size: 1.4rem;
        font-weight: 600;
        font-family: "KiaSignature";
      }
    }

    .leftBtn {
      @include tablet {
        margin-right: 0.5rem;
      }

      p {
        padding-right: 2.8rem;
        background-color: #fff;
        color: #000;
        border-width: 1px 1px 1px 0;
        border-style: solid;
        border-color: #9ba1a5;
        border-radius: 0 0.4rem 0.4rem 0;
      }

      &::before {
        content: "";
        display: block;
        width: 3.2rem;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
        background-size: auto;
        background-repeat: no-repeat;

        @include tablet {
          width: 3.2rem;
        }
      }

      &:hover {
        p {
          color: #05141f;
          border-color: #f3c300;
          background-color: #f3c300;
        }

        &::before {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
        }

        @media (hover: hover) and (pointer: fine) {
          p {
            color: #05141f;
            border-color: #f3c300;
            background-color: #f3c300;
          }

          &::before {
            content: "";
            background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
          }
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          p {
            color: #05141f;
            border-color: #f3c300;
            background-color: #f3c300;
          }

          &::before {
            content: "";
            background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
          }
        }
      }
    }

    .rightBtn {
      border-radius: 0.4rem;

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

      p {
        background-color: #05141f;
        color: #fff;
        border: none;
        border-right: none;
        border-radius: 0.4rem 0 0 0.4rem;
        padding-left: 2.8rem;
        font-family: "KiaSignature";
        text-align: center;
      }

      &::after {
        content: "";
        display: block;
        width: 3.2rem;
        border: none;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-bright.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top right;
        margin-left: -1px;

        @include tablet {
          width: 3.2rem;
        }
      }

      &:hover {
        p {
          color: #05141f;
          border-color: #cdd0d2;
          background-color: #cdd0d2;
        }

        &::after {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-gright.svg);
        }
      }
    }
  }

  //기아 버튼 [1개 짜리 불랙]
  .oneButton {
    height: 5.6rem;
    width: 100%;
    min-width: 16rem;

    button,
    div,
    a {
      width: 100%;
      // max-width:calc(100% - 54px);
      display: flex;
      cursor: pointer;

      &::before {
        content: "";
        display: block;
        width: 3.2rem;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
        background-size: auto;
        background-repeat: no-repeat;
        background-position: center left;

        @include tablet {
          width: 3.2rem;
        }
      }

      &::after {
        content: "";
        display: block;
        width: 3.2rem;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-wright.svg);
        background-size: auto;
        background-repeat: no-repeat;
        background-position: center right;

        @include tablet {
          width: 3.2rem;
        }
      }

      &:hover {
        p {
          color: #05141f;
          border-color: #f3c300;
          background-color: #f3c300;
        }

        &::before {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
        }

        &::after {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-yright.svg);
        }
      }

      p {
        font-family: "KiaSignature";
        display: flex;
        font-size: 1.4rem;
        font-weight: 600;
        align-items: center;
        justify-content: center;
        height: 5.6rem;
        width: calc(100% - 64px);
        background-color: #fff;
        color: #05141f;
        border-width: 1px 0 1px 0;
        border-style: solid;
        border-color: #9ba1a5;
        border-radius: 0;
      }
    }
  }

  .oneButtonBlack {
    height: 5.6rem;
    width: 100%;

    button,
    a {
      width: 100%;
      // max-width:calc(100% - 54px);
      display: flex;

      &::before {
        content: "";
        display: block;
        width: 3.2rem;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-bleft.svg);
        background-size: auto;
        background-repeat: no-repeat;
        background-position: center left;

        @include mobileSmall {
          width: 3.2rem;
        }

        @include maxtablet {
          width: 3.2rem;
        }

        @include maxmobile {
          width: 3.2rem;
        }
      }

      &::after {
        content: "";
        display: block;
        width: 3.2rem;
        height: 5.6rem;
        background-image: url(../../images/kia/svg/kia-btn-bright.svg);
        background-size: auto;
        background-repeat: no-repeat;
        background-position: center right;

        @include mobileSmall {
          width: 4.2rem;
        }

        @include maxtablet {
          width: 3rem;
        }

        @include maxmobile {
          width: 3rem;
        }
      }

      &:hover {
        p {
          color: #05141f;
          border-color: #cdd0d2;
          background-color: #cdd0d2;
        }

        &::before {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-gleft.svg);
        }

        &::after {
          content: "";
          background-image: url(../../images/kia/svg/kia-btn-gright.svg);
        }
      }

      p {
        font-family: "KiaSignature";
        display: flex;
        font-size: 1.4rem;
        font-weight: 600;
        align-items: center;
        justify-content: center;
        height: 5.6rem;
        width: calc(100% - 64px);
        background-color: #05141f;
        color: #fff;
        border-width: 1px 0 1px 0;
        border-style: solid;
        border-color: #05141f;
        border-radius: 0;
      }
    }
  }

  //기아 상품 상세 버튼 스타일
  .productRight {
    .optionWarp {
      .producOption {
        .optionList {
          .productSmallVideo {
            border-radius: 0.6rem;
          }

          .checkBtn {
            label {
              border-radius: 0.6rem;
              border: 1px solid #dedede;
            }

            input[type="checkbox"] {
              visibility: hidden;
              position: absolute;

              &:checked + label {
                background-color: #05141f;
                border: 1px solid #05141f;

                &::before {
                  content: "";
                  position: absolute;
                  right: 2rem;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  display: block;
                  width: 2rem;
                  height: 2rem;
                  background-image: url(../../images/common/icon_select.svg);
                  background-size: contain;
                  background-repeat: no-repeat;
                }

                div {
                  p {
                    span,
                    strong {
                      color: #fff;
                    }
                  }
                }
              }
            }

            &:hover {
              label {
                border: 1px solid #000;
              }
            }

            div {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              padding-left: 3rem;

              p {
                span,
                strong {
                  display: block;
                  width: 100%;
                  font-size: 1.6rem;
                }

                strong {
                  font-weight: 600;
                }

                span {
                  font-weight: 400;
                }

                strong + span {
                  margin-top: 1rem;
                }
              }
            }
          }

          .checkBtn + .checkBtn {
            margin-top: 1rem;
          }
        }
      }
    }
  }

  .inquiryBtn {
    a {
      &::before,
      &::after {
        width: 3.2rem;

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

  .contentWarp {
    .mypageWarp {
      .rightConWarp {
        .listbtnWarp {
          width: 100%;
          display: flex;
          justify-content: center;

          .towButton {
            width: 100%;

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

body {
  // overflow-x: hidden;
  .faqKey {
    background-image: url(../../images/kia/keybg/faq-key.png);
    background-position: 70%;

    @include desktopMin {
      background-image: url(../../images/kia/keybg/faq-key.png);
    }
  }

  .csKey {
    background-image: url(../../images/kia/keybg/cs-key.png);
    background-position: 70%;

    @include desktopMin {
      background-image: url(../../images/kia/keybg/cs-key.png);
    }
  }

  .serviceInfo {
    background-image: url(../../images/kia/keybg/serviceinfo-key.png);

    @include desktopMin {
      background-image: url(../../images/kia/keybg/serviceinfo-key.png);
    }
  }

  .notice {
    background-image: url(../../images/kia/keybg/notice-key.png);
    background-position: center;

    @include desktopMin {
      background-image: url(../../images/kia/keybg/notice-key.png);
    }
  }

  .event {
    background-image: url(../../images/kia/keybg/event-key.png);
    background-position: 30%;

    @include desktopMin {
      background-image: url(../../images/kia/keybg/event-key.png);
    }
  }
}

body#faq {
  .csWarp {
    border-radius: 0.6rem;
  }
}

.hederWarp {
  .headerInner {
    .headerTop {
      .headerGnb {
        .logo {
          p {
            font-size: 1.5rem;
            font-weight: 600;

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

//기아 버튼 [1개 짜리 불랙]
.oneButtonLine {
  height: 5.6rem;
  width: 100%;
  min-width: 16rem;

  button,
  div,
  a {
    width: 100%;
    // max-width:calc(100% - 54px);
    display: flex;
    cursor: pointer;

    &::before {
      content: "";
      display: block;
      width: 3.2rem;
      height: 5.6rem;
      background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
      background-size: auto;
      background-repeat: no-repeat;
      background-position: center left;

      @include tablet {
        width: 3.2rem;
      }
    }

    &::after {
      content: "";
      display: block;
      width: 3.2rem;
      height: 5.6rem;
      background-image: url(../../images/kia/svg/kia-btn-wright.svg);
      background-size: auto;
      background-repeat: no-repeat;
      background-position: center right;

      @include tablet {
        width: 3.2rem;
      }
    }

    &:hover {
      p {
        color: #fff;
        border-color: #05141f;
        background-color: #05141f;
      }

      &::before {
        content: "";
        background-image: url(../../images/kia/svg/kia-btn-bleft.svg);
      }

      &::after {
        content: "";
        background-image: url(../../images/kia/svg/kia-btn-bright.svg);
      }
    }

    p {
      font-family: "KiaSignature";
      display: flex;
      font-size: 1.4rem;
      font-weight: 600;
      align-items: center;
      justify-content: center;
      height: 5.6rem;
      width: calc(100% - 64px);
      background-color: #fff;
      color: #05141f;
      border-width: 1px 0 1px 0;
      border-style: solid;
      border-color: #9ba1a5;
      border-radius: 0;
    }
  }
}