/*---------- ↓ hover three_btn_box时，背景虚线 ----------*/
#solution .three_btn_box img.circleDashed {
  width: 105px;
  height: 105px;
  margin-top: -53px;
  margin-left: -52px;
  opacity: 1;
  /*filter: alpha(opacity:100);*/
  animation: dashedCircle 7s linear infinite;
  -webkit-animation: dashedCircle 7s linear infinite;
  -ms-animation: dashedCircle 7s linear infinite;
  -moz-animation: dashedCircle 7s linear infinite;
  -o-animation: dashedCircle 7s linear infinite;
  /* Safari 和 Chrome */
}
/*---------- ↓ hover three_btn_box时，标题文字 ----------*/
#solution .three_btn_box div.circleWords {
  margin-top: -10px;
  margin-left: 20px;
  width: 80px;
  height: 20px;
  animation: wordToRight 0.1s 1 forwards linear;
  -webkit-animation: wordToRight 0.1s 1 forwards linear;
  -ms-animation: wordToRight 0.1s 1 forwards linear;
  /* Safari 和 Chrome */
}
/*---------- ↓ hover three_btn_box时，标题文字 ----------*/
@keyframes wordToRight {
  0% {
    width: 80px;
    height: 20px;
    margin-top: -10px;
    color: rgba(255, 255, 255, 0.5);
  }
  100% {
    height: 20px;
    margin-top: -10px;
    width: 80px;
    left: 80px;
  }
}
@-moz-keyframes wordToRight {
  0% {
    width: 80px;
    height: 20px;
    margin-top: -10px;
    color: rgba(255, 255, 255, 0.5);
  }
  100% {
    height: 20px;
    margin-top: -10px;
    width: 80px;
    left: 80px;
  }
}
@-webkit-keyframes wordToRight {
  0% {
    width: 80px;
    height: 20px;
    margin-top: -10px;
    color: rgba(255, 255, 255, 0.5);
  }
  100% {
    height: 20px;
    margin-top: -10px;
    width: 80px;
    left: 80px;
  }
}
@-o-keyframes wordToRight {
  0% {
    width: 80px;
    height: 20px;
    margin-top: -10px;
    color: rgba(255, 255, 255, 0.5);
  }
  100% {
    height: 20px;
    margin-top: -10px;
    width: 80px;
    left: 80px;
  }
}
/*------------------------------------- ↓ 虚线转圈动画  --------------------------------------------*/
@keyframes dashedCircle {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
}
@-moz-keyframes dashedCircle {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
}
@-o-keyframes dashedCircle {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
}
@-webkit-keyframes dashedCircle {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
}
@-ms-keyframes dashedCircle {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  }
}
/*------------------------- ↓ 左边两行字  向右移动并透明，再由右边移动到左边，期间再由透明到显示  -------------------------*/
.up_words_move {
  animation: wordsMoveToRight 1.5s forwards ease;
  -webkit-animation: wordsMoveToRight 1.5s forwards ease;
}
/*------- wordsMoveToRight 动画  -------*/
@keyframes wordsMoveToRight {
  50% {
    margin-right: -30px;
    opacity: 0;
  }
  100% {
    margin-right: 14px;
    opacity: 1;
  }
}
@-moz-keyframes wordsMoveToRight {
  50% {
    margin-right: -30px;
    opacity: 0;
  }
  100% {
    margin-right: 14px;
    opacity: 1;
  }
}
@-webkit-keyframes wordsMoveToRight {
  50% {
    margin-right: -30px;
    opacity: 0;
  }
  100% {
    margin-right: 14px;
    opacity: 1;
  }
}
@-o-keyframes wordsMoveToRight {
  50% {
    margin-right: -30px;
    opacity: 0;
  }
  100% {
    margin-right: 14px;
    opacity: 1;
  }
}
/*------------------------- ↓ 左边横线hr 先向右移动并透明，再由右边移动到左边，期间再由透明到显示   -------------------------*/
.hr_move {
  animation: hrMoveToRight 1.4s ease 0.2s forwards;
  -webkit-animation: hrMoveToRight 1.4s ease 0.2s forwards;
}
/*------- hrMoveToRight 动画  -------*/
@keyframes hrMoveToRight {
  50% {
    right: -140px;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}
@-moz-keyframes hrMoveToRight {
  50% {
    right: -140px;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}
@-webkit-keyframes hrMoveToRight {
  50% {
    right: -140px;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}
@-o-keyframes hrMoveToRight {
  50% {
    right: -140px;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}
/*------------------------- ↓ 中间图标盒子 center_bg_icon_box 先 透明 再 显示  -------------------------*/
.bg_icon_box_disappear {
  animation: bg_icon_disapear 1s ease forwards;
  -webkit-animation: bg_icon_disapear 1s ease forwards;
}
/*------- bg_icon_disapear 动画  -------*/
@keyframes bg_icon_disapear {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes bg_icon_disapear {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes bg_icon_disapear {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes bg_icon_disapear {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*------------------------- inside 光环 收缩  -------------------------*/
.circle_inside_shrink {
  animation: insideShrink 1.4s ease forwards;
  -webkit-animation: insideShrink 1.4s ease forwards;
}
/*------- insideShrink 动画  -------*/
@keyframes insideShrink {
  50% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes insideShrink {
  50% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes insideShrink {
  50% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes insideShrink {
  50% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*------------------------- outside 光环 收缩  -------------------------*/
.circle_outside_shrink {
  animation: outsideShrink 1.8s ease forwards;
  /*耗时最长的动画，与index.js中oneTimeAnimate()的定时器配合使用*/
  -webkit-animation: outsideShrink 1.8s ease forwards;
}
/*------- outsideShrink 动画  -------*/
@keyframes outsideShrink {
  50% {
    transform: scale(0.58);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes outsideShrink {
  50% {
    transform: scale(0.58);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes outsideShrink {
  50% {
    transform: scale(0.58);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes outsideShrink {
  50% {
    transform: scale(0.58);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*------------------------- lawyer中 lawyer_move_box 移动到中间  -------------------------*/
.court_run_to_center {
  animation: courtRunToCenter 1s linear forwards;
  -webkit-animation: courtRunToCenter 1s linear forwards;
  -ms-animation: courtRunToCenter 1s linear forwards;
  -moz-animation:courtRunToCenter 1s linear forwards;
  -o-animation:courtRunToCenter 1s linear forwards;
}
/*------- courtRunToCenter 动画  -------*/
@keyframes courtRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  75% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  100% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
}
@-moz-keyframes courtRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  75% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  100% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
}
@-webkit-keyframes courtRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  75% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  100% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
}
@-o-keyframes courtRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  75% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
  100% {
    left: 98px;
    top: 318px;
    opacity: 1;
  }
}
/*------------------------- judicial中 judicial_move_box 移动到中间  -------------------------*/
.judicial_run_to_center {
  animation:judicialRunToCenter 1s linear forwards;
  -webkit-animation: judicialRunToCenter 1s linear forwards;
}
/*------- judicialRunToCenter 动画  -------*/
@keyframes judicialRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  75% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  100% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
}
@-moz-keyframes judicialRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  75% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  100% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
}
@-webkit-keyframes judicialRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  75% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  100% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
}
@-o-keyframes judicialRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  75% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
  100% {
    left: -229px;
    top: 262px;
    opacity: 1;
  }
}
/*------------------------- government中 gov_move_box 移动到中间  -------------------------*/
.gov_run_to_center {
  animation: govRunToCenter 1s linear forwards;
  -webkit-animation: govRunToCenter 1s linear forwards;
}
/*------- govRunToCenter 动画  -------*/
@keyframes govRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  75% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  100% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
}
@-moz-keyframes govRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  75% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  100% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
}
@-webkit-keyframes govRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  75% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  100% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
}
@-o-keyframes govRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  75% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
  100% {
    left: 202px;
    top: -253px;
    opacity: 1;
  }
}/*------------------------- business中 business_move_box 移动到中间  -------------------------*/
.business_run_to_center {
  animation: businessRunToCenter 1s linear forwards;
  -webkit-animation: businessRunToCenter 1s linear forwards;
}
/*------- businessRunToCenter 动画  -------*/
@keyframes businessRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  75% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  100% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
}
@-moz-keyframes businessRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  75% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  100% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
}
@-webkit-keyframes businessRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  75% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  100% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
}
@-o-keyframes businessRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  75% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
  100% {
    left: 318px;
    top: 64px;
    opacity: 1;
  }
}
/*------------------------- public中 public_move_box 移动到中间  -------------------------*/
.public_run_to_center {
  animation: publicRunToCenter 1s linear forwards;
  -webkit-animation: publicRunToCenter 1s linear forwards;
}
/*------- publicRunToCenter 动画  -------*/
@keyframes publicRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  75% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  100% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
}
@-moz-keyframes publicRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  75% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  100% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
}
@-webkit-keyframes publicRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  75% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  100% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
}
@-o-keyframes publicRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  75% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
  100% {
    left: -345px;
    top: -56px;
    opacity: 1;
  }
}
/*------------------------- industry中 industry_move_box 移动到中间  -------------------------*/
.industry_run_to_center {
  animation: industryRunToCenter 1s linear forwards;
  -webkit-animation: industryRunToCenter 1s linear forwards;
}
/*------- industryRunToCenter 动画  -------*/
@keyframes industryRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  75% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  100% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
}
@-moz-keyframes industryRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  75% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  100% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
}
@-webkit-keyframes industryRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  75% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  100% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
}
@-o-keyframes industryRunToCenter {
  0% {
    opacity: 1;
  }
  50% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  75% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
  100% {
    left: -130px;
    top: -305px;
    opacity: 1;
  }
}
/*------------------------- ↓ 各btn中 波浪wave特效  -------------------------*/
/*---- ↓ court ----*/
.wave01 {
  animation: waveAction 1s linear 1s forwards;
  -webkit-animation: waveAction 1s linear 1s forwards;
}
.wave02 {
  animation: waveAction 1s linear 1.3s forwards;
  -webkit-animation: waveAction 1s linear 1.3s forwards;
}
/*---- ↓ judicial----*/
.wave03 {
  animation: waveAction 1s linear 2s forwards;
  -webkit-animation: waveAction 1s linear 2s forwards;
}
.wave04 {
  animation: waveAction 1s linear 2.3s forwards;
  -webkit-animation: waveAction 1s linear 2.3s forwards;
}
/*---- ↓ gov ----*/
.wave05 {
  animation: waveAction 1s linear forwards;
  -webkit-animation: waveAction 1s linear forwards;
}
.wave06 {
  animation: waveAction 1s linear 0.3s forwards;
  -webkit-animation: waveAction 1s linear 0.3s forwards;
}
/*---- ↓ business ----*/
.wave07 {
 animation: waveAction 1s linear 3s forwards;
  -webkit-animation: waveAction 1s linear 3s forwards;
}
.wave08 {
  animation: waveAction 1s linear 3.3s forwards;
  -webkit-animation: waveAction 1s linear 3.3s forwards;
}
/*---- ↓ public ----*/
.wave09 {
 animation: waveAction 1s linear 4s forwards;
  -webkit-animation: waveAction 1s linear 4s forwards;
}
.wave10 {
  animation: waveAction 1s linear 4.3s forwards;
  -webkit-animation: waveAction 1s linear 4.3s forwards;
}
/*---- ↓ industry ----*/
.wave11 {
 animation: waveAction 1s linear 5s forwards;
  -webkit-animation: waveAction 1s linear 5s forwards;
}
.wave12 {
  animation: waveAction 1s linear 5.3s forwards;
  -webkit-animation: waveAction 1s linear 5.3s forwards;
}

