@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate(-120px, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes StaffBgFadeInRight {
  from {
    transform: translate3d(100%, 0, 0);
  }
  20% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftTop {
  from {
    opacity: 0;
    transform: translate(-100%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes talentFadeInLeftBottom {
  from {
    transform: translate(-300px, 147px);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes talentFadeInDown {
  from {
    transform: translate(15px, -124px);
  }
  20% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes talentTitleFadeInDown {
  from {
    opacity: 0;
    transform: translate(0, -100px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes talentFadeInRightBottom {
  from {
    opacity: 0;
    transform: translate3d(30px, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes talentSubtitleFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 0.32;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes salarySubtitleFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes staffSubtitleFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes noOpacity {
  from {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes talentSubtitleFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes salaryChartBarFadeInUp {
  from {
    transform: translate3d(0, 100px, 0);
  }
  30% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes salaryFadeInRightBottom {
  from {
    opacity: 0;
    transform: translate(100%, 50%);
  }
  10% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes talentPlayFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes staffFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes staffSubtitleFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -60px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes talentSubtitleFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes staffFadeInLeftTop {
  from {
    transform: translate(-130px, -60px);
  }
  20% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes staffWrapChild {
  from {
    opacity: 0;
    transform: translate(0, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes leadershipFadeInDown {
  from {
    transform: translate3d(0, -110px, 0);
  }
  15% {
    opacity: 0;
  }
  96% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leadershipFadeInUp {
  from {
    transform: translate3d(0, 50%, 0);
  }
  15% {
    opacity: 0;
  }
  96% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leadershipFadeInRight {
  from {
    transform: translate3d(70px, 0, 0);
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leadershipWrapChild {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInLeftBottom {
  from {
    opacity: 0;
    transform: translate(-130px, 60px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes staffFadeInLeftBottom {
  from {
    opacity: 0;
    transform: translate(-130px, 60px);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fadeInRightBottom {
  from {
    opacity: 0;
    transform: translate(100%, 50%);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes zoomIn {
  63% {
    transform: scale(1.02);
  }
  90% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1.08);
  }
}
@keyframes wrapChild {
  from {
    opacity: 0;
    transform: translate(0, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes advantageTitle {
  from {
    transform: translate3d(0, 100px, 0);
    opacity: 0;
  }
  to {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}
@keyframes advantageCard {
  from {
    transform: translate3d(0, 200px, 0) rotateX(-10deg);
    opacity: 0;
  }
  to {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}
@keyframes advantageFadeUp {
  from {
    transform: translateY(-30px);
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  to {
    transform: translateY(-200px);
    opacity: 0;
  }
}
@keyframes advantageFadeDown {
  from {
    transform: translateY(50px);
    z-index: -1;
  }
  to {
    transform: translateY(-200);
    z-index: 1;
  }
}
@keyframes personaliseCard {
  from {
    transform: translate3d(-200px, 0, 0) scale(0.8) rotateY(20deg);
    opacity: 0;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
.salary-section {
  background: #fff;
}
.salary-section .salary-content {
  max-width: 1440px;
  margin: auto;
  padding: 184px 50px 170px 50px;
  overflow: hidden;
}
.salary-section .salary-content .salary-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.salary-section .salary-content .introduction-content {
  position: relative;
}
.salary-section .salary-content .introduction-content .subtitle {
  width: 523px;
  height: 32px;
  margin-bottom: 38px;
  background-image: url("../images/salary/subtitle.svg");
  background-repeat: no-repeat;
  opacity: 0;
}
.salary-section .salary-content .right-wrap {
  position: relative;
}
.salary-section .salary-content .right-wrap .charts-bar {
  opacity: 0;
  width: 494px;
  height: 306px;
  right: 127px;
  background-image: url("../images/salary/pic3.svg");
  background-position: -79px -63px;
  background-repeat: no-repeat;
  position: relative;
  box-shadow: 0 16px 80px 0 rgba(0, 0, 0, 0.05);
}
.salary-section .salary-content .right-wrap .point-up {
  opacity: 0;
  background-image: url("../images/salary/pic3_2.svg");
  background-repeat: no-repeat;
  height: 120px;
  left: 105px;
  position: absolute;
  width: 300px;
  top: 107px;
}
.salary-section .salary-content .right-wrap .point-down {
  opacity: 0;
  background-image: url("../images/salary/pic3_3.svg");
  background-repeat: no-repeat;
  height: 120px;
  left: 105px;
  position: absolute;
  width: 300px;
  bottom: 53px;
}
.salary-section .salary-content .right-wrap .charts-pie-parent {
  transition: transform 0.5s, opacity 0.43s;
  transform: translate(85px, -79px);
  width: 211px;
  height: 278px;
  position: absolute;
  top: -60px;
  right: 27.5px;
  opacity: 0;
}
.salary-section .salary-content .right-wrap .charts-pie {
  width: 100%;
  height: 100%;
  background-image: url("../images/salary/pic_4.svg");
  background-repeat: no-repeat;
  box-shadow: 0 16px 80px 0 rgba(0, 0, 0, 0.05);
  background-size: cover;
  border-radius: 8px;
}
.salary-section .salary-content .right-wrap .charts-tooltip {
  opacity: 0;
  width: 167px;
  height: 102px;
  position: absolute;
  bottom: -44px;
  right: 0;
  background-image: url("../images/salary/pic_5.svg");
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 34px 60px 0 rgba(68, 68, 68, 0.14);
  border-radius: 8px;
}

.animated .salary-section .salary-content {
  overflow: inherit;
}
.animated .salary-section .charts-bar {
  animation: salaryChartBarFadeInUp 0.35s ease-in-out forwards;
  animation-delay: 0.1s;
}
.animated .salary-section .point-up {
  animation: poinitFadeInDown 0.35s ease-in-out forwards;
  animation-delay: 0.35s;
}
.animated .salary-section .point-down {
  animation: poinitFadeInUp 0.35s ease-in-out forwards;
  animation-delay: 0.35s;
}
.animated .salary-section .charts-pie {
  animation: zoomIn 0.7s ease-in-out forwards;
}
.animated .salary-section .charts-tooltip {
  animation: salaryFadeInRightBottom 0.5s ease-in-out forwards;
}
.animated .salary-section .title {
  animation: talentFadeInDown 0.65s ease-in-out forwards;
}
.animated .salary-section .subtitle {
  animation: salarySubtitleFadeInDown 0.59s ease-in-out forwards;
}
.animated .salary-section .introduction {
  animation: talentSubtitleFadeInUp 0.59s ease-in-out forwards;
}
.animated .salary-section .check-video {
  animation: talentPlayFadeInUp 0.6s ease-in-out forwards;
}
.animated .salary-section .charts-pie-parent {
  transform: translate(0, 0) !important;
  opacity: 1 !important;
}

@keyframes poinitFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes poinitFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/*# sourceMappingURL=salary.css.map */
