
.about_page .about_wrapper .auditory .auditory_title {
  margin-bottom: 80px;
}

.about_page .about_wrapper .auditory .auditory_block .auditory_item.one,
#activity .activity-item.pink {
  background: url('../images/pink-bg.png');
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.two,
#activity .activity-item.blue {
  background: url('../images/blue-bg.png');
  height: 100%;
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.three,
#activity .activity-item.light-grey {
  background: url('../images/gray-bg.png');
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
#activity .activity-item.green {
  background: url('../images/green-bg.png');
}


.about_page .about_wrapper .auditory .auditory_block .auditory_item,
#activity .activity-item.pink,
#activity .activity-item.blue,
#activity .activity-item.light-grey,
#activity .activity-item.green {
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

#activity .activity-item .item-top p {
  padding: 4px 12px;
}

.about_page .about_wrapper .auditory .auditory_block,
#activity .activity-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px 0;
}
.about_page .about_wrapper .auditory .auditory_in,
#activity .activity-block .ac-content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0 20px;
}
.about_page .about_wrapper .auditory .auditory_in,
#activity .activity-block .activity-in {
  width: 100%;
  height: 100%;
}

.about_page .about_wrapper .auditory .auditory_block .auditory_item.one,
.about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
#activity .activity-block .four .activity-item,
#activity .activity-block .one .activity-item {
  width: 700px;
  height: 316px;
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.two,
.about_page .about_wrapper .auditory .auditory_block .auditory_item.three,
#activity .activity-block .two .activity-item,
#activity .activity-block .three .activity-item {
  width: 440px;
  height: 455px;
}

#activity .activity-block .three .activity-item {
  margin-top: -280px;
}
#activity .activity-block .four .activity-item {
  margin-top: -140px;
}

.about_page .about_wrapper .auditory .auditory_block .auditory_item.three {
  margin-top: -300px;
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.four {
  margin-top: -160px;
}

#activity .activity-item .item-bottom {
  position: unset;
}

#activity .activity-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
#activity .activity-block .two .activity-item .item-bottom {
  margin-left: auto;
  margin-right: 140px;
}
#activity .activity-block .one .activity-item .item-bottom {
  margin-left: auto;
  margin-right: 200px;
}

.about_page .about_wrapper .auditory .auditory_block .auditory_item.one .item_content,
.about_page .about_wrapper .auditory .auditory_block .auditory_item.four .item_content {
  max-width: 356px;
  margin-top: auto;
}

.about_page .about_wrapper .auditory .auditory_block .auditory_item.two .item_content,
.about_page .about_wrapper .auditory .auditory_block .auditory_item.three .item_content {
  max-width: 376px;
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.one .item_content {
  margin-top: 90px;
  margin-left: auto;
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.two .item_content {
  margin-top: 120px;
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.three .item_content {
  margin-top: 100px;
}
.about_page .about_wrapper .auditory .auditory_block .auditory_item.four .item_content {
  margin-top: 50px;
}


















@media only screen and (max-width: 1200px) {
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
  #activity .activity-block .four .activity-item,
  #activity .activity-block .one .activity-item {
    width: 580px;
  }
  #activity .activity-block .two .activity-item .item-bottom,
  #activity .activity-block .one .activity-item .item-bottom {
    margin-right: 0;
  }
  #activity .activity-item .item-top {
    flex-wrap: wrap;
    gap: 2px;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three,
  #activity .activity-block .two .activity-item,
  #activity .activity-block .three .activity-item {
    width: 320px;
  }
  #activity .four .activity-item .item-top {
    max-width: 56%;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one .item_content,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four .item_content {
    max-width: 290px;
  }
}


@media only screen and (max-width: 992px) {
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three,
  #activity .activity-block .two .activity-item,
  #activity .activity-block .three .activity-item {
    width: 260px;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
  #activity .activity-block .four .activity-item,
  #activity .activity-block .one .activity-item {
    width: 415px;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three .item_content {
    margin-top: 80px;
  }
}

@media only screen and (max-width: 768px) {
  #activity .activity-block .two .activity-item,
  #activity .activity-block .three .activity-item,
  #activity .activity-block .four .activity-item,
  #activity .activity-block .one .activity-item {
    width: 100%;
    height: 240px;
    min-height: auto;
  }
  #activity .activity-block .three .activity-item,
  #activity .activity-block .four .activity-item {
    margin-top: 0;
  }
  #activity .activity-block .ac-content {
    flex-direction: column;
    gap: 0;
  }
  #activity .activity-item .item-top {
    display: none !important;
  }
  #activity .activity-item .item-bottom {
    transform: none;
  }
  #activity .one .activity-item .item-bottom,
  #activity .three .activity-item .item-bottom {
    flex-direction: column;
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one,
  #activity .activity-item.pink {
    background: url('../images/pink-bg-mob.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two,
  #activity .activity-item.blue {
    background: url('../images/blue-bg-mob.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three,
  #activity .activity-item.light-grey {
    background: url('../images/gray-bg-mob.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
  #activity .activity-item.green {
    background: url('../images/green-bg-mob.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  #activity .activity-block .one .activity-item .item-bottom {
    margin-right: auto;
    margin-left: 0;
  }
  #activity .activity-block .one .activity-item .item-bottom {
    margin-top: auto;
  }
  #activity .activity-block .two .activity-item .item-bottom {
    margin-left: auto;
    margin-right: 20px;
    flex-direction: column;
  }
  #activity .three .activity-item .item-bottom {
    margin-top: auto;
  }
  #activity .four .activity-item .item-bottom {
    flex-direction: column;
    max-width: 110px;
    text-align: center;
    margin-left: auto;
  }
  #activity .activity-block .activity-in.two,
  #activity .activity-block .activity-in.four {
    margin-top: -50px;
  }
  .about_page .about_wrapper .auditory .auditory_in {
    flex-direction: column;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three {
    width: 100%;
    height: auto;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four .item_content,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three .item_content,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two .item_content,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one .item_content,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three {
    margin-top: 0;
    margin-bottom: 0;
    gap: 20px;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three {
    height: auto;
    margin-bottom: 0;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three .item_content,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one .item_content {
    margin-left: 0;
    flex-direction: column-reverse;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three .item_content img,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.one .item_content img {
    margin-left: 30px;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four .item_content,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two .item_content {
    margin-left: auto;
    margin-right: 30px;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.three .item_content {
    max-width: 298px;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four .item_content img,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two .item_content  img{
    margin-left: auto;
  }
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.four,
  .about_page .about_wrapper .auditory .auditory_block .auditory_item.two {
    margin-top: -58px;
  }
}