.banner {
  width: 100%;
  height: 500px;
  background: url(../../images/satelliteResources/banner.png) no-repeat center center;
  background-size: cover;
  color: #ffffff;
}
.banner h1 {
  width: 100%;
  height: 240px;
  text-align: center;
  font-size: 56px;
  font-family: siyuanb;
  padding-top: 160px;
}
.banner h3 {
  width: 100%;
  height: 60px;
  text-align: center;
  font-size: 20px;
  line-height: 36px;
}
.banner h5 {
  width: 100%;
  height: 60px;
  text-align: center;
  font-size: 16px;
  line-height: 36px;
}
.banner p {
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-align: center;
  padding-top: 30px;
}
.banner p button {
  width: 180px;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center;
  height: 28px;
  line-height: 28px;
  background-color: #1b60d5;
  color: #ffffff;
  border-radius: 5px;
  font-size: 14px;
}

.main-wrap {
  width: 100%;
  background-color: #000000;
  padding: 100px 0;
}
.main-wrap .main {
  width: 1200px;
  margin: 0 auto 80px;
}
.main-wrap .main .satelite-text {
  margin-bottom: 70px;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  text-indent: 40px;
}
.main-wrap .main .satelite-text > p {
  text-align: left;
  color: #ffffff;
}
.main-wrap .main .table {
  color: #ffffff;
}
.main-wrap .main .satelite-list {
  height: 335px;
}
.main-wrap .main .satelite-list ul {
  display: flex;
}
.main-wrap .main .satelite-list ul li {
  text-align: center;
  width: 25%;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(1) {
  animation: run-1 1s 0.14s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(2) {
  animation: run-2 1s 0.28s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(3) {
  animation: run-3 1s 0.42s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(4) {
  animation: run-4 1s 0.56s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(5) {
  animation: run-5 1s 0.7s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(6) {
  animation: run-6 1s 0.84s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(7) {
  animation: run-7 1s 0.98s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(8) {
  animation: run-8 1s 1.12s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(9) {
  animation: run-9 1s 1.26s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(10) {
  animation: run-10 1s 1.4s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(11) {
  animation: run-11 1s 1.54s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(12) {
  animation: run-12 1s 1.68s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(13) {
  animation: run-13 1s 1.82s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(14) {
  animation: run-14 1s 1.96s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(15) {
  animation: run-15 1s 2.1s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(1) .child-wrap.active span:nth-child(16) {
  animation: run-16 1s 2.24s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(1) {
  animation: run2-1 1s 0.08s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(2) {
  animation: run2-2 1s 0.16s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(3) {
  animation: run2-3 1s 0.24s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(4) {
  animation: run2-4 1s 0.32s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(5) {
  animation: run2-5 1s 0.4s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(6) {
  animation: run2-6 1s 0.48s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(7) {
  animation: run2-7 1s 0.56s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(2) .child-wrap.active span:nth-child(8) {
  animation: run2-8 1s 0.64s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(3) .child-wrap.active span:nth-child(1) {
  animation: run3-1 1s 0.16s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(3) .child-wrap.active span:nth-child(2) {
  animation: run3-2 1s 0.32s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(3) .child-wrap.active span:nth-child(3) {
  animation: run3-3 1s 0.48s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(3) .child-wrap.active span:nth-child(4) {
  animation: run3-4 1s 0.64s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(4) .child-wrap.active span:nth-child(1) {
  animation: run4-1 1s 0.1s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(4) .child-wrap.active span:nth-child(2) {
  animation: run4-2 1s 0.2s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(4) .child-wrap.active span:nth-child(3) {
  animation: run4-3 1s 0.3s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(4) .child-wrap.active span:nth-child(4) {
  animation: run4-4 1s 0.4s linear forwards;
}
.main-wrap .main .satelite-list ul li:nth-child(4) .child-wrap.active span:nth-child(5) {
  animation: run4-5 1s 0.5s linear forwards;
}
.main-wrap .main .satelite-list ul li h4 {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 30px;
}
.main-wrap .main .satelite-list ul li .child-wrap.active span {
  z-index: 3;
}
.main-wrap .main .satelite-list ul li span {
  display: inline-block;
  width: 34px;
  height: 34px;
  background-color: #ffffff;
}
.main-wrap .main .satelite-list ul .three .child-wrap {
  width: 150px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: flex-start;
}
.main-wrap .main .satelite-list ul .three .child-wrap span {
  margin: 0 20px 20px 0;
}
.main-wrap .main .satelite-list ul .three .child-wrap span:nth-child(3n+0) {
  margin-right: 0;
}
.main-wrap .main .satelite-list ul .four .child-wrap {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: left;
}
.main-wrap .main .satelite-list ul .four .child-wrap span {
  margin: 0 20px 20px 0;
}
.main-wrap .main .satelite-list ul .four .child-wrap span:nth-child(4n+0) {
  margin-right: 0;
}
.main-wrap .main .scroll-main {
  height: 800px;
  display: flex;
  overflow: auto;
}
.main-wrap .main .scroll-main::-webkit-scrollbar {
  display: none;
}
.main-wrap .main .scroll-main .left {
  height: 800px;
  width: 50%;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.main-wrap .main .scroll-main .left .animation_wrap {
  width: 540px;
  height: 540px;
  background: url("../../images/satelliteResources/animation_bg.jpg") no-repeat center center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 2s;
  opacity: 0;
}
.main-wrap .main .scroll-main .left .animation_wrap .item {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #ffffff;
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(1) {
  position: absolute;
  animation: runRound1 13s 0s linear infinite;
  transform-origin: 216px 0;
}
@keyframes runRound1 {
  from {
    transform: translate(-216px) rotate(0deg);
  }
  to {
    transform: translate(-216px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(2) {
  position: absolute;
  animation: runRound2 6s -2s linear infinite;
  transform-origin: 192px 0;
}
@keyframes runRound2 {
  from {
    transform: translate(-192px) rotate(0deg);
  }
  to {
    transform: translate(-192px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(3) {
  position: absolute;
  animation: runRound3 14s -6s linear infinite;
  transform-origin: 176px 0;
}
@keyframes runRound3 {
  from {
    transform: translate(-176px) rotate(0deg);
  }
  to {
    transform: translate(-176px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(4) {
  position: absolute;
  animation: runRound4 8s -6s linear infinite;
  transform-origin: 165px 0;
}
@keyframes runRound4 {
  from {
    transform: translate(-165px) rotate(0deg);
  }
  to {
    transform: translate(-165px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(5) {
  position: absolute;
  animation: runRound5 7s 2s linear infinite;
  transform-origin: 173px 0;
}
@keyframes runRound5 {
  from {
    transform: translate(-173px) rotate(0deg);
  }
  to {
    transform: translate(-173px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(6) {
  position: absolute;
  animation: runRound6 15s -6s linear infinite;
  transform-origin: 159px 0;
}
@keyframes runRound6 {
  from {
    transform: translate(-159px) rotate(0deg);
  }
  to {
    transform: translate(-159px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(7) {
  position: absolute;
  animation: runRound7 11s -1s linear infinite;
  transform-origin: 173px 0;
}
@keyframes runRound7 {
  from {
    transform: translate(-173px) rotate(0deg);
  }
  to {
    transform: translate(-173px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(8) {
  position: absolute;
  animation: runRound8 10s 3s linear infinite;
  transform-origin: 120px 0;
}
@keyframes runRound8 {
  from {
    transform: translate(-120px) rotate(0deg);
  }
  to {
    transform: translate(-120px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(9) {
  position: absolute;
  animation: runRound9 14s 3s linear infinite;
  transform-origin: 186px 0;
}
@keyframes runRound9 {
  from {
    transform: translate(-186px) rotate(0deg);
  }
  to {
    transform: translate(-186px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(10) {
  position: absolute;
  animation: runRound10 7s -1s linear infinite;
  transform-origin: 182px 0;
}
@keyframes runRound10 {
  from {
    transform: translate(-182px) rotate(0deg);
  }
  to {
    transform: translate(-182px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(11) {
  position: absolute;
  animation: runRound11 16s -6s linear infinite;
  transform-origin: 152px 0;
}
@keyframes runRound11 {
  from {
    transform: translate(-152px) rotate(0deg);
  }
  to {
    transform: translate(-152px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(12) {
  position: absolute;
  animation: runRound12 9s -2s linear infinite;
  transform-origin: 145px 0;
}
@keyframes runRound12 {
  from {
    transform: translate(-145px) rotate(0deg);
  }
  to {
    transform: translate(-145px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(13) {
  position: absolute;
  animation: runRound13 11s -5s linear infinite;
  transform-origin: 210px 0;
}
@keyframes runRound13 {
  from {
    transform: translate(-210px) rotate(0deg);
  }
  to {
    transform: translate(-210px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(14) {
  position: absolute;
  animation: runRound14 16s -4s linear infinite;
  transform-origin: 201px 0;
}
@keyframes runRound14 {
  from {
    transform: translate(-201px) rotate(0deg);
  }
  to {
    transform: translate(-201px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(15) {
  position: absolute;
  animation: runRound15 6s -3s linear infinite;
  transform-origin: 167px 0;
}
@keyframes runRound15 {
  from {
    transform: translate(-167px) rotate(0deg);
  }
  to {
    transform: translate(-167px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(16) {
  position: absolute;
  animation: runRound16 10s 3s linear infinite;
  transform-origin: 202px 0;
}
@keyframes runRound16 {
  from {
    transform: translate(-202px) rotate(0deg);
  }
  to {
    transform: translate(-202px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(17) {
  position: absolute;
  animation: runRound17 11s 3s linear infinite;
  transform-origin: 171px 0;
}
@keyframes runRound17 {
  from {
    transform: translate(-171px) rotate(0deg);
  }
  to {
    transform: translate(-171px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(18) {
  position: absolute;
  animation: runRound18 16s 1s linear infinite;
  transform-origin: 211px 0;
}
@keyframes runRound18 {
  from {
    transform: translate(-211px) rotate(0deg);
  }
  to {
    transform: translate(-211px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(19) {
  position: absolute;
  animation: runRound19 8s 0s linear infinite;
  transform-origin: 191px 0;
}
@keyframes runRound19 {
  from {
    transform: translate(-191px) rotate(0deg);
  }
  to {
    transform: translate(-191px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(20) {
  position: absolute;
  animation: runRound20 10s -2s linear infinite;
  transform-origin: 210px 0;
}
@keyframes runRound20 {
  from {
    transform: translate(-210px) rotate(0deg);
  }
  to {
    transform: translate(-210px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(21) {
  position: absolute;
  animation: runRound21 13s 0s linear infinite;
  transform-origin: 200px 0;
}
@keyframes runRound21 {
  from {
    transform: translate(-200px) rotate(0deg);
  }
  to {
    transform: translate(-200px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(22) {
  position: absolute;
  animation: runRound22 10s 2s linear infinite;
  transform-origin: 162px 0;
}
@keyframes runRound22 {
  from {
    transform: translate(-162px) rotate(0deg);
  }
  to {
    transform: translate(-162px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(23) {
  position: absolute;
  animation: runRound23 14s 2s linear infinite;
  transform-origin: 191px 0;
}
@keyframes runRound23 {
  from {
    transform: translate(-191px) rotate(0deg);
  }
  to {
    transform: translate(-191px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(24) {
  position: absolute;
  animation: runRound24 11s -2s linear infinite;
  transform-origin: 148px 0;
}
@keyframes runRound24 {
  from {
    transform: translate(-148px) rotate(0deg);
  }
  to {
    transform: translate(-148px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(25) {
  position: absolute;
  animation: runRound25 9s 1s linear infinite;
  transform-origin: 166px 0;
}
@keyframes runRound25 {
  from {
    transform: translate(-166px) rotate(0deg);
  }
  to {
    transform: translate(-166px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(26) {
  position: absolute;
  animation: runRound26 12s 2s linear infinite;
  transform-origin: 134px 0;
}
@keyframes runRound26 {
  from {
    transform: translate(-134px) rotate(0deg);
  }
  to {
    transform: translate(-134px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(27) {
  position: absolute;
  animation: runRound27 15s -2s linear infinite;
  transform-origin: 148px 0;
}
@keyframes runRound27 {
  from {
    transform: translate(-148px) rotate(0deg);
  }
  to {
    transform: translate(-148px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item:nth-child(28) {
  position: absolute;
  animation: runRound28 12s -3s linear infinite;
  transform-origin: 134px 0;
}
@keyframes runRound28 {
  from {
    transform: translate(-134px) rotate(0deg);
  }
  to {
    transform: translate(-134px) rotate(360deg);
  }
}
.main-wrap .main .scroll-main .left .animation_wrap .item-team1-show {
  width: 10px;
  height: 10px;
  background-color: red;
}
.main-wrap .main .scroll-main .left .animation_wrap .item-team2-show {
  width: 10px;
  height: 10px;
  background-color: blue;
}
.main-wrap .main .scroll-main .left .animation_wrap .item-team3-show {
  width: 10px;
  height: 10px;
  background-color: green;
}
.main-wrap .main .scroll-main .left .animation_wrap .item-team4-show {
  width: 10px;
  height: 10px;
  background-color: yellow;
}
.main-wrap .main .scroll-main .right {
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.main-wrap .main .scroll-main .right .graphic {
  padding-left: 100px;
  box-sizing: border-box;
  color: #ffffff;
  margin-bottom: 40px;
}
.main-wrap .main .scroll-main .right .graphic .left-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-wrap .main .scroll-main .right .graphic .text {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.main-wrap .main .scroll-main .right .graphic .text .text-left h4 {
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
}
.main-wrap .main .scroll-main .right .graphic .text .text-left h4.btn1 {
  width: 48px;
  background: url("../../images/satelliteResources/btn-bg.png") no-repeat center center;
  background-size: cover;
}
.main-wrap .main .scroll-main .right .graphic .text .text-left h4.btn2 {
  width: 130px;
  background: url("../../images/satelliteResources/btn-bg2.png") no-repeat center center;
  background-size: cover;
}
.main-wrap .main .scroll-main .right .graphic .text .text-left h4.btn3 {
  width: 210px;
  background: url("../../images/satelliteResources/btn-bg3.png") no-repeat center center;
  background-size: cover;
}
.main-wrap .main .scroll-main .right .graphic .text .text-left h3 {
  font-size: 24px;
  font-family: siyuanb;
  margin: 20px 0 10px 0;
  color: #3b84ff;
}
.main-wrap .main .scroll-main .right .graphic .text .text-left p {
  font-size: 14px;
  color: #3b84ff;
}
.main-wrap .main .scroll-main .right .graphic .text .text-img {
  text-align: center;
  flex: 1 0;
}
.main-wrap .main .scroll-main .right .graphic .table {
  margin-top: 15px;
}
.main-wrap .main .scroll-main .right .graphic .table .table-line {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}
.main-wrap .main .scroll-main .right .graphic .table .table-line .table-line-title {
  display: inline-block;
  width: 80px;
  text-align: justify;
}
.main-wrap .main .scroll-main .right .graphic .table .table-line .table-line-title i {
  display: inline-block; /*padding-left: 100%;*/
  width: 100%;
}
.main-wrap .main .scroll-main .right .graphic .table .table-line .label {
  display: inline-block;
  height: 100%;
  width: 80px;
  text-align: justify;
  vertical-align: top;
}
.main-wrap .main .scroll-main .right .graphic .table .table-line .label::after {
  display: inline-block;
  width: 100%;
  content: "";
  height: 0;
}
.main-wrap .main .scroll-main .right .graphic .table .table-line .table-line-des {
  vertical-align: middle;
}
.main-wrap .main .scroll-main .right .graphic .table .table-line .table-line-des > span {
  font-family: siyuanb;
  color: #3b84ff;
}
.main-wrap .main .scroll-main .right .graphic .satellite-tables {
  margin-top: 10px;
  margin-bottom: 16px;
  color: #3b84ff;
}
.main-wrap .main .scroll-main .right .graphic .satellite-tables .table-line {
  font-size: 16px;
  height: 32px;
  line-height: 32px;
}
.main-wrap .main .scroll-main .right .graphic .satellite-tables .table-line .label {
  display: inline-block;
  height: 100%;
  width: 146px;
  text-align: justify;
  vertical-align: middle;
  font-family: siyuanb;
}
.main-wrap .main .scroll-main .right .graphic .satellite-tables .table-line .table-line-des {
  vertical-align: middle;
}
.main-wrap .main .scroll-main .right .graphic40 {
  margin-bottom: 40px;
}
.main-wrap .main .scroll-main .right .graphic100 {
  margin-bottom: 100px;
}
.main-wrap .main .scroll-main .right .graphic200 {
  margin-bottom: 200px;
}
.main-wrap .main .scroll-main .right .graphic350 {
  margin-bottom: 350px;
}
.main-wrap .fukuan {
  width: 1200px;
  margin: 100px auto 0;
}
.main-wrap .fukuan1 .right {
  color: #ffffff;
  width: 50%;
  margin-left: 30px;
  font-family: siyuanb;
  text-align: right;
}
.main-wrap .fukuan1 .right h4 {
  font-size: 36px;
  vertical-align: bottom;
}
.main-wrap .fukuan1 .right h4 span {
  vertical-align: bottom;
}
.main-wrap .fukuan1 .right h3 {
  font-size: 48px;
}
.main-wrap .fukuan1 .right a {
  color: #3b84ff;
  display: block;
  text-align: right;
  font-size: 24px;
  text-decoration: underline;
  margin-top: 40px;
}
.main-wrap .fukuan2 {
  margin-top: 80px;
}
.main-wrap .fukuan2 .fukuan-main {
  display: flex;
}
.main-wrap .fukuan2 .fukuan-main .left {
  flex: 1 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.main-wrap .fukuan2 .fukuan-main .left .fukuan2-bg {
  position: absolute;
  transition: all 1s;
  z-index: 2;
}
.main-wrap .fukuan2 .fukuan-main .left .fukuan2-bg2 {
  position: absolute;
  z-index: 1;
  transform: translate(-67px, 95px) scale(1.8);
}
.main-wrap .fukuan2 .fukuan-main .left .border {
  border: 1px dashed #999999;
  position: absolute;
  width: 0px;
  height: 0px;
}
.main-wrap .fukuan2 .fukuan-main .left .border1 {
  z-index: 3;
}
.main-wrap .fukuan2 .fukuan-main .left .border2 {
  z-index: 3;
}
.main-wrap .fukuan2 .fukuan-main .left .border3 {
  z-index: 3;
}
.main-wrap .fukuan2 .fukuan-main .left .border4 {
  z-index: 3;
}
.main-wrap .fukuan2 .fukuan-main .right {
  width: 50%;
  margin-left: 110px;
}
.main-wrap .fukuan2 .fukuan-main .right .title {
  color: #ffffff;
}
.main-wrap .fukuan2 .fukuan-main .right .title p {
  width: 65%;
  font-size: 18px;
  line-height: 32px;
  text-align: right;
  margin-right: 15px;
  padding-top: 18px;
}
.main-wrap .fukuan2 .fukuan-main .right .title h4 {
  width: 35%;
  height: 80px;
  line-height: 80px;
  font-family: siyuanb;
  font-size: 80px;
  vertical-align: middle;
  color: #3b84ff;
}
.main-wrap .fukuan2 .fukuan-main .right .des-list {
  color: #ffffff;
}
.main-wrap .fukuan2 .fukuan-main .right .des-list li {
  margin-top: 25px;
  opacity: 0;
}
.main-wrap .fukuan2 .fukuan-main .right .des-list li .item-left {
  text-align: right;
  width: 30%;
  vertical-align: middle;
}
.main-wrap .fukuan2 .fukuan-main .right .des-list li .item-left h4 {
  font-size: 42px;
}
.main-wrap .fukuan2 .fukuan-main .right .des-list li .item-left p {
  display: inline-block;
  width: 40px;
  font-size: 20px;
  border-top: 2px solid #ffffff;
  padding-top: 3px;
}
.main-wrap .fukuan2 .fukuan-main .right .des-list li .item-right {
  width: 70%;
  font-size: 18px;
  vertical-align: middle;
  padding: 10px 0 0 30px;
  line-height: 30px;
}
.main-wrap .fukuan3 {
  margin-top: 100px;
}
.main-wrap .fukuan3 .left {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-wrap .fukuan3 .left .map-bg {
  transform: translate(20px, -8px);
}
.main-wrap .fukuan3 .left .border {
  border: 1px dashed #999999;
  position: absolute;
  width: 0px;
  height: 0px;
}
.main-wrap .fukuan3 .right {
  color: #ffffff;
  width: 50%;
  text-align: center;
  margin-left: 130px;
  overflow: hidden;
}
.main-wrap .fukuan3 .right .title {
  width: 480px;
  margin: 0 auto;
}
.main-wrap .fukuan3 .right .title p {
  color: #3b84ff;
}
.main-wrap .fukuan3 .right .title h4 {
  margin: 20px 0;
}
.main-wrap .fukuan3 .right .table .width-line {
  text-align: left;
  opacity: 0;
}
.main-wrap .fukuan3 .right .table .width-line:nth-child(1) {
  opacity: 1;
}
.main-wrap .fukuan3 .right .table .width-line .model {
  height: 36px;
  line-height: 36px;
  display: inline-block;
  border-bottom: 1px solid #333333;
  font-size: 14px;
}
.main-wrap .fukuan3 .right .table .width-line .model-one {
  width: 132px;
}
.main-wrap .fukuan3 .right .table .width-line .model-two {
  width: 200px;
}
.main-wrap .fukuan3 .right .table .width-line .model-three {
  width: 110px;
  text-align: center;
}

@keyframes run-1 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(161px, 815px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-2 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(131px, 785px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-3 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(98px, 752px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-4 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(296px, 950px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-5 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(290px, 944px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-6 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(209px, 863px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-7 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(47px, 701px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-8 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(203px, 857px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-9 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(44px, 698px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-10 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(38px, 692px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-11 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(251px, 905px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-12 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(113px, 767px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-13 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(134px, 788px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-14 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(149px, 803px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-15 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(8px, 662px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run-16 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(212px, 866px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run2-1 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-6px, 862px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run2-2 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-189px, 679px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run2-3 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-36px, 832px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run2-4 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-201px, 667px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run2-5 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-141px, 727px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run2-6 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-96px, 772px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run2-7 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-204px, 664px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run2-8 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-246px, 622px) scale(0.15);
    opacity: 0;
  }
}
@keyframes run3-1 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-475px, 538px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run3-2 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-442px, 549px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run3-3 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-406px, 561px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run3-4 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-394px, 565px) scale(0.3);
    opacity: 0;
  }
}
@keyframes run4-1 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-774px, 546px) scale(0.2);
    opacity: 0;
  }
}
@keyframes run4-2 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-768px, 552px) scale(0.2);
    opacity: 0;
  }
}
@keyframes run4-3 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-714px, 606px) scale(0.2);
    opacity: 0;
  }
}
@keyframes run4-4 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-567px, 753px) scale(0.2);
    opacity: 0;
  }
}
@keyframes run4-5 {
  from {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-645px, 675px) scale(0.2);
    opacity: 0;
  }
}
.fukuan-animation {
  animation: sac 1s linear forwards;
}

.fukuan-animation2 {
  animation: sac_back 0.5s linear forwards;
}

@keyframes sac {
  from {
    transform: translate(18px, -20px) scale(1);
  }
  to {
    transform: translate(18px, -20px) scale(0);
  }
}
@keyframes sac_back {
  from {
    transform: translate(-35px, 55px) scale(2);
  }
  to {
    transform: translate(-35px, 55px) scale(1);
  }
}