@charset "UTF-8";
/*
 * File: index.scss
 * Project: scss
 * File Created: Wednesday, 25th July 2018 9:19:42 am
 * Author: 赵阳
 * -----
 */
html,
body {
  width: 100%;
  height: 100%; }

.content-wrapper {
  height: 100%;
  overflow: hidden; }

.content {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  background-size: 1920px 1080px;
  background: url(../images/bg.jpg) 0 0 no-repeat; }

.intro {
  position: absolute;
  top: 118px;
  left: 35px;
  width: 650px; }
  .intro .total-count {
    height: 185px;
    background: url(../images/total-bg.png) no-repeat center 0;
    background-size: 630px 185px; }
    .intro .total-count .total-top span {
      float: left;
      height: 55px;
      line-height: 55px;
      font-size: 26px;
      color: #0090ff;
      cursor: pointer; }
    .intro .total-count .total-top > span:first-child {
      margin: 0 270px 0 138px; }
    .intro .total-count .total-top span.act,
    .intro .total-count .total-top span:hover {
      color: #ffc528; }
  .intro .scroll-num {
    position: relative;
    z-index: 1;
    float: left;
    width: 50%;
    margin-top: -14px; }
    .intro .scroll-num .title {
      line-height: 59px;
      font-weight: bold;
      font-size: 25px;
      text-align: center; }
      .intro .scroll-num .title .unit {
        margin-left: 5px;
        font-size: 20px; }
    .intro .scroll-num .numbers {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0; }
      .intro .scroll-num .numbers .num-item {
        position: relative;
        box-sizing: border-box;
        margin: 0 9px;
        width: 43px;
        height: 58px;
        background: url(../images/number.png) 0 0 no-repeat;
        background-size: 43px 580px; }
        .intro .scroll-num .numbers .num-item::before {
          content: '';
          position: absolute;
          top: -1px;
          left: 0;
          z-index: -1;
          display: block;
          width: 43px;
          height: 71px;
          background: url(../images/num-bg.png) center center no-repeat; }
  .intro .intro-title {
    display: block;
    margin: 18px auto 10px; }
  .intro .words {
    width: 555px;
    margin: 0 auto;
    font-size: 22px;
    line-height: 50px;
    text-indent: 2em; }

.right-count .count {
  position: absolute;
  padding-top: 16px;
  width: 305px;
  height: 270px;
  background: url(../images/count.png) center top no-repeat;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .right-count .count:nth-child(1) {
    top: 162px;
    right: 196px;
    animation: itemFloatY 6s linear infinite; }
  .right-count .count:nth-child(2) {
    top: 311px;
    right: 371px;
    animation: itemFloatX 6s linear infinite; }
  .right-count .count:nth-child(3) {
    top: 311px;
    right: 17px;
    animation: itemFloatX 6s linear infinite reverse; }
  .right-count .count:nth-child(4) {
    top: 468px;
    right: 196px;
    animation: itemFloatY 6s linear infinite reverse; }
  .right-count .count h5 {
    padding-top: 20px;
    line-height: 68px;
    font-size: 26px;
    color: #67c3e2; }
  .right-count .count p {
    line-height: 38px;
    font-size: 18px; }
    .right-count .count p .num {
      font-size: 24px;
      color: #FFF607;
      vertical-align: sub; }

@keyframes itemFloatY {
  0%, 50%, 100% {
    transform: translateY(0); }
  25% {
    transform: translateY(15px); }
  75% {
    transform: translateY(-15px); } }
@keyframes itemFloatX {
  0%, 50%, 100% {
    transform: translateX(0); }
  25% {
    transform: translateX(15px); }
  75% {
    transform: translateX(-15px); } }
.flow {
  width: 100%;
  height: 100%;
  background: url(../images/flow-bg.png) left 516px bottom 9px no-repeat; }
  .flow .flow-item {
    position: absolute;
    padding-top: 29px;
    width: 350px;
    height: 85px;
    line-height: 59px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    text-shadow: 0 1px #7F3D01, 1px 0 #7F3D01, -1px 0 #7F3D01, 0 -1px #7F3D01;
    background-position: center center;
    background-repeat: no-repeat; }
  .flow .flow1 {
    left: 170px;
    bottom: 400px;
    background-image: url(../images/flow1.png); }
    .flow .flow1::after {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      background: url(../images/point.png) no-repeat;
      opacity: 0;
      animation: flow1 6s linear infinite;
      right: -20px;
      top: 30px; }
  .flow .flow2 {
    left: 195px;
    bottom: 310px;
    background-image: url(../images/flow2.png); }
 /*    .flow .flow2::after {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      background: url(../images/point.png) no-repeat;
      opacity: 0;
      animation: flow2 6s linear infinite;
      right: -20px;
      top: 35px; } */
  .flow .flow3 {
    width: 461px;
    height: 264px;
    left: 739px;
    bottom: 316px;
    padding-top: 210px;
    background-image: url(../images/flow3.png); }
    .flow .flow3::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 49px;
      background: url(../images/arrow.png) no-repeat;
      opacity: 0;
      left: 220px;
      top: 108px;
      animation: flow4 3s linear infinite; }
  .flow .flow5 {
    left: 793px;
    top: 442px;
    background-image: url(../images/flow5.png); }
    .flow .flow5::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 49px;
      background: url(../images/arrow.png) no-repeat;
      opacity: 0;
      left: 166px;
      top: -30px;
      animation: flow5 3s linear infinite; }
  .flow .flow6 {
    left: 793px;
    top: 196px;
    background-image: url(../images/flow6.png); }
  .flow .arrow {
    position: absolute;
    background-position: 0 0;
    background-repeat: no-repeat; }
    .flow .arrow:nth-child(1) {
      width: 40px;
      height: 39px;
      left: 737px;
      bottom: 139px;
      background-image: url(../images/arrow1.png);
      animation: arrow1 6s infinite linear; }
    .flow .arrow:nth-child(2) {
      width: 33px;
      height: 44px;
      left: 820px;
      bottom: 113px;
      background-image: url(../images/arrow2.png);
      animation: arrow2 6s infinite linear; }
    .flow .arrow:nth-child(3) {
      width: 23px;
      height: 49px;
      left: 945px;
      bottom: 105px;
      animation: arrow3 6s infinite linear;
      background-image: url(../images/arrow3.png); }
    .flow .arrow:nth-child(4) {
      width: 23px;
      height: 49px;
      left: 972px;
      bottom: 59px;
      animation: arrow4 6s infinite linear;
      background-image: url(../images/arrow4.png); }
    .flow .arrow:nth-child(5) {
      width: 26px;
      height: 48px;
      right: 872px;
      bottom: 127px;
      animation: arrow5 6s infinite linear;
      background-image: url(../images/arrow5.png); }
    .flow .arrow:nth-child(6) {
      width: 31px;
      height: 46px;
      right: 822px;
      bottom: 85px;
      animation: arrow6 6s infinite linear;
      background-image: url(../images/arrow6.png); }
    .flow .arrow:nth-child(7) {
      width: 33px;
      height: 44px;
      right: 825px;
      bottom: 134px;
      animation: arrow7 6s infinite linear;
      background-image: url(../images/arrow7.png); }
    .flow .arrow:nth-child(8) {
      width: 35px;
      height: 43px;
      right: 765px;
      bottom: 127px;
      animation: arrow8 6s infinite linear;
      background-image: url(../images/arrow8.png); }
    .flow .arrow:nth-child(9) {
      width: 41px;
      height: 38px;
      right: 650px;
      bottom: 95px;
      animation: arrow9 6s infinite linear;
      background-image: url(../images/arrow9.png); }
  .flow .title {
    position: absolute;
    left: 645px;
    bottom: 43px;
    width: 332px;
    height: 57px;
    background: url(../images/map-title.png) center top no-repeat;
    text-align: center;
    line-height: 50px;
    font-size: 26px;
    font-weight: bold;
    text-shadow: 0 1px #7F3D01, 1px 0 #7F3D01, -1px 0 #7F3D01, 0 -1px #7F3D01; }

@keyframes flow1 {
  0% {
    right: -20px;
    top: 30px;
    opacity: 1; }
  20% {
    right: -150px;
    top: 30px; }
  30% {
    right: -150px;
    top: 118px; }
  50% {
    right: -270px;
    top: 118px; }
  70% {
    right: -150px;
    top: 118px; }
  80% {
    right: -150px;
    top: 30px; }
  100% {
    right: -20px;
    top: 30px;
    opacity: 1; } }
@keyframes flow2 {
  0% {
    right: -20px;
    top: 33px;
    opacity: 1; }
  20% {
    right: -150px;
    top: 33px; }
  30% {
    right: -150px;
    top: -53px; }
  50% {
    right: -270px;
    top: -53px; }
  70% {
    right: -150px;
    top: -53px; }
  80% {
    right: -150px;
    top: 33px; }
  100% {
    right: -20px;
    top: 33px;
    opacity: 1; } }
@keyframes flow4 {
  0% {
    top: 150px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 10px;
    opacity: 0; } }
@keyframes flow5 {
  0% {
    top: -10px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: -180px;
    opacity: 0; } }
@keyframes arrow1 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(180px, -160px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(-180px, 160px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow2 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(115px, -180px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(-115px, 180px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow3 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(15px, -190px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(-15px, 190px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow4 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(-8px, -230px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(8px, 230px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow5 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(-47px, -160px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(47px, 160px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow6 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(-87px, -200px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(87px, 200px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow7 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(-82px, -151px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(82px, 151px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow8 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(-141px, -170px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(141px, 170px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
@keyframes arrow9 {
  0% {
    transform: rotate(0) translate(0, 0);
    opacity: 0; }
  5% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    transform: rotate(0) translate(-237px, -200px);
    opacity: 0; }
  51% {
    transform: rotate(180deg) translate(237px, 200px);
    opacity: 0; }
  52% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(180deg) translate(0, 0); } }
.bottom-link {
  position: absolute;
  right: 15px;
  bottom: 10px;
  width: 310px;
  height: 270px;
  background: url(../images/bottom-link.png) no-repeat right bottom; }

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