@charset "UTF-8";


h2 {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

#banner {
    background-color: #e2e1cf;
    padding-bottom: 160px;
}


h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
    margin: 40px 10%;
}

.more {
  position: relative;
  transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
}
.more::before,
.more::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  margin: auto;
  transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0;
}
.more::before {
  background: rgba(44, 57, 114, 0.6);
  width: 100%;
  height: 100%;
}
.more::after {
  color: #d7e2ff;
  content: "about";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
}
.more:hover::before,
.more:hover::after {
  opacity: 1;
}
.more:hover::after {
  letter-spacing: 0.1em;
}
.more:hover {
  transform: scale(0.9);
}