.index-box {
        border: 1px solid hsl(280, 34%, 42%);
        background-color: hsl(280, 64%, 92%);
      }

      .charType1, .charType2, .charType3, .charType4, .charType5, .charType6, .charType7 {
        color: hsl(280, 34%, 42%);
      }

      .link-button {
        background-color: hsl(280, 34%, 42%);
      }

      .hr-class {
        width: 140px;
        border: 1px solid hsl(280, 34%, 42%);
      }

      .title-area {
        border: 2px solid hsl(280, 34%, 42%);
      }

      .sub-of-title {
        color: hsl(280, 34%, 42%);
      }

      .sub-area {
        border: 1px solid hsl(280, 34%, 42%);
        background-color: hsl(280, 64%, 92%);
      }

      .boldText {
        color: hsl(280, 46%, 27%);
      }
      
      .banner-bg {
        width: 100%;
        padding: 22.5px 17.5px;
        background-color: hsl(280, 35%, 33%);
      }

      .banner-bg .banner-inner-bg {
        width: 100%;
        background-color: hsl(280, 26%, 61%);
        font-size: 50px;
      }

      .banner-first-title, .banner-second-title {
        font-size: 50px;
        font-weight: bold;
        font-family: 'Pretendard';
      }

      .banner-second-title {
        text-align: right;
      }

      .banner-first-title .boldText, .banner-second-title .boldText {
        font-size: 50px;
        font-weight: bold;
      }

      .banner-inner-bg .text-area {
        padding: 30px 85px;
      }

      .banner-inner-bg .image-area {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

      .contents .creation .button-class, .question-box .creation .button-class {
        background-color: hsl(280, 64%, 92%);
      }



      .button-class-img2 svg {
        fill: hsl(280, 34%, 42%);
        height: 100px;
        width: 100px;
      }

      @media screen and (max-width: 900px) {
        .banner-first-title .boldText, .banner-second-title .boldText {
          font-size: 30px;
          font-weight: bold;
        }

        .banner-first-title, .banner-second-title {
          font-size: 30px;
          font-weight: bold;
          font-family: 'Pretendard';
        }

        .banner-inner-bg .text-area {
          padding: 30px 10px;
        }
      }