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

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

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

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

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

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

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

.boldText {
  color: hsl(142, 46%, 27%);
}

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

.banner-bg .banner-inner-bg {
  width: 100%;
  background-color: hsl(142, 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(142, 64%, 92%);
}

.button-class-img2 svg {
  fill: hsl(142, 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;
  }
}