/*------- waveAction 动画  -------*/
@keyframes waveAction {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
@-moz-keyframes waveAction {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
@-webkit-keyframes waveAction {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
@-o-keyframes waveAction {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
/*------------------------- ↓ 左边描述区域中，下面三个方面three_sides 先向下移动并透明，最后回到原来位置  -------------------------*/
.three_sides_down {
  animation: threeSidesDown 0.9s ease forwards;
  -webkit-animation: threeSidesDown 0.9s ease forwards;
}
/*------- threeSidesDown 动画  -------*/
@keyframes threeSidesDown {
  0% {
    top: 440px;
  }
  99% {
    top: 495px;
    opacity: 0;
  }
  100% {
    top: 440px;
    opacity: 0;
  }
}
@-moz-keyframes threeSidesDown {
  0% {
    top: 440px;
  }
  99% {
    top: 495px;
    opacity: 0;
  }
  100% {
    top: 440px;
    opacity: 0;
  }
}
@-webkit-keyframes threeSidesDown {
  0% {
    top: 440px;
  }
  99% {
    top: 495px;
    opacity: 0;
  }
  100% {
    top: 440px;
    opacity: 0;
  }
}
@-o-keyframes threeSidesDown {
  0% {
    top: 440px;
  }
  99% {
    top: 495px;
    opacity: 0;
  }
  100% {
    top: 440px;
    opacity: 0;
  }
}
/*------------------------- ↓ 左边描述区域中，下面三个方面three_sides 先向下移动并透明，最后回到原来位置  -------------------------*/
.three_sides_up {
  animation: threeSidesUp 0.9s ease forwards;
  -webkit-animation: threeSidesUp 0.9s ease forwards;
}
/*------- threeSidesUp 动画  -------*/
@keyframes threeSidesUp {
  0% {
    top: 495px;
    opacity: 0;
  }
  99% {
    top: 440px;
    opacity: 1;
  }
  100% {
    top: 440px;
    opacity: 1;
  }
}
@-moz-keyframes threeSidesUp {
  0% {
    top: 495px;
    opacity: 0;
  }
  99% {
    top: 440px;
    opacity: 1;
  }
  100% {
    top: 440px;
    opacity: 1;
  }
}
@-webkit-keyframes threeSidesUp {
  0% {
    top: 495px;
    opacity: 0;
  }
  99% {
    top: 440px;
    opacity: 1;
  }
  100% {
    top: 440px;
    opacity: 1;
  }
}
@-o-keyframes threeSidesUp {
  0% {
    top: 495px;
    opacity: 0;
  }
  99% {
    top: 440px;
    opacity: 1;
  }
  100% {
    top: 440px;
    opacity: 1;
  }
}
/*------------------------- ↓ apply 左边小方块动画  -------------------------*/
.left_square_up {
  animation: leftSquareUp 1s forwards ease;
  -webkit-animation: leftSquareUp 1s forwards ease;
}
/*------- leftSquareUp 动画  -------*/
@keyframes leftSquareUp {
  0% {
    bottom: 221px;
  }
  100% {
    bottom: 450px;
    opacity: 1;
  }
}
@-moz-keyframes leftSquareUp {
  0% {
    bottom: 221px;
  }
  100% {
    bottom: 450px;
    opacity: 1;
  }
}
@-webkit-keyframes leftSquareUp {
  0% {
    bottom: 221px;
  }
  100% {
    bottom: 450px;
    opacity: 1;
  }
}
@-o-keyframes leftSquareUp {
  0% {
    bottom: 221px;
  }
  100% {
    bottom: 450px;
    opacity: 1;
  }
}
/*------------------------- ↓ apply 中间工厂动画  -------------------------*/
.center_factory_up {
  animation: centerFactoryUp 1s forwards ease;
  -webkit-animation: centerFactoryUp 1s forwards ease;
}
/*------- leftSquareUp 动画  -------*/
@keyframes centerFactoryUp {
  0% {
    padding-top: 66px;
  }
  100% {
    padding-top: 0;
    opacity: 1;
  }
}
@-moz-keyframes centerFactoryUp {
  0% {
    padding-top: 66px;
  }
  100% {
    padding-top: 0;
    opacity: 1;
  }
}
@-webkit-keyframes centerFactoryUp {
  0% {
    padding-top: 66px;
  }
  100% {
    padding-top: 0;
    opacity: 1;
  }
}
@-o-keyframes centerFactoryUp {
  0% {
    padding-top: 66px;
  }
  100% {
    padding-top: 0;
    opacity: 1;
  }
}
/*------------------------- ↓ apply 左边小方块动画  -------------------------*/
.right_square_up {
  animation: rightSquareUp 1s forwards ease;
  -webkit-animation: rightSquareUp 1s forwards ease;
}
/*------- rightSquareUp 动画  -------*/
@keyframes rightSquareUp {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 123px;
    opacity: 1;
  }
}
@-moz-keyframes rightSquareUp {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 123px;
    opacity: 1;
  }
}
@-webkit-keyframes rightSquareUp {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 123px;
    opacity: 1;
  }
}
@-o-keyframes rightSquareUp {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 123px;
    opacity: 1;
  }
}