.main-top {
  padding: 16px 0;
}
.main-top .main-top-wrap {
  position: relative;
  min-height: 377px;
}
.main-top-wrap .mt-left {
  padding-right: 564px;
}
.main-top-wrap .mt-right {
  position: absolute;
  right: -7px;
  top: 0;
}
.mt-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}
.mt-left .main-top-title {
  font-size: 52px;
  color: var(--mailmechanic-dark);
  line-height: 62px;
  font-weight: bold;
  overflow: hidden;
}
.mt-left .mt-form {
  display: flex;
}
.mt-info {
  color: #666;
  font-size: 16px;
  line-height: 22px;
  max-width: 500px;
  font-family: "Inter", Arial, Tahoma, sans-serif;
}
.postbox {
  position: relative;
  border-bottom: 2px solid #c7b4a2;
  margin-top: -46px;
  width: 541px;
}
.postbox:before {
  content: "";
  display: block;
  background-image: url(../../assets/images/postback.svg);
  width: 522px;
  height: 392px;
  position: absolute;
  bottom: 0;
  z-index: -1;
  left: 30px;
}
.postbox img {
  display: block;
}
.postbox .pbx {
  height: 421px;
  width: 432px;
  position: relative;
  left: 71px;
}
.postbox .pbx svg {
  display: block;
}

@media only screen and (max-width: 1160px) {
  .main-top-wrap .mt-left {
    padding-right: 490px;
  }
  .postbox {
    width: 500px;
  }
}

@media only screen and (max-width: 1060px) {
  .main-top .main-top-wrap {
    min-height: 0;
  }
  .main-top-wrap .mt-left {
    padding-right: 0;
    text-align: center;
  }
  .main-top-wrap .mt-right {
    position: static;
  }
  .mt-left .mt-form {
    justify-content: center;
  }
  .mt-info {
    margin: 0 auto;
  }
  .postbox {
    width: 541px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 840px) {
  .main-top {
    padding-top: 46px;
  }
}

@media only screen and (max-width: 760px) {
  .mt-left .main-top-title {
    font-size: 48px;
    line-height: 52px;
  }
}

@media only screen and (max-width: 600px) {
  .mt-left {
    gap: 20px;
  }
  .main-top-wrap .mt-left {
    text-align: left;
    margin-bottom: 10px;
  }
  .mt-left .mt-form {
    flex-wrap: wrap;
  }
  .mt-info {
    margin: 0;
  }
  .postbox {
    width: 100%;
  }
  .postbox .pbx {
    width: 100%;
    height: auto;
    left: 0;
  }
  .postbox .pbx svg {
    width: 85%;
    height: auto;
    max-height: 421px;
    margin: 0 auto -1px;
  }
  .postbox:before {
    left: 0;
    width: 103%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    max-height: 392px;
  }
  .main-top {
    padding-top: 36px;
  }
}

/* Animations */
.c1 {
  transform-origin: center;
  transform-box: fill-box;
}
.c2 {
  transform-origin: center;
  transform-box: fill-box;
}
.c5 {
  transform-origin: center;
  transform-box: fill-box;
}
.c6 {
  transform-origin: 18px 18px;
  transform-box: fill-box;
}
.start .c7 {
  visibility: hidden;
}
.c8 {
  transform-origin: center;
  transform-box: fill-box;
}
.c9 {
  position: absolute;
  right: 113px;
  top: 34px;
  visibility: hidden;
}
.b1 {
  visibility: hidden;
}
.b2 {
  visibility: hidden;
}
.b3 {
  visibility: hidden;
}
.b4 {
  visibility: hidden;
}
.b5 {
  visibility: hidden;
}
.b6 {
  visibility: hidden;
}
.b7 {
  visibility: hidden;
}
.b8 {
  visibility: hidden;
}
.b9 {
  visibility: hidden;
}
.b10 {
  visibility: hidden;
}
.b11 {
  visibility: hidden;
}
.b12 {
  visibility: hidden;
}
.b13 {
  visibility: hidden;
}
.b14 {
  visibility: hidden;
}
.b15 {
  visibility: hidden;
}
.b16 {
  visibility: hidden;
}
.start .c1,
.start .c2 {
  animation: r1 2.1s linear forwards;
}
.start .c4,
.start .c5 {
  animation: r2 2.1s linear forwards;
}
.start .c6 {
  animation: r3 2.1s linear forwards;
}
.start .c9,
.start .m1 {
  animation: r4 0.1s linear forwards;
}
.start .c8 {
  animation: start 2.1s linear forwards;
}
.start .b1 {
  animation: r4 0.14s linear;
}
.start .b2 {
  animation: r4 0.14s 0.14s linear;
}
.start .b3 {
  animation: r4 0.14s 0.28s linear;
}
.start .b4 {
  animation: r4 0.14s 0.42s linear;
}
.start .b5 {
  animation: r4 0.14s 0.56s linear;
}
.start .b6 {
  animation: r4 0.14s 0.7s linear;
}
.start .b7 {
  animation: r4 0.14s 0.84s linear;
}
.start .b8 {
  animation: r4 0.14s 0.98s linear;
}
.start .b9 {
  animation: r4 0.14s 1.12s linear;
}
.start .b10 {
  animation: r4 0.14s 1.26s linear;
}
.start .b11 {
  animation: r4 0.14s 1.4s linear;
}
.start .b12 {
  animation: r4 0.14s 1.54s linear;
}
.start .b13 {
  animation: r4 0.14s 1.68s linear;
}
.start .b14 {
  animation: r4 0.14s 1.82s linear;
}
.start .b15 {
  animation: r4 0.14s 1.96s linear;
}
.start .b16 {
  animation: r4 0.14s 2.1s linear forwards;
}

@keyframes r1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes r2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes r3 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-90deg);
  }
}

@keyframes r4 {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

@keyframes start {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}