.home-fourth-section {
  text-align: center;
  min-height: 45vh;
  padding: 1.95em 0 1.25em 0;
  background: url(../img/4-map.png) no-repeat;

  .homepage-btn{
    margin-top:1.25em;
  }
  .fourth-main {
    margin: 1.25em auto;
  }
  .fourth-title {
    display: flex;
  }
  .fourth-main-title {
    width: 33%;
    margin-right: 4.5%;
  }

  .code-box {
    position: relative;
    width: 62.5%;
    img {
      float: left;
      width: 32%;
    }
    &>img{
      max-width: 20vw;
    }
  }
  .code-box-action {
    width: 67%;
    height: 20.75em;
    border-radius: 1.25em;
  }
  .code-box-picture {
    position: relative;
    float: left;
    // background: url(../img/task.png) no-repeat;
    opacity: 0;
    img {
      width: 100%;
    }
  }

  .code-box-code {
    position: absolute;
    top: 6.25em;
    left: 10em;
    background: #fff;
    box-shadow: 0px 0px .25em .25em rgba(0, 0, 0, 0.06);
    opacity: 0;
  }

  .hadoopCode {
    border-radius: .3em;
    margin: .625em;
    background: #1c1c25;
    padding: 1.125em 1.25em;
    flex: 1;
    position: relative;
    li {
      display: flex;
      flex-wrap: wrap;
      font-size: .75em;
      font-weight: 500;
      line-height: 2.1em;
      color: #e1e1e1;
    }
  }

  pre {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
      Liberation Mono, monospace;
    word-break: break-all;
    overflow: initial;
    margin-bottom: 0;
    .codenum {
      display: inline-block;
      width: .95em;
      text-align: left;
      margin-right: .95em;
    }
    .code-green {
      color: #00fa30;
    }
    .code-red {
      color: #ff5058;
    }
    .code-blue {
      color: #05cfc8;
    }
  }
  .code-input{
    position: relative;
  }
  .animation-is-typing::before {
    position: absolute;
    top: 0;
    right: -0.8em;
    bottom: 0;
    display: block;
    height: 100%;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 1em;
    line-height: 1em;
    content: "▊";
  }
  .word-item {
    opacity: 0;
  }
  .js-type-letters{
    opacity: 0;
  }
  

  .fourth-projects {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 1.25em 0;
    opacity: 0;
  }

  .project-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 15.875em;
    height: 12em;
    border: .1em dashed #517df1;
    border-radius: 0.375em;

    .fourth-item-img {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.5em;
      height: 4.5em;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0px 0px .5em .5em rgba(38, 118, 255, 0.04);
    }

    .fourth-item-circle {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: turnCircle infinite 10s linear;
    }
    .fourth-item-circle::before,
    .fourth-item-circle::after {
      content: "";
      position: absolute;
      width: .5em;
      height: .5em;
      border-radius: 50%;
      background: linear-gradient(-45deg, #0949ff 0, #03bdff 100%);
    }
    .fourth-item-circle::before {
      top: -.25em;
      left: 2em;
    }
    .fourth-item-circle::after {
      left: 2em;
      bottom: -.25em;
    }

    .fourth-item-title {
      margin: 0.5em auto 0;
      font-family: PingFangSC-Medium;
      font-size: 1.25em;
      color: #0a1255;
      font-weight: 500;
    }

    .fourth-item-des {
      font-family: PingFangSC-Medium;
      font-size: 1em;
      color: #777988;
      line-height: 2em;
      font-weight: 500;
    }
  }

  .project-item:nth-child(2) {
    margin-top: 5em;
    border-color: #df0757;
    .fourth-item-circle {
      animation: turnCircle2 infinite 10s linear;
    }
    .fourth-item-circle::before,
    .fourth-item-circle::after {
      background: linear-gradient(-45deg, #df0757 0, #ffa38d 100%);
    }
  }

  .project-item:nth-child(3) {
    margin-top: 10em;
    border-color: #00ffa4;
    .fourth-item-circle::before,
    .fourth-item-circle::after {
      background: linear-gradient(-45deg, #00ffa4 0, #f2ffa4 100%);
    }
  }

  .project-item:nth-child(4) {
    margin-top: 8.75em;
    border-color: #8b5ff0;
    .fourth-item-circle {
      animation: turnCircle2 infinite 10s linear;
    }
    .fourth-item-circle::before,
    .fourth-item-circle::after {
      background: linear-gradient(-45deg, #8b5ff0 0, #fe86ff 100%);
    }
  }

  .activeCode {
    .code-box-picture {
      animation: taskPicture 1s 1 forwards;
    }
    .code-box-code {
      animation: taskCode 1s 1 0.75s forwards;
    }
    .hadoopCode .code-content {
      margin: 0;
      animation: showBackgroud 16s 2s infinite;
    }

    .animation-is-typing::before {
      animation: BlinkingCursor .8s infinite;
    }

    .js-type-letters{
      animation: BlinkingCursor-1 16s infinite;
    }

    .word-item {
      animation: show 16s infinite;
    }
    &.fourth-projects {
      animation: taskPicture 1s 1 1s forwards;
    }
  }

  @keyframes show {
    0% {
      opacity: 0;
    }
    1% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    71% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes BlinkingCursor-1 {
    0% {
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    4% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
    
  }

  @keyframes BlinkingCursor {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes showBackgroud {
    0% {
      opacity: 1;
    }
    71% {
      opacity: 1;
    }
    72% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes taskPicture {
    0% {
      opacity: 0;
      top: 35vh;
    }
    100% {
      opacity: 1;
      top: 0;
    }
  }

  @keyframes taskCode {
    0% {
      opacity: 0;
      top: 35vh;
    }
    100% {
      opacity: 1;
    }
  }

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

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


