.develop_img {
  width: 100%;
}

.develop_top {
  display: flex;
  justify-content: center;
  color: #333;
  font-weight: bold;
  font-size: 32px;
  width: 1200px;
  margin-top: 90px;
}


.develop_bottom {
  font-size: 16px;
  font-weight: 300;
  color: #969696;
  text-align: center;
  width: 1200px;
  margin-top: 10px;
}

.develop_box {
  margin: 10px;
  width: 411px;
  height: 411px;
  box-shadow: 0px 8px 36px 2px rgba(209, 209, 209, 0.75);
  border-radius: 10px;
  margin-bottom: 141px;
}

.develop_content {
  display: flex;
  width: 1200px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.develop_year {
  font-weight: bold;
  font-size: 30px;
  color: #33333A;
}

.develop_target {
  color: #33333A;
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
  display: inline-block;
  transform: translate(-4px, -2px);
}

.develop .introduce {
  margin: 0px 32px 57px 40px;
  font-size: 14px;
  color: #595959;
  font-weight: bold;
}

.develop_title {
  padding: 30px 0px 0px 42px;
}

.develop .timeline {
  border-right: 2px dashed #97979A;
  height: 1545px;
  margin-top: 78px;
  width: 0
}

.develop_left {
  margin-top: 68px;
}

.develop_right {
  margin-top: 329px;
}

.develop_navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 113px;
  height: 328px;
}

.develop .triangle-right {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-left: 26px solid #fff;
  border-bottom: 13px solid transparent;
  transform: translate(411px, -100px);
}

.develop .triangle-left {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid #fff;
  border-bottom: 13px solid transparent;
  transform: translate(-26px, -100px);
}

.develop .container_dot1 {
  position: relative;
  width: 100px;
  height: 100px;
  transform: translate(-50px, 131px);
}

.develop .container_dot2 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 5px auto;
  transform: translate(-50px, 286px);
}

.develop .container_dot3 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 5px auto;
  transform: translate(-50px, 472px);
}

.develop .container_dot4 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 5px auto;
  transform: translate(-50px, 626px);
}

.develop .container_dot5 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 5px auto;
  transform: translate(-50px, 812px);
}

.develop .container_dot6 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 5px auto;
  transform: translate(-50px, 969px);
}

.develop .dot1 {
  -webkit-animation: wateranimate 4s 3s ease-out infinite;
  animation: wateranimate 4s 3s ease-out infinite;
}

.develop .dot2 {
  -webkit-animation: wateranimate 4s 2s ease-out infinite;
  animation: wateranimate 4s 2s ease-out infinite
}

.develop .dot3 {
  -webkit-animation: wateranimate 4s 1s ease-out infinite;
  animation: wateranimate 4s 1s ease-out infinite;
}

.develop .dot4 {
  -webkit-animation: wateranimate 4s 0s ease-out infinite;
  animation: wateranimate 4s 0s ease-out infinite;
}

.develop .img_title {
  margin: 0px 5px;
}




@-webkit-keyframes wateranimate {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

@keyframes wateranimate {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

.develop .dot1,
.develop .dot2,
.develop .dot3,
.develop .dot4 {
  padding: 20%;
  position: absolute;
  left: 30%;
  top: 30%;
  border: 1px solid #5C5C5C;
  box-shadow: 0 0 120px 30px #5C5C5C inset;
  border-radius: 100%;
  z-index: 1;
  opacity: 0;
}

.develop .timeline_right {
  display: flex;
  justify-content: center;
  align-content: flex-end;
  color: #9D9D9D;
  font-size: 16px;
  margin: 25px 0px;
}

.develop .timeline_right:hover {
  color: #10BBB8 !important;
}

.develop .timeline_dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #F2F2F2;
  border-radius: 50%;
  margin: 6px 10px 0px 0px;
}


.develop .dot_switch {
  background: #10BBB8 !important;
  color: #10BBB8 !important;
}

.develop .hr {
  border: 1px solid #9D9D9D;
  height: 305px;
  display: flex;
  z-index: -9;
  transform: translate(9px, -27px);
}