@charset "UTF-8";
@import "utils.scss";
/*변수파일 import*/
body {
  overflow-x: hidden;
  .faqKey,
  .serviceInfo,
  .notice,
  .event,
  .csKey {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 22rem;
    background-size: cover;
    @include desktopMin {
      height: 35rem;
    }
  }
}

.hederWarp.hskey {
  height: 35rem;
}

.hederWarp_n.hskey {
  height: 35rem;
  z-index: initial;
  background-color: transparent;
}

.comp_wide {
  width: 100%;
  max-width: 192rem;
  text-align: left;
  margin: 0 auto;
  margin-top: 12rem;
  &:first-child {
    margin-top: 0;
  }
}
.comp_body {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  @media (max-width: 1240px) {
    padding: 0 2rem;
  }
}

body#serviceinfo,
body#notice,
body#event,
body#faq {
  .hederWarp.hskey {
    height: 22rem;
    background-size: cover;
    @include desktopMin {
      height: 35rem;
    }
  }
  .hederWarp_n.hskey {
    position: relative;
    height: 22rem;
    background-size: cover;
    z-index: 1000;
    @include desktopMin {
      height: 35rem;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      margin-left: -2rem;
      top: 0;
      //   background: linear-gradient(180deg, rgba(5, 20, 31, 0.8) 0%, rgba(5, 20, 31, 0) 100%);
      background: #fff;
      z-index: 0;
      @include desktopMax {
        margin-left: 0;
      }
    }
  }

  .pageTitle {
    position: relative;
    max-width: 192rem;
    margin: 0 auto;
    margin-top: 4rem;
    z-index: 100;
    @include tablet {
      margin-top: -3rem;
    }
    h1 {
      max-width: 120rem;
      margin: 0 auto;
      font-size: 3rem;
      font-weight: 600;
      color: #fff;
      padding-left: 2rem;
      padding-right: 2rem;
      text-shadow: 1px 1px 10px #999;
      @include desktopMax {
        padding-left: 0;
        padding-right: 0;
        font-size: 4.5rem;
      }
    }
  }

  .contentWarp {
    margin-top: 8.5rem;

    .infoWrap {
      width: 100%;
      @media (max-width: 1240px) {
        padding: 0 2rem;
      }
      .tabWarp {
        margin-top: 4rem;
      }
      h3 {
        margin-top: 7rem;
        font-size: 3rem;
        font-weight: 600;
        line-height: 3.8rem;
        @include maxtablet {
          margin-top: 6rem;
          font-size: 2.4rem;
          line-height: 3.2rem;
        }
      }
      p {
        margin-top: 2rem;
        font-size: 1.6rem;
        line-height: 2.4rem;
      }
      .top_img {
        width: 100%;
        margin-top: 4rem;
        img {
          width: 100%;
          border-radius: 0.6rem;
        }
      }
      .info_box_wrap {
        margin-top: 4rem;
        @include maxtablet {
          margin-top: 3rem;
        }
        .info_box {
          border: 1px solid #dedede;
          border-radius: 0.6rem;
          overflow: hidden;
          &:not(:first-child) {
            margin-top: 2rem;
          }
          .title_area {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            padding: 3rem;
            @include maxtablet {
              display: block;
              text-align: left;
              padding: 2rem;
              padding-bottom: 1.5rem;
            }
            .step_area {
              text-align: center;
              @include maxtablet {
                display: inline-block;
              }
              .step {
                font-size: 1.4rem;
                font-weight: 600;
              }
              .num {
                font-size: 2.4rem;
                font-weight: 600;
              }
            }
            .title {
              margin-left: 2.6rem;
              font-size: 2rem;
              font-weight: 600;
              line-height: 2.8rem;
              @include maxtablet {
                margin-top: 2rem;
                margin-left: 0;
                font-size: 1.6rem;
                line-height: 2.2rem;
              }
            }
          }
          .contents_area {
            margin-top: 0;
            padding: 0 3rem;
            font-size: 1.6rem;
            line-height: 2.4rem;
            @include maxtablet {
              padding: 0 2rem;
            }
          }
          .image_area {
            display: flex;
            justify-content: space-between;
            background-color: #f3f3f3;
            margin-top: 3rem;
            padding: 2rem;
            @include maxtablet {
              display: block;
            }
            .item {
              width: calc((100% - 8rem) / 5);
              @include maxtablet {
                width: 100%;
                text-align: center;
                &:not(:first-child) {
                  margin-top: 2rem;
                }
              }
              img {
                width: 100%;
                max-width: 22.4rem;
              }
              .num {
                text-align: center;
                font-size: 1.4rem;
                color: #676767;
              }
              .text {
                margin-top: 1rem;
                text-align: center;
                font-size: 1.4rem;
                line-height: 2.2rem;
                color: #676767;
              }
            }
          }
        }
      }
      .note_area {
        margin-top: 7rem;
        @include maxtablet {
          margin-top: 6rem;
        }
        h4 {
          font-size: 1.8rem;
          font-weight: 600;
          @include maxtablet {
            font-size: 1.6rem;
          }
        }
        ul {
          margin-top: 2rem;
          @include maxtablet {
            margin-top: 1.5rem;
          }
          li {
            position: relative;
            margin-bottom: 1rem;
            padding-left: 1rem;
            font-size: 1.4rem;
            line-height: 2.2rem;
            color: #676767;
            &::before {
              content: "·";
              position: absolute;
              top: 0.3rem;
              left: 0;
            }
          }
        }
      }
    }

    .noticeList {
      width: 100%;
      padding-left: 2rem;
      padding-right: 2rem;

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

      .borderList {
        margin-top: 3rem;
        ul {
          border-top: 1px solid #dedede;
          li {
            position: relative;
            width: 100%;
            border-bottom: 1px solid #dedede;
            a {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 2rem;
              transition: 0.3s all;

              div {
                .date {
                  font-size: 1.4rem;
                  color: #05141f;
                }
                p {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  margin-top: 1rem;
                  font-size: 1.8rem;
                  font-weight: 600;
                  line-height: 2.8rem;
                  color: #000000;
                  img {
                    margin-right: 1rem;
                  }
                }
              }
              > p {
                color: #9ea1a2;
                font-size: 1.6rem;
              }
            }
          }
          li.point {
            &::after {
              content: "";
              display: block;
              position: absolute;
              top: 2rem;
              right: 2rem;
              width: 3rem;
              height: 3rem;
              background-image: url(/kr/assets/images/common/icon-point.svg);
              background-size: contain;
              background-repeat: repeat;
            }
          }
        }
      }

      .noList {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 14rem;
        margin-top: 3rem;
        border: 1px solid #dedede;
        border-radius: 0.6rem;
        font-size: 1.8rem;
        color: #9ea1a2;
        @include tablet {
          font-size: 2rem;
        }
      }
    }

    .faqWarp {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding-left: 2rem;
      padding-right: 2rem;
      flex-direction: column-reverse;
      @media (min-width: 1000px) {
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: end;
      }
      @include desktopMin {
        max-width: 120rem;
      }
      @include desktopMax {
        padding-left: 0;
        padding-right: 0;
      }
      .faqTab {
        margin-top: 3rem;
        width: 100%;
        @media (min-width: 1000px) {
          margin-top: 0;
          width: auto;
        }
        .mSelectCate {
          display: flex;
          position: relative;
          align-items: center;
          width: 100%;
          height: 4.5rem;
          padding: 1.5rem;
          border: 1px solid #dedede;
          font-size: 1.4rem;
          cursor: pointer;
          &::after {
            content: "";
            position: absolute;
            right: 2rem;
            top: 40%;
            transform: translate(-50%, 0);
            transform: rotate(-180deg);
            width: 1.4rem;
            height: 0.8rem;
            display: block;
            background: url("/kr/assets/images/common/icon-notice.svg");
            background-size: contain;
            background-repeat: no-repeat;
          }

          @media (min-width: 1000px) {
            display: none;
            height: auto;
          }
        }
        .mSelectCate.on {
          font-size: 1.4rem;

          &::after {
            transform: rotate(0deg);
            background-position-x: right;
            right: 2rem;
          }
        }
        .mSelectCate.on + ul {
          display: block;
        }
        ul {
          display: none;
          border: 1px solid #dedede;
          border-top: 0;
          @media (min-width: 1000px) {
            display: flex;
            border: none;
            align-items: center;
          }

          li {
            padding: 1.5rem;

            padding-bottom: 0;
            @media (min-width: 1000px) {
              display: block;
              padding: inherit;
            }
            a {
              color: #9ea1a2;
              width: 100%;
              display: block;
              font-weight: 700;
              font-size: 1.4rem;
              border-bottom: 1px solid rbga(0, 0, 0, 0);
              @media (min-width: 1000px) {
                font-size: 1.6rem;
                padding-bottom: 0.8rem;
              }
              &:hover {
                @media (min-width: 1000px) {
                  border-bottom: 1px solid #000;
                }
                color: #000;
              }
            }
            &:last-child {
              padding-bottom: 1.5rem;
              @media (min-width: 1000px) {
                padding-bottom: 0rem;
              }
            }
          }
          li.on {
            display: block;
            a {
              @media (min-width: 1000px) {
                border-bottom: 1px solid #000;
              }
              color: #000;
            }
          }
          li + li {
            @media (min-width: 1000px) {
              margin-left: 2rem;
            }
          }
        }
      }
    }

    .faqList {
      width: 100%;
      margin-top: 2rem;
      padding-left: 2rem;
      padding-right: 2rem;
      @include desktopMin {
        max-width: 120rem;
        margin-top: 2rem;
      }
      @include desktopMax {
        padding-left: 0;
        padding-right: 0;
      }
      .faqAccodion {
        .accordion {
          dl {
            border: 1px solid #dedede;
            border-radius: 0.6rem;
            padding: 2rem;
            position: relative;
            &:hover {
              border-color: #05141f;
            }
            @include tablet {
              padding: 2.5rem;
            }
            dt {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 1.6rem;
              font-weight: 600;
              position: relative;
              cursor: pointer;
              @include desktopMin {
                font-size: 1.8rem;
              }
              p {
                position: relative;
                width: 93%;
                span {
                  line-height: 2.6rem;
                }

                .subTitle {
                  display: block;
                  color: #9ea1a2;
                  margin-bottom: 1rem;
                  font-size: 1.4rem;
                  font-weight: 400;
                }
              }

              &:hover {
                color: var(--unnamed-color-00aad2);
              }
              &::after {
                content: "";
                position: absolute;
                right: 0rem;
                top: 65%;
                transform: translate(-50%, 0);
                transform: rotate(-180deg);
                width: 1.4rem;
                height: 0.8rem;
                display: block;
                background: url("/kr/assets/images/common/icon-notice.svg");
                background-size: contain;
                background-repeat: no-repeat;
                @include tablet {
                  top: 40%;
                  right: 1rem;
                }
              }
            }
            dt.active {
              &::after {
                transform: rotate(0deg);
                background-position-x: right;
                right: 0rem;
                @include tablet {
                  right: 1rem;
                }
              }
            }
            dt.active + dd {
              display: block;
            }
            dd {
              display: none;
              margin-top: 2rem;
              p {
                font-size: 1.4rem;
                line-height: 2.4rem;
                color: #6a6a6a;
                @include desktopMin {
                  font-size: 1.6rem;
                }
              }
            }
            > .dd-padding {
              padding-left: 6.5rem;
            }
          }
          dl.active {
            border-color: #000;
          }
          dl + dl {
            margin-top: 1rem;
          }
        }
        .noList {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 14rem;

          border: 1px solid #dedede;
          border-radius: 0.6rem;
          font-size: 1.8rem;
          color: #9ea1a2;
          @include tablet {
            font-size: 2rem;
          }
        }
      }
    }

    .csWarp {
      margin-top: 0rem;
      border: 1px solid #dedede;
      margin-top: 5rem;
      padding: 5rem 20rem;
      @include tablet {
        width: 100%;
      }
      @media (max-width: 1200px) {
        border: none;
        margin-top: 5rem;
        padding-top: 0;
        padding-left: 2rem;
        padding-right: 2rem;
      }
      dl.important {
        dt {
          display: flex;
          align-items: center;
          &::after {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            display: block;
            border-radius: 50%;
            margin-left: 0.4rem;
            background-color: #ea0029;
            margin-top: -0.7rem;
            @include tablet {
              margin-left: 0.4rem;
              margin-top: -1rem;
            }
          }
        }
      }
      dl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        @include tablet {
          flex-wrap: nowrap;
        }
        dt {
          position: relative;
          width: 100%;
          font-size: 1.4rem;
          font-weight: 600;
          color: #676767;
          @include tablet {
            max-width: 14rem;
          }
          @include desktopMin {
            font-size: 1.6rem;
          }
        }
        dd {
          width: 100%;
          display: flex;
          margin-top: 1rem;
          @include tablet {
            margin-top: 0;
          }
          input[type="text"] {
            display: flex;
            width: 100%;
            align-items: center;
            padding-left: 1.7rem;
            border: 1px solid #dedede;
            height: 4.5rem;
            font-size: 1.4rem;
            color: #000;

            @include desktopMin {
              font-size: 1.6rem;
              height: 5rem;
            }
          }
          > div {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            @include tablet {
              flex-wrap: nowrap;
            }
            input[type="text"] {
              width: calc(100% / 3);
              font-size: 1.4rem;
              @include desktopMin {
                font-size: 1.6rem;
              }
            }
            input[type="text"] + input[type="text"] {
              margin-left: 1rem;
            }
            input[type="text"] + select {
              width: 100%;
              margin-top: 1rem;
              @include tablet {
                margin-top: 0;
                margin-left: 1rem;
                width: calc(100% / 3);
              }
            }
            span {
              height: 5rem;
              display: flex;
              align-items: center;
              padding-left: 0.8rem;
              padding-right: 0.8rem;
            }
          }
          > div.phone {
            flex-wrap: nowrap;
          }
          > div.mail {
            input {
              width: calc(100% / 2 - 4.5%);
            }
          }

          select {
            width: 100%;
            height: 4.5rem;
            border: 1px solid #dedede;
            outline: 0 none;
            border-radius: 0;
            padding-left: 1.7rem;
            display: flex;
            align-items: center;
            font-size: 1.4rem;
            @include desktopMin {
              font-size: 1.6rem;
              height: 5rem;
            }
            option {
              height: 4.5rem;
              display: flex;
              padding-left: 1.7rem;
              align-items: center;
              @include desktopMax {
                height: 5rem;
              }
            }
          }
          textarea {
            width: 100%;
            border: 1px solid #dedede;
            outline: 0 none;
            border-radius: 0;
            padding: 1.5rem 1.7rem;
            font-size: 1.4rem;
            @include desktopMin {
              font-size: 1.6rem;
            }
          }
        }
        dd.flieWarp {
          display: block;
          .fileList {
            display: flex;
            flex-wrap: wrap;
            ul {
              width: 100%;
              li {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                p {
                  display: flex;
                  width: 100%;
                  border: 1px solid #dedede;
                  height: 4.5rem;
                  @include tablet {
                    height: 5rem;
                  }
                  span {
                    padding: 1.5rem 1.7rem;
                    width: 100%;
                    font-size: 1.4rem;
                    @include desktopMin {
                      font-size: 1.6rem;
                    }
                  }
                  &::after {
                    content: "";
                    width: 4.5rem;
                    display: block;
                    background-image: url(/kr/assets/images/common/icon-clip.svg);
                    background-size: contain;
                    height: 4.5rem;
                    @include tablet {
                      height: 5rem;
                      width: 5rem;
                    }
                  }
                }

                button {
                  margin-left: 1rem;
                  i {
                    width: 4.5rem;
                    display: block;
                    background-image: url(/kr/assets/images/common/icon-file-close.svg);
                    background-size: contain;
                    height: 4.5rem;
                    @include tablet {
                      height: 5rem;
                      width: 5rem;
                    }
                  }
                }
              }
              li + li {
                margin-top: 1rem;
              }
            }
            .textInfo {
              font-size: 1.4rem;
              color: #9ea1a2;
              margin-top: 1.5rem;
            }
          }
          .fileAddBtn {
            display: flex;
            margin-top: 3rem;
            flex-wrap: nowrap;
            button,
            label {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 5rem;
              border: 1px solid #dedede;
              cursor: pointer;
              span {
                font-weight: 600;
                font-family: "KiaSignature";
                color: #676767;
                font-size: 1.4rem;
                @include desktopMin {
                  font-size: 1.6rem;
                }
              }
              .icon-reset {
                width: 1.4rem;
                height: 1.4rem;
                background-image: url(/kr/assets/images/common/icon-reset.svg);
                background-size: contain;
                background-repeat: no-repeat;
              }
              .icon-plus {
                width: 1.4rem;
                height: 1.4rem;
                background-image: url(/kr/assets/images/common/icon-bplus.svg);
                background-size: contain;
                background-repeat: no-repeat;
              }
            }

            button + label {
              margin-left: 1rem;
            }
          }
        }
      }
      dl.insertFile {
        align-items: flex-start;
        dt {
          margin-top: 0rem;
          @include tablet {
            margin-top: 2rem;
          }
        }
      }
      dl + dl {
        margin-top: 3rem;
      }
      .csComplete {
        text-align: center;
        border: 1px solid #dedede;
        width: 100%;
        padding: 3rem;
        @include desktopMin {
          border: none;
        }
        p {
          strong {
            font-size: 1.8rem;
            font-weight: 600;
            @include desktopMin {
              font-size: 2.4rem;
            }
          }
          span {
            font-size: 1.4rem;
            line-height: 2.2rem;
            @include desktopMin {
              line-height: 2.4rem;
              font-size: 1.6rem;
            }
          }
        }
        p + p {
          margin-top: 2rem;
        }
      }
    }
    .csBtn {
      margin-top: 4rem;
      width: 100%;
      padding-left: 2rem;
      padding-right: 2rem;
      @include tablet {
        width: 37rem;
        margin-top: 5rem;
      }
      .oneButton {
        width: 16rem;
        margin: 0 auto;
      }
      .towButton {
        display: flex;
        flex-wrap: wrap;
        @include tablet {
          flex-wrap: nowrap;
        }
        button + button {
          margin-top: 1rem;
          @include tablet {
            margin-left: 1rem;
            margin-top: 0;
          }
        }
      }
    }

    .eventList {
      width: 100%;
      padding-left: 2rem;
      padding-right: 2rem;

      @include desktopMax {
        width: 120rem;
        padding-left: 0rem;
        padding-right: 0rem;
      }
      .borderTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4rem;
        @media (max-width: 768px) {
          display: block;
          margin-top: 2rem;
        }
        .tabWarp {
          margin-top: 1rem;
        }
        .searchBoxWarp {
          @media (max-width: 768px) {
            margin-top: 3rem;
          }
          .searchTextBox {
            border: 1px solid #dedede;
          }
        }
      }
      .borderList {
        margin-top: 4rem;
        ul {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          li {
            width: calc((100% - 2rem) / 2);
            margin-bottom: 9rem;
            @media (max-width: 1024px) {
              margin-bottom: 5rem;
            }
            @media (max-width: 768px) {
              width: 100%;
            }
            a {
              .item {
                .imageWrap {
                  position: relative;
                  .imageArea {
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: 60%;
                    overflow: hidden;
                    .thumb {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      border-radius: 0.6rem;
                    }
                  }
                  .endEvent {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    .endIcon {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                      width: 15rem;
                      height: 15rem;
                      background-color: #05141f;
                      opacity: 0.9;
                      border-radius: 7.5rem;
                      img {
                        width: 3.2rem;
                      }
                      span {
                        margin-top: 1.4rem;
                        font-size: 1.4rem;
                        font-weight: 600;
                        color: #ffffff;
                      }
                      @media (max-width: 500px) {
                        width: 11rem;
                        height: 11rem;
                        border-radius: 5.5rem;
                        img {
                          width: 2.4rem;
                        }
                        span {
                          margin-top: 1.1rem;
                          font-size: 1.2rem;
                        }
                      }
                    }
                  }
                  .endEvent2 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    background-color: #000000;
                    opacity: 0.4;
                  }
                }
                .textArea {
                  margin-top: 3rem;
                  @media (max-width: 1024px) {
                    margin-top: 2.5rem;
                  }
                  span {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 1.8rem;
                    color: #676767;
                    span {
                      font-size: 1.4rem;
                      font-weight: 600;
                      margin-right: 1rem;
                      padding: 5px 8px;
                      border: 1px solid #000000;
                      @media (max-width: 1024px) {
                        font-size: 1.1rem;
                      }
                    }
                    img {
                      margin-right: 1.5rem;
                      padding-bottom: 0.3rem;
                    }
                    @media (max-width: 1024px) {
                      font-size: 1.4rem;
                      img {
                        width: 1.7rem;
                        margin-right: 1.2rem;
                      }
                    }
                  }
                  p {
                    margin-top: 1.5rem;
                    font-size: 2.2rem;
                    font-weight: 600;
                    line-height: 3rem;
                    color: #000000;
                    @media (max-width: 1024px) {
                      margin-top: 1rem;
                      font-size: 1.8rem;
                      line-height: 2.6rem;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .borderListWinner {
        margin-top: 4rem;
        ul {
          border-top: 1px solid #dedede;
          li {
            border-bottom: 1px solid #dedede;
            padding: 2rem 0;
            a {
              .item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .imageWrap {
                  position: relative;
                  .imageArea {
                    position: relative;
                    width: 20rem;
                    height: 0;
                    padding-bottom: 60%;
                    overflow: hidden;
                    .thumb {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      border-radius: 0.6rem;
                    }
                  }
                  @media (max-width: 768px) {
                    display: none;
                  }
                }
                .textArea {
                  width: calc(100% - 23rem);
                  margin-left: 3rem;
                  @media (max-width: 768px) {
                    width: 100%;
                    margin-left: 0;
                  }
                  span {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 1.6rem;
                    color: #676767;
                    @media (max-width: 1024px) {
                      font-size: 1.4rem;
                    }
                  }
                  p {
                    margin-top: 1rem;
                    font-size: 2rem;
                    font-weight: 600;
                    line-height: 2.8rem;
                    color: #000000;
                    @media (max-width: 1024px) {
                      margin-top: 0.8rem;
                      font-size: 1.6rem;
                      line-height: 2.4rem;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .noList {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 14rem;
        margin-top: 3rem;
        border: 1px solid #dedede;
        border-radius: 0.6rem;
        font-size: 1.8rem;
        color: #9ea1a2;
        @include tablet {
          font-size: 2rem;
        }
      }
    }
  }
  .contentWarp.listView {
    margin-bottom: 0;
    .noticeView {
      width: 100%;
      padding-left: 2rem;
      padding-right: 2rem;
      @include desktopMax {
        width: 120rem;
        padding-left: 0rem;
        padding-right: 0rem;
      }
      .viewInner {
        .viewTitle {
          p {
            span {
              font-size: 1.4rem;
              color: #ea0029;
              @include desktopMin {
                font-size: 1.6rem;
              }
            }
            span + span {
              font-size: 1.4rem;
              color: #9ea1a2;
              @include desktopMin {
                font-size: 1.6rem;
              }
            }
          }
          h1 {
            display: flex;
            align-items: flex-start;
            margin-top: 1rem;
            font-size: 2.4rem;
            font-weight: 600;
            @include desktopMin {
              font-size: 3.5rem;
              margin-top: 1.5rem;
            }
            img {
              width: 2.4rem;
              margin-top: 0.2rem;
              margin-right: 1rem;
              @include desktopMin {
                width: 3.5rem;
              }
            }
          }
        }
        .cmsWarp {
          margin-top: 4rem;
          p {
            font-size: 1.4rem;
            line-height: 2.2rem;
            color: #000;
            @include desktopMin {
              font-size: 1.6rem;
              line-height: 2.4rem;
            }
          }
          img {
            max-width: 100%;
          }
        }
        .fileBox {
          margin-top: 2rem;
          background-color: #f3f3f3;
          width: 100%;
          padding: 1rem;
          display: flex;
          justify-content: space-between;
          @include desktopMin {
            width: fit-content;
            margin-top: 3rem;
          }
          p {
            color: #000;
            font-size: 1.6rem;
          }
          &::after {
            content: "";
            width: 2rem;
            height: 2rem;
            display: block;
            background-image: url(/kr/assets/images/common/icon-file.svg);
            background-repeat: no-repeat;
            background-size: contain;
            margin-left: 1rem;
          }
        }
      }
      .listbtnWarp {
        width: 100%;
        margin: 0 auto;
        margin-top: 6rem;
        @include desktopMin {
          width: 16rem;
          margin-top: 7rem;
        }
        a::before,
        a::after {
          width: 3.2rem;
          @include desktopMin {
            width: 3.2rem;
          }
        }
      }
    }
    .eventView {
      width: 100%;
      margin-top: 5rem;
      padding-left: 2rem;
      padding-right: 2rem;
      padding-bottom: 9rem;
      @include desktopMax {
        width: 120rem;
        padding-left: 0rem;
        padding-right: 0rem;
        padding-bottom: 15rem;
      }
      .viewInner {
        .viewTitle {
          .endBadge {
            display: inline-block;
            margin-bottom: 1.3rem;
            padding: 0.6rem 0.8rem;
            border: 1px solid #676767;
            font-size: 1.3rem;
            font-weight: 400;
            color: #676767;
            line-height: 1;
          }
          p {
            span {
              font-size: 1.8rem !important;

              @include desktopMin {
                font-size: 1.6rem;
              }
              .badge {
                font-size: 1.4rem !important;
                font-weight: 600;
                margin-top: -0.3rem;
                margin-right: 1rem;
                padding: 5px 8px;
                border: 1px solid #000000;
                @media (max-width: 1024px) {
                  font-size: 1.1rem !important;
                }
              }
            }
          }
          h1 {
            margin-top: 1rem;
            font-size: 2.4rem;
            line-height: 3.4rem;
            font-weight: 600;
            @include desktopMin {
              margin-top: 1.5rem;
              font-size: 3.5rem;
              line-height: 4.3rem;
            }
          }
          p {
            span {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              font-size: 2.4rem;
              font-weight: 300;
              color: #676767;
              img {
                margin-bottom: 0.5rem;
                margin-right: 1rem;
              }
            }
          }
        }
        .cmsWarp {
          margin-top: 4rem;
          p {
            font-size: 1.4rem;
            line-height: 2.2rem;
            color: #000;
            @include desktopMin {
              font-size: 1.6rem;
              line-height: 2.4rem;
            }
          }
          img {
            max-width: 100%;
          }
        }
        .fileBox {
          margin-top: 2rem;
          background-color: #f3f3f3;
          width: 100%;
          padding: 1rem;
          display: flex;
          justify-content: space-between;
          @include desktopMin {
            width: fit-content;
            margin-top: 3rem;
          }
          p {
            color: #000;
            font-size: 1.6rem;
          }
          &::after {
            content: "";
            width: 2rem;
            height: 2rem;
            display: block;
            background-image: url(/kr/assets/images/common/icon-file.svg);
            background-repeat: no-repeat;
            background-size: contain;
            margin-left: 1rem;
          }
        }
      }
      .listbtnWarp {
        width: 100%;
        margin: 0 auto;
        margin-top: 6rem;
        @include desktopMin {
          width: 16rem;
          margin-top: 7rem;
        }
        a::before,
        a::after {
          width: 3rem;
          @include desktopMin {
            width: 3.2rem;
          }
        }
      }
    }
  }
  .btnNextPre {
    position: relative;
    width: 100%;
    background-color: #f3f3f3;
    border-top: 1px solid #dedede;
    padding-top: 2rem;
    padding-bottom: 4rem;
    margin-top: 4rem;
    @include desktopMin {
      padding-top: 5rem;
      padding-bottom: 8rem;
    }
    .btnInner {
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      @include desktopMin {
        padding: 0 2rem;
      }
      @include desktopMax {
        width: 120rem;
        padding: 0;
        flex-wrap: nowrap;
      }
      &::after {
        content: "";
        display: none;
        @include desktopMin {
          position: absolute;
          width: 1px;
          background-color: #dedede;
          left: 50%;
          top: 0;
          transform: translate(-50%, -0);
          display: block;
          height: 100%;
        }
      }
      .btnArea {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        padding-right: 0;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #dedede;
        @include desktopMin {
          padding-right: 8.5rem;
          padding-left: 0rem;
          padding-right: 0rem;
          padding-bottom: 0rem;
          border-bottom: 0;
        }
      }

      > div {
        width: 100%;
        padding-right: 0;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #dedede;

        @include desktopMin {
          width: 50%;
          padding-right: 7rem;
          padding-left: 0rem;
          padding-bottom: 0rem;
          border-bottom: 0;
        }
        > p {
          display: flex;
          align-items: center;
          span {
            font-size: 1.4rem;
            color: #676767;
            font-weight: 600;
            @include desktopMin {
              font-size: 1.6rem;
            }
          }
          &::before {
            content: "";
            display: none;
            @include desktopMin {
              display: block;
              width: 1.8rem;
              height: 1.2rem;
              margin-right: 1rem;
              background-image: url(/kr/assets/images/common/icon-np.svg);
              background-size: contain;
              background-repeat: no-repeat;
            }
          }
        }
        > div {
          margin-top: 2rem;
          @include desktopMin {
            margin-top: 2.8rem;
          }
          span {
            color: #05141f;
          }
          a {
            display: block;
            margin-top: 0.5rem;
            line-height: 2.8rem;
            font-weight: 600;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #000000;
            &:hover {
              text-decoration: underline;
            }
          }
          p {
            margin-top: 0.5rem;
            font-weight: 600;
            color: #676767;
          }
        }
      }
      div + div {
        width: 100%;
        margin-top: 2rem;
        border-bottom: 0;
        @include desktopMin {
          width: 50%;
          margin-top: 0;
          padding-left: 7rem;
          padding-right: 0;
        }
        > p {
          justify-content: flex-start;
          @include desktopMin {
            justify-content: flex-end;
          }
          &::before {
            display: none;
          }
          &::after {
            content: "";
            display: none;
            @include desktopMin {
              display: block;
              width: 1.8rem;
              height: 1.2rem;
              margin-left: 1rem;
              background-image: url(/kr/assets/images/common/icon-np.svg);
              background-size: contain;
              background-repeat: no-repeat;
              transform: rotate(180deg);
            }
          }
        }
        > div {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          @include desktopMin {
            justify-content: flex-end;
          }
          span {
            color: #ea0029;
            text-align: left;
            @include desktopMin {
              text-align: right;
            }
          }
          a {
            display: block;
            margin-top: 0.5rem;
            line-height: 2.8rem;
            font-weight: 600;
            text-align: left;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            @include desktopMin {
              text-align: right;
            }
            &:hover {
              text-decoration: underline;
            }
          }
          p {
            margin-top: 0.5rem;
            font-weight: 600;
            color: #676767;
            text-align: left;
            @include desktopMin {
              text-align: right;
            }
          }
        }
      }
    }
  }
}

body#notice {
  .contentWarp {
    margin-top: 10.2rem;
    @include tablet {
      margin-top: 13.4rem;
    }
  }
}

.qnaTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid #dedede;
  border-radius: 0.6rem;
  padding: 4rem;
  @include maxtablet {
    display: block;
    padding: 2rem;
  }
  .info {
    .title {
      padding-right: 2rem;
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 3rem;
      color: #000000;
      @include maxtablet {
        padding-right: 0;
        text-align: center;
        font-size: 1.6rem;
        line-height: 2.4rem;
      }
    }
    .text {
      margin-top: 2rem;
      padding-right: 2rem;
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 2.4rem;
      color: #000000;
      @include maxtablet {
        margin-top: 1.2rem;
        padding-right: 0;
        font-size: 1.4rem;
        line-height: 2.2rem;
      }
    }
  }
  .qnaBtn {
    @include maxtablet {
      margin-top: 3rem;
    }
  }
}
.qnaSupport {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.8rem;
  background-color: #f3f3f3;
  padding: 2.5rem 4rem;
  .noticeText {
    font-size: 1.6rem;
    line-height: 2.4rem;
    text-align: center;
  }
  .kiaInquiryLink {
    position: relative;
    display: inline;
    border-bottom: 1px solid #676767;
    margin-right: 2rem;
    color: #676767;
    font-size: 1.6rem;
    line-height: 2.2rem;
    &:after {
      content: "";
      display: inline-block;
      position: absolute;
      right: -2rem;
      bottom: 0;
      width: 2rem;
      height: 2rem;
      background-image: url(/kr/assets/images/kia/svg/icon-link-arrow.svg);
      background-repeat: no-repeat;
      background-size: 0.6rem 1.2rem;
      margin-left: 1rem;
      background-position: center;
    }
  }
  @include maxdesktop {
    flex-direction: column;
    padding: 2.4rem 2rem;
  }
  @include maxtablet {
    gap: 3rem;
  }
}
.qnaArea {
  margin-top: 7rem;
  @include maxtablet {
    margin-top: 6rem;
    padding-bottom: 6rem;
  }
  .qnaInner {
    .titleArea {
      display: flex;
      justify-content: space-between;
      align-items: center;
      @include maxtablet {
        display: block;
      }
      h2 {
        width: 100%;
        font-size: 2.4rem;
        font-weight: 600;
        @include maxtablet {
          font-size: 2rem;
        }
      }
      .searchBoxWarp {
        @include maxtablet {
          margin-top: 4rem;
        }
      }
    }

    .qnaList {
      margin-top: 4rem;
      @include maxtablet {
        margin-top: 3rem;
      }
    }
    .qnaList {
      width: 100%;
      margin-top: 2rem;
      // padding-left:2rem;
      // padding-right:2rem;
      @include desktopMin {
        max-width: 120rem;
        margin-top: 2rem;
      }
      @include desktopMax {
        padding-left: 0;
        padding-right: 0;
      }
      .qnaAccodion {
        .accordion {
          dl {
            border: 1px solid #dedede;
            border-radius: 0.6rem;
            padding: 2rem;
            position: relative;
            &:hover {
              border-color: #05141f;
            }
            @include tablet {
              padding: 2.5rem;
            }
            dt {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 1.6rem;
              font-weight: 600;
              position: relative;
              cursor: pointer;
              @include desktopMin {
                font-size: 1.8rem;
              }
              > p {
                position: relative;
                width: 93%;

                .subTitle {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  color: #9ea1a2;
                  margin-bottom: 1.5rem;
                  font-size: 1.4rem;
                  font-weight: 400;
                  .badge {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 2.5rem;
                    margin-right: 1rem;
                    padding: 0 0.8rem;
                    border: 0.1rem solid #dedede;
                    font-size: 1.4rem;
                    font-weight: 400;
                    &.an {
                      color: #9ea1a2;
                    }
                    &.ay {
                      color: #000000;
                    }
                  }
                }
                span {
                  font-weight: 600;
                }
              }

              &:hover {
                color: var(--unnamed-color-00aad2);
              }
              &::after {
                content: "";
                position: absolute;
                right: 0rem;
                top: 65%;
                transform: translate(-50%, 0);
                transform: rotate(-180deg);
                width: 1.4rem;
                height: 0.8rem;
                display: block;
                background: url("/kr/assets/images/common/icon-notice.svg");
                background-size: contain;
                background-repeat: no-repeat;
                @include tablet {
                  top: 40%;
                  right: 1rem;
                }
              }
            }
            dt.active {
              &::after {
                transform: rotate(0deg);
                background-position-x: right;
                right: 0rem;
                @include tablet {
                  right: 1rem;
                }
              }
            }
            dt.active + dd {
              display: block;
            }
            dd {
              display: none;
              margin-top: 3rem;
              p {
                font-size: 1.4rem;
                line-height: 2.4rem;
                color: #000000;
                @include desktopMin {
                  font-size: 1.6rem;
                }
              }
              .imageArea {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                margin-top: 3rem;
                .item {
                  width: calc((100% - 4rem) / 3);
                  border: 0.1rem solid #dedede;
                  overflow: hidden;
                  margin-right: 2rem;
                  &:last-child {
                    margin-right: 0;
                  }
                  .box {
                    position: relative;
                    padding-top: 100%;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                  }
                }
              }
              .adminAnswer {
                margin-top: 3.5rem;
                padding-top: 3.5rem;
                border-top: 0.1rem solid #dedede;
                .subTitle {
                  color: #9ea1a2;
                  font-size: 1.4rem;
                  font-weight: 400;
                }
                .answer {
                  margin-top: 1.5rem;
                }
                .downloadArea {
                  display: flex;
                  justify-content: flex-start;
                  flex-wrap: wrap;
                  width: 100%;
                  margin-top: 2rem;

                  .downloadItem {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 1.6rem;
                    padding: 0.7rem 1rem;
                    background-color: #f3f3f3;
                    color: #000000;
                    margin-right: 1rem;
                    margin-bottom: 1rem;

                    &:hover {
                      text-decoration: underline;
                    }
                    .icon {
                      width: 2rem;
                      height: 2rem;
                      background-image: url("/kr/assets/images/common/icon-download.svg");
                      background-repeat: repeat;
                      margin-left: 0.8rem;
                    }
                  }
                }
              }
              .csBtn {
                margin: 0 auto;
                margin-top: 4rem;
                width: 100%;

                @include tablet {
                  width: 37rem;
                  margin-top: 5rem;
                }
                .oneButton {
                  width: 16rem;
                  margin: 0 auto;
                }
                .towButton {
                  display: flex;
                  flex-wrap: wrap;
                  @include tablet {
                    flex-wrap: nowrap;
                  }
                  .leftBtn {
                    margin-right: 0;
                    @include tablet {
                      margin-right: 0.5rem;
                    }
                  }
                  .rightBtn {
                    margin-left: 0;
                    @include tablet {
                      margin-left: 0.5rem;
                    }
                  }
                  button + button {
                    margin-top: 1rem;
                    @include tablet {
                      margin-left: 1rem;
                      margin-top: 0;
                    }
                  }
                }
              }
            }
            > .dd-padding {
              padding-left: 6.5rem;
            }
          }
          dl.active {
            border-color: #000;
          }
          dl + dl {
            margin-top: 1rem;
          }
        }
        .noList {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 14rem;

          border: 1px solid #dedede;
          border-radius: 0.6rem;
          font-size: 1.8rem;
          color: #9ea1a2;
          @include tablet {
            font-size: 2rem;
          }
        }
      }
    }
  }
}

.inquiryEdit {
  .inquiryType {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-top: 3rem;
    background-color: #f3f3f3;
    padding: 3rem 2rem;
    @include maxtablet {
      margin-top: 0;
    }
    .radioArea {
      display: flex;
      justify-content: center;
      align-items: center;
      label {
        font-size: 20px;
        line-height: 2rem;
        padding: 0.2em 0.4em;
      }

      span {
        vertical-align: middle;
        font-size: 1.6rem;
      }

      [type="radio"] {
        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 {
        border: 0.4rem solid #ea0029;
      }
      [type="radio"]:hover {
        box-shadow: 0 0 0 max(2px, 0.2em) #dedede;
        cursor: pointer;
      }
      [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;
      }
    }
    .info {
      margin-top: 1rem;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 2.2;
      color: #676767;
    }
  }
  .csWarp {
    margin-top: 4rem;
    padding: 0 2rem;

    .csInner {
      max-width: 80rem;
      margin: 0 auto;
      dl.important {
        dt {
          display: flex;
          align-items: center;
          &::after {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            display: block;
            border-radius: 50%;
            margin-left: 0.4rem;
            background-color: #ea0029;
            margin-top: -0.7rem;
            @include tablet {
              margin-left: 0.4rem;
              margin-top: -1rem;
            }
          }
        }
      }
      dl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        @include tablet {
          flex-wrap: nowrap;
        }
        dt {
          position: relative;
          width: 100%;
          font-size: 1.4rem;
          font-weight: 600;
          color: #676767;
          @include tablet {
            max-width: 14rem;
          }
          @include desktopMin {
            font-size: 1.6rem;
          }
        }
        dd {
          width: 100%;
          display: flex;
          margin-top: 1rem;
          @include tablet {
            margin-top: 0;
          }
          input[type="text"] {
            display: flex;
            width: 100%;
            align-items: center;
            padding-left: 1.7rem;
            border: 1px solid #dedede;
            height: 4.5rem;
            font-size: 1.4rem;
            color: #000;

            @include desktopMin {
              font-size: 1.6rem;
              height: 5rem;
            }
          }
          > div {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            @include tablet {
              flex-wrap: nowrap;
            }
            input[type="text"] {
              width: calc(100% / 3);
              font-size: 1.4rem;
              @include desktopMin {
                font-size: 1.6rem;
              }
            }
            input[type="text"] + input[type="text"] {
              margin-left: 1rem;
            }
            input[type="text"] + select {
              width: 100%;
              margin-top: 1rem;
              @include tablet {
                margin-top: 0;
                margin-left: 1rem;
                width: calc(100% / 3);
              }
            }
            span {
              height: 5rem;
              display: flex;
              align-items: center;
              padding-left: 0.8rem;
              padding-right: 0.8rem;
            }
          }
          > div.phone {
            flex-wrap: nowrap;
          }
          > div.mail {
            input {
              width: calc(100% / 2 - 4.5%);
            }
          }

          select {
            width: 100%;
            height: 4.5rem;
            border: 1px solid #dedede;
            outline: 0 none;
            border-radius: 0;
            padding-left: 1.7rem;
            display: flex;
            align-items: center;
            font-size: 1.4rem;
            @include desktopMin {
              font-size: 1.6rem;
              height: 5rem;
            }
            option {
              height: 4.5rem;
              display: flex;
              padding-left: 1.7rem;
              align-items: center;
              @include desktopMax {
                height: 5rem;
              }
            }
          }
          textarea {
            width: auto !important;
            border: 1px solid #dedede;
            outline: 0 none;
            border-radius: 0;
            padding: 1.5rem 1.7rem;
            font-size: 1.4rem;
            line-height: 2.2rem;
            @include desktopMin {
              font-size: 1.6rem;
              line-height: 2.4rem;
            }
          }
        }
        dd.contentsWrap {
          flex-direction: column;
          .wordCounter {
            justify-content: flex-end;
            margin-top: 1rem;
            font-size: 1.4rem;
            color: #676767;
            text-align: right;
          }
        }
        dd.flieWarp {
          display: block;
          .fileList {
            ul {
              display: flex;
              justify-content: space-between;
              width: 100%;
              .imgItem {
                position: relative;
                width: calc((100% - 30px) / 3) !important;
                margin-top: 0 !important;
                border: 1px solid #dedede;

                .itemWrap {
                  position: relative;
                  width: 100%;
                  padding-top: 100%;
                  .imgInput {
                    display: none;
                  }
                  .contents {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                    }
                  }
                }
                .delImg {
                  position: absolute;
                  display: none;
                  top: 1.5rem;
                  right: 1rem;
                  cursor: pointer;
                }
              }
            }
          }
          .textInfo {
            font-size: 1.4rem;
            color: #9ea1a2;
            margin-top: 1.5rem;
          }
          .fileAddBtn {
            display: flex;
            margin-top: 3rem;
            flex-wrap: nowrap;
            button,
            label {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 5rem;
              border: 1px solid #dedede;
              cursor: pointer;
              span {
                font-weight: 600;
                font-family: "KiaSignature";
                color: #676767;
                font-size: 1.4rem;
                @include desktopMin {
                  font-size: 1.6rem;
                }
              }
              .icon-reset {
                width: 1.4rem;
                height: 1.4rem;
                background-image: url(/kr/assets/images/common/icon-reset.svg);
                background-size: contain;
                background-repeat: no-repeat;
              }
              .icon-plus {
                width: 1.4rem;
                height: 1.4rem;
                background-image: url(/kr/assets/images/common/icon-bplus.svg);
                background-size: contain;
                background-repeat: no-repeat;
              }
            }

            button + label {
              margin-left: 1rem;
            }
          }
        }
      }
      dl.insertFile {
        align-items: flex-start;
        dt {
          margin-top: 0rem;
          @include tablet {
            margin-top: 2rem;
          }
        }
      }
      dl + dl {
        margin-top: 3rem;
      }
    }
  }

  .carswBtn {
    width: 100%;
    margin: 0 auto;
    margin-top: 3rem;
    @include tablet {
      margin-top: 5rem;
      width: 37rem;
    }
    .towButton {
      display: flex;
      flex-wrap: wrap;
      padding: 0 2rem;
      .leftBtn {
        margin-right: 0;
        @include tablet {
          margin-right: 0.5rem;
        }
      }
      .rightBtn {
        margin-left: 0;
        @include tablet {
          margin-left: 0.5rem;
        }
      }
      @include tablet {
        flex-wrap: nowrap;
      }
      a + a {
        margin-top: 1rem;
        @include tablet {
          margin-top: 0;
        }
      }
    }
  }
}

.csFinish {
  text-align: center;
  border: 1px solid #dedede;
  border-radius: 0.6rem;
  width: 100%;
  margin-top: 5rem;
  padding: 5rem;
  @include maxtablet {
    padding: 3rem;
    margin-top: 0;
  }

  p {
    strong {
      font-size: 2.4rem;
      font-weight: 600;
      @include maxtablet {
        font-size: 1.8rem;
      }
    }
    span {
      line-height: 2.4rem;
      font-size: 1.6rem;
      @include maxtablet {
        font-size: 1.4rem;
        line-height: 2.2rem;
      }
    }
  }
  p + p {
    margin-top: 2rem;
  }
}
.csFinishBtn {
  margin-top: 5rem;
  @include maxtablet {
    margin-top: 4rem;
  }
  .towButton {
    margin: 0 auto;
  }
}

.comp_1x_b_n_n_e1 {
  margin-top: 5rem;
  .comp_body {
    padding: 0;
  }
  @media (max-width: 1024px) {
    margin-top: 5rem;
  }

  h5 {
    font-size: 3rem;
    font-weight: 600;
    text-align: left;
    color: #000000;
  }
  .youtubeArea {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율인 경우 */
    /* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */
    padding-top: 25px;
    height: 0;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    object {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

#event {
  .event {
    top: 10.6rem;
    @media (min-width: 1121px) {
      top: 8.6rem;
    }
  }
  .contentWarp,
  .contentWarp.listView {
    @media (max-width: 640px) {
      margin-top: 4.5rem;
    }
  }
  .utilBtnArea {
    margin-bottom: 4rem;
  }
}

body .notice,
body .faqKey,
body .csKey {
  top: 10.6rem;
  @media (min-width: 1121px) {
    top: 8.6rem;
  }
}