@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap");
a:hover {
  color: #727679;
}

.psyWrapper {
  max-width: 1310px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 576px) {
  .psyWrapper {
    background-color: #F6F6F6;
  }
}

.psy {
  padding: 3.5rem 0 0.5rem;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy {
    padding: 0;
  }
}

.psy article {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
}

.psy__state {
  padding: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy__state {
    position: unset;
    padding: 0;
  }
}

.psy__state__img {
  width: 100%;
}

.psy__state__bgImg {
  height: 435px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy__state__bgImg {
    height: 250px;
  }
}

.psy__state__caption {
  padding: 1rem 0.5rem;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy__state__caption {
    padding: 1rem;
  }
}

.psy__state h2 {
  color: #4D4D4D;
  font-size: 2rem;
  font-weight: bold;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy__state h2 {
    font-size: 1.375rem;
  }
}

.psy__state p {
  color: #4D4D4D;
  font-size: 1.1875rem;
  letter-spacing: 0.9px;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy__state p {
    font-size: 1rem;
    letter-spacing: 0.28px;
  }
}

.psy .ans {
  padding: 1rem 1.5rem 1.5rem;
  position: relative;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ans {
    padding: 1.5rem;
  }
}

.psy .ans__option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.psy .ans__option span {
  color: #727679;
  font-size: 5rem;
  font-family: 'Nunito', sans-serif;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ans__option span {
    font-size: 3.5rem;
  }
}

.psy .ans__option__letter {
  margin: 0 2rem 0 0.5rem;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ans__option__letter {
    margin: 0 2rem;
  }
}

.psy .ans__option__title {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ans__option__title {
    font-size: 1.75rem;
    margin: 0 0.5rem;
  }
}

.psy .ans__content {
  text-align: left;
  letter-spacing: 0.19px;
  margin: -1rem 0 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ans__content {
    letter-spacing: 0.16px;
    margin: -0.5rem 0 0;
  }
}

.psy .ansBlock {
  color: #727679;
}

.psy .ansBlock.active .ans {
  padding: 1rem 1.5rem 1.5rem;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ansBlock.active .ans {
    padding: 1.5rem;
  }
}

.psy .ansBlock.active .ans__option__title {
  color: #EE7800;
  margin: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ansBlock.active .ans__option__title {
    margin: 0 0.5rem;
  }
}

.psy .ansBlock.active .ans__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.psy .ansBlock.active span {
  color: #EE7800;
  font-size: 6.5rem;
  font-family: 'Nunito', sans-serif;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ansBlock.active span {
    font-size: 4.5rem;
  }
}

.psy .ansBlock.active .ans__content {
  margin: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ansBlock.active .ans__content {
    margin: 0 0 1.5rem 0;
  }
}

.psy .ansBlock.active p {
  margin: 1rem 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .psy .ansBlock.active p {
    margin: 0;
  }
}

.psy .angle {
  width: 100%;
  height: 60px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}

.scMedia__block {
  width: 70%;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

@media (max-width: 576px) {
  .scMedia__block {
    padding: 1rem 0 2rem 0;
  }
}

.scMedia__list {
  background-color: transparent;
}
/*# sourceMappingURL=psy_test.css.map */