@charset "UTF-8";
.downway {
  width: 28px;
  height: 20%;
  position: absolute;
  background: none;
  z-index: 1;
  left: 48.4%;
}

.downway .inner {
  -webkit-animation: charging-1 3s infinite ease-in-out;
          animation: charging-1 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway .inner:nth-child(2) {
  margin: 0 0px;
  -webkit-animation: charging-2 3s infinite ease-in-out;
          animation: charging-2 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway .inner:nth-child(3) {
  -webkit-animation: charging-3 3s infinite ease-in-out;
          animation: charging-3 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway .inner:nth-child(4) {
  margin: 0px 0 0 0px;
  -webkit-animation: charging-4 3s infinite ease-in-out;
          animation: charging-4 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway .inner:nth-child(5) {
  margin: -2px 0 0 0px;
  -webkit-animation: charging-5 3s infinite ease-in-out;
          animation: charging-5 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway .inner:nth-child(6) {
  margin: -10px 0 0 0px;
  -webkit-animation: charging-6 3s infinite ease-in-out;
          animation: charging-6 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway .inner:nth-child(7) {
  margin: -23px 0 0 0px;
  -webkit-animation: charging-7 3s infinite ease-in-out;
          animation: charging-7 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway.goback {
  -webkit-animation: none;
          animation: none;
}

.downway.goback .inner {
  -webkit-animation: chargingalt-1 3s infinite ease-in-out;
          animation: chargingalt-1 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway.goback .inner:nth-child(2) {
  margin: 0 0px;
  -webkit-animation: chargingalt-2 3s infinite ease-in-out;
          animation: chargingalt-2 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway.goback .inner:nth-child(3) {
  -webkit-animation: chargingalt-3 3s infinite ease-in-out;
          animation: chargingalt-3 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway.goback .inner:nth-child(4) {
  margin: 0px 0 0 0px;
  -webkit-animation: chargingalt-4 3s infinite ease-in-out;
          animation: chargingalt-4 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway.goback .inner:nth-child(5) {
  margin: -2px 0 0 0px;
  -webkit-animation: chargingalt-5 3s infinite ease-in-out;
          animation: chargingalt-5 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway.goback .inner:nth-child(6) {
  margin: -10px 0 0 0px;
  -webkit-animation: chargingalt-6 3s infinite ease-in-out;
          animation: chargingalt-6 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.downway.goback .inner:nth-child(7) {
  margin: -23px 0 0 0px;
  -webkit-animation: chargingalt-7 3s infinite ease-in-out;
          animation: chargingalt-7 3s infinite ease-in-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

@-webkit-keyframes starttrans {
  0% {
    top: -35%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    top: 100%;
    opacity: 0.1;
  }
}

@keyframes starttrans {
  0% {
    top: -35%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    top: 100%;
    opacity: 0.1;
  }
}

.allways {
  top: 0;
  left: 0;
  height: 100%;
  position: absolute;
  margin-top: 0px;
  /*.tolucha{//control-六甲
            animation: gomobile-lucha 2500ms infinite ease-in-out;
        }*/
  /*.toluchaback{//control-六甲
            //background: url(../../image/gobackway.png) no-repeat;
            //animation: goback 2000ms infinite ease-in-out;  
           // animation: gomobile-lucha-back 2500ms infinite ease-in-out;
            
        }*/
  /*.tochangbin{
            //background: url(../../image/downway.png) no-repeat;
            //animation: go 2000ms infinite ease-in-out;
            //transform: rotate(90deg); 
            animation: gomobile-changbin 2500ms infinite ease-in-out;
        }
        .tochangbinback{
            background: url(../../image/gobackway.png) no-repeat;
            animation: goback 2000ms infinite ease-in-out;  
            //transform: rotate(270deg); 
            animation: gomobile-changbin-back 2500ms infinite ease-in-out;
        }*/
  /*.toyunganback{
            background: url(../../image/gobackway.png) no-repeat;
            //animation: goback 2000ms infinite ease-in-out;  
            transform: rotate(270deg); 
            animation: gomobile-yungan-back 2500ms infinite ease-in-out;
        }*/
}

.allways .toshalun, .allways .tolucha, .allways .tochangbin, .allways .toyungan {
  background: url(../../image/downway.png) no-repeat;
  width: 30px;
  height: 35px;
  position: absolute;
  z-index: 0;
}

.allways .goback {
  background: url(../../image/gobackway.png) no-repeat;
  width: 30px;
  height: 35px;
  position: absolute;
  z-index: 0;
}

.allways .toshalun, .allways .toshalunback {
  top: -35%;
  left: 48%;
}

.allways .tolucha, .allways .toluchaback {
  top: -35%;
  left: 30%;
}

.allways .tochangbin, .allways .tochangbinback {
  top: -35%;
  left: 47%;
}

.allways .toyungan, .allways .toyunganback {
  top: -35%;
  left: 47%;
}

@-webkit-keyframes gomobile-shalun {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  40% {
    top: 30%;
    left: 8%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 1;
  }
  55% {
    left: 8%;
    top: 30%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    top: 100%;
    left: 8%;
    opacity: 0.2;
  }
}

@keyframes gomobile-shalun {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  40% {
    top: 30%;
    left: 8%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 1;
  }
  55% {
    left: 8%;
    top: 30%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    top: 100%;
    left: 8%;
    opacity: 0.2;
  }
}

@-webkit-keyframes gomobile-shalun-back {
  0% {
    top: 100%;
    left: 8%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 8%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 8%;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes gomobile-shalun-back {
  0% {
    top: 100%;
    left: 8%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 8%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 8%;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes gomobile-lucha {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  40% {
    top: 30%;
    left: 35%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 1;
  }
  55% {
    left: 35%;
    top: 30%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    top: 100%;
    left: 35%;
    opacity: 0.2;
  }
}

@keyframes gomobile-lucha {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  40% {
    top: 30%;
    left: 35%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 1;
  }
  55% {
    left: 35%;
    top: 30%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    top: 100%;
    left: 35%;
    opacity: 0.2;
  }
}

@-webkit-keyframes gomobile-lucha-back {
  0% {
    top: 100%;
    left: 32%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 32%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 32%;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes gomobile-lucha-back {
  0% {
    top: 100%;
    left: 32%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 32%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 32%;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes gomobile-changbin {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  40% {
    top: 30%;
    left: 60%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  55% {
    left: 60%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: 100%;
    left: 60%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes gomobile-changbin {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  40% {
    top: 30%;
    left: 60%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  55% {
    left: 60%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: 100%;
    left: 60%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes gomobile-changbin-back {
  0% {
    top: 100%;
    left: 59%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 59%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 59%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes gomobile-changbin-back {
  0% {
    top: 100%;
    left: 59%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 59%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 59%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes gomobile-yungan {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  40% {
    top: 30%;
    left: 80%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  55% {
    left: 80%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: 100%;
    left: 80%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes gomobile-yungan {
  0% {
    top: -35%;
    left: 48%;
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    top: 30%;
    left: 48%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  40% {
    top: 30%;
    left: 80%;
  }
  50% {
    top: 30%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  55% {
    left: 80%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: 100%;
    left: 80%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes gomobile-yungan-back {
  0% {
    top: 100%;
    left: 80%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 80%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 80%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes gomobile-yungan-back {
  0% {
    top: 100%;
    left: 80%;
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  20% {
    left: 80%;
    top: 30%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    top: 30%;
    left: 80%;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: 1;
  }
  50% {
    top: 30%;
    left: 47%;
  }
  55% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  60% {
    top: 30%;
    left: 47%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    top: -35%;
    left: 47%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes gobackmobile {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes gobackmobile {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.areapower .allways .toshalun {
  -webkit-animation: gomobile-shalun 2200ms infinite ease-in-out;
          animation: gomobile-shalun 2200ms infinite ease-in-out;
}

.areapower .allways .tolucha {
  -webkit-animation: gomobile-lucha 2200ms infinite ease-in-out;
          animation: gomobile-lucha 2200ms infinite ease-in-out;
}

.areapower .allways .tochangbin {
  -webkit-animation: gomobile-changbin 2200ms infinite ease-in-out;
          animation: gomobile-changbin 2200ms infinite ease-in-out;
}

.areapower .allways .toyungan {
  -webkit-animation: gomobile-yungan 2200ms infinite ease-in-out;
          animation: gomobile-yungan 2200ms infinite ease-in-out;
}

.areapower .allways .toshalunback {
  -webkit-animation: gomobile-shalun-back 2200ms infinite ease-in-out;
          animation: gomobile-shalun-back 2200ms infinite ease-in-out;
}

.areapower .allways .toluchaback {
  -webkit-animation: gomobile-lucha-back 2200ms infinite ease-in-out;
          animation: gomobile-lucha-back 2200ms infinite ease-in-out;
}

.areapower .allways .tochangbinback {
  -webkit-animation: gomobile-changbin-back 2200ms infinite ease-in-out;
          animation: gomobile-changbin-back 2200ms infinite ease-in-out;
}

.areapower .allways .toyunganback {
  -webkit-animation: gomobile-yungan-back 2200ms infinite ease-in-out;
          animation: gomobile-yungan-back 2200ms infinite ease-in-out;
}

@media (min-width: 400px) {
  .areapower {
    /*.allways{
            //zoom: 0.75;
            .toshalun,.toshalunback{//control-沙崙
                top: -25%;
                left: 4%;
            }
            .tolucha,.toluchaback{//control-六甲
                top: -25%;
                left: 33%;
            }
            .tochangbin,.tochangbinback{//control-彰濱
                top: -25%;
                left: 49%;
            }
            .toyungan,.toyunganback{//永安
                top: -25%;
                left: 49%;
            }
        } */
  }
}

@media (min-width: 500px) {
  .areapower .allways {
    /*.toshalun,.toshalunback{//control-沙崙
                top: 0%;
                left: 14%;
            }
            .tolucha,.toluchaback{//control-六甲
                top: 0%;
                left: 37%;
            }
            .tochangbin,.tochangbinback{//control-彰濱
                top: 0%;
                left: 49%;
            }
            .toyungan,.toyunganback{//永安
                top: 0%;
                left: 49%;
            }*/
  }
}

@media (min-width: 600px) {
  .areapower .allways {
    /*.toshalun,.toshalunback{//control-沙崙
                top: 0%;
                left: 11%;
            }
            .tolucha,.toluchaback{//control-六甲
                top: 0%;
                left: 35%;
            }
            .tochangbin,.tochangbinback{//control-彰濱
                top: 0%;
                left: 48%;
            }
            .toyungan,.toyunganback{//永安
                top: 0%;
                left: 48%;
            }*/
  }
}

@media (min-width: 700px) {
  .areapower .allways {
    /*.toshalun,.toshalunback{//control-沙崙
                top: 0%;
                left: 18%;
            }
            .tolucha,.toluchaback{//control-六甲
                top: 0%;
                left: 38%;
            }
            .tochangbin,.tochangbinback{//control-彰濱
                top: 0%;
                left: 50%;
            }
            .toyungan,.toyunganback{//永安
                top: 0%;
                left: 50%;
            }*/
  }
}

@media (min-width: 768px) {
  .areapower .waybg {
    background: url(../../image/powerroad-mobile.png) no-repeat center 0;
    background-size: 80%;
  }
}

@media (min-width: 900px) {
  .areapower .allways {
    zoom: 1;
    /*height: 100%;
            .toshalun,.toshalunback{//control-沙崙
                top: 0%;
                left: 22%;
            }
            .tolucha,.toluchaback{//control-六甲
                top: 0%;
                left: 40%;
            }
            .tochangbin,.tochangbinback{//control-彰濱
                top: 0%;
                left: 50%;
            }
            .toyungan,.toyunganback{//永安
                top: 0%;
                left: 50%;
            }*/
  }
}

/*--電腦版路徑-------------------------------------*/
@-webkit-keyframes go {
  0% {
    opacity: 0;
    offset-distance: 80%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 1;
  }
  80% {
    offset-distance: 0%;
    opacity: 1;
  }
  100% {
    offset-distance: 0%;
    opacity: 0;
  }
}
@keyframes go {
  0% {
    opacity: 0;
    offset-distance: 80%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 1;
  }
  80% {
    offset-distance: 0%;
    opacity: 1;
  }
  100% {
    offset-distance: 0%;
    opacity: 0;
  }
}

@-webkit-keyframes goarrow2 {
  0% {
    opacity: 0;
    offset-distance: 90%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 1;
  }
  80% {
    offset-distance: 3%;
    opacity: 1;
  }
  100% {
    offset-distance: 3%;
    opacity: 0;
  }
}

@keyframes goarrow2 {
  0% {
    opacity: 0;
    offset-distance: 90%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 1;
  }
  80% {
    offset-distance: 3%;
    opacity: 1;
  }
  100% {
    offset-distance: 3%;
    opacity: 0;
  }
}

@-webkit-keyframes goarrow3 {
  0% {
    opacity: 0;
    offset-distance: 100%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 1;
  }
  80% {
    offset-distance: 6%;
    opacity: 1;
  }
  100% {
    offset-distance: 6%;
    opacity: 0;
  }
}

@keyframes goarrow3 {
  0% {
    opacity: 0;
    offset-distance: 100%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 1;
  }
  80% {
    offset-distance: 6%;
    opacity: 1;
  }
  100% {
    offset-distance: 6%;
    opacity: 0;
  }
}

@-webkit-keyframes goback {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }
  20% {
    opacity: 0.3;
  }
  40% {
  }
  60% {
    opacity: 0.5;
  }
  80% {
    offset-distance: 95%;
    opacity: 1;
  }
  100% {
    offset-distance: 95%;
    opacity: 0;
  }
}

@keyframes goback {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }
  20% {
    opacity: 0.3;
  }
  40% {
  }
  60% {
    opacity: 0.5;
  }
  80% {
    offset-distance: 95%;
    opacity: 1;
  }
  100% {
    offset-distance: 95%;
    opacity: 0;
  }
}

@-webkit-keyframes gobackarrow2 {
  0% {
    opacity: 0;
    offset-distance: 10%;
  }
  20% {
    opacity: 0.3;
  }
  40% {
  }
  60% {
    opacity: 0.75;
  }
  80% {
    offset-distance: 97%;
    opacity: 1;
  }
  100% {
    offset-distance: 97%;
    opacity: 0;
  }
}

@keyframes gobackarrow2 {
  0% {
    opacity: 0;
    offset-distance: 10%;
  }
  20% {
    opacity: 0.3;
  }
  40% {
  }
  60% {
    opacity: 0.75;
  }
  80% {
    offset-distance: 97%;
    opacity: 1;
  }
  100% {
    offset-distance: 97%;
    opacity: 0;
  }
}

@-webkit-keyframes gobackarrow3 {
  0% {
    opacity: 0;
    offset-distance: 20%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 0.8;
  }
  80% {
    offset-distance: 99%;
    opacity: 1;
  }
  100% {
    offset-distance: 99%;
    opacity: 0;
  }
}

@keyframes gobackarrow3 {
  0% {
    opacity: 0;
    offset-distance: 20%;
  }
  20% {
    opacity: 0.5;
  }
  40% {
  }
  60% {
    opacity: 0.8;
  }
  80% {
    offset-distance: 99%;
    opacity: 1;
  }
  100% {
    offset-distance: 99%;
    opacity: 0;
  }
}

@media (min-width: 1000px) {
  @-webkit-keyframes charging-1 {
    7%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-1 {
    7%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-2 {
    0%, 7% {
      opacity: 0;
    }
    14%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-2 {
    0%, 7% {
      opacity: 0;
    }
    14%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-3 {
    0%, 14% {
      opacity: 0;
    }
    21%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-3 {
    0%, 14% {
      opacity: 0;
    }
    21%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-4 {
    0%, 21% {
      opacity: 0;
    }
    28%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-4 {
    0%, 21% {
      opacity: 0;
    }
    28%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-5 {
    0%, 28% {
      opacity: 0;
    }
    35%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-5 {
    0%, 28% {
      opacity: 0;
    }
    35%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-6 {
    0%, 35% {
      opacity: 0;
    }
    42%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-6 {
    0%, 35% {
      opacity: 0;
    }
    42%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-7 {
    0%, 42% {
      opacity: 0;
    }
    50%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-7 {
    0%, 42% {
      opacity: 0;
    }
    50%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-8 {
    0%, 49% {
      opacity: 0;
    }
    56%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-8 {
    0%, 49% {
      opacity: 0;
    }
    56%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-9 {
    0%, 56% {
      opacity: 0;
    }
    63%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-9 {
    0%, 56% {
      opacity: 0;
    }
    63%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-10 {
    0%, 63% {
      opacity: 0;
    }
    70%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-10 {
    0%, 63% {
      opacity: 0;
    }
    70%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-11 {
    0%, 70% {
      opacity: 0;
    }
    77%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-11 {
    0%, 70% {
      opacity: 0;
    }
    77%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-12 {
    0%, 77% {
      opacity: 0;
    }
    84%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-12 {
    0%, 77% {
      opacity: 0;
    }
    84%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes charging-13 {
    0%, 84% {
      opacity: 0;
    }
    91%, 100% {
      opacity: 1;
    }
  }
  @keyframes charging-13 {
    0%, 84% {
      opacity: 0;
    }
    91%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-13 {
    7%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-13 {
    7%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-12 {
    0%, 7% {
      opacity: 0;
    }
    14%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-12 {
    0%, 7% {
      opacity: 0;
    }
    14%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-11 {
    0%, 14% {
      opacity: 0;
    }
    21%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-11 {
    0%, 14% {
      opacity: 0;
    }
    21%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-10 {
    0%, 21% {
      opacity: 0;
    }
    28%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-10 {
    0%, 21% {
      opacity: 0;
    }
    28%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-9 {
    0%, 28% {
      opacity: 0;
    }
    35%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-9 {
    0%, 28% {
      opacity: 0;
    }
    35%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-8 {
    0%, 35% {
      opacity: 0;
    }
    42%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-8 {
    0%, 35% {
      opacity: 0;
    }
    42%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-7 {
    0%, 42% {
      opacity: 0;
    }
    50%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-7 {
    0%, 42% {
      opacity: 0;
    }
    50%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-6 {
    0%, 49% {
      opacity: 0;
    }
    56%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-6 {
    0%, 49% {
      opacity: 0;
    }
    56%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-5 {
    0%, 56% {
      opacity: 0;
    }
    63%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-5 {
    0%, 56% {
      opacity: 0;
    }
    63%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-4 {
    0%, 63% {
      opacity: 0;
    }
    70%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-4 {
    0%, 63% {
      opacity: 0;
    }
    70%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-3 {
    0%, 70% {
      opacity: 0;
    }
    77%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-3 {
    0%, 70% {
      opacity: 0;
    }
    77%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-2 {
    0%, 77% {
      opacity: 0;
    }
    84%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-2 {
    0%, 77% {
      opacity: 0;
    }
    84%, 100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes chargingalt-1 {
    0%, 84% {
      opacity: 0;
    }
    91%, 100% {
      opacity: 1;
    }
  }
  @keyframes chargingalt-1 {
    0%, 84% {
      opacity: 0;
    }
    91%, 100% {
      opacity: 1;
    }
  }
  .inner {
    background: url(../../image/downway.png) no-repeat center center;
    height: 100%;
    width: 25px;
    float: left;
    opacity: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 2px;
  }
  .goback .inner {
    background: url(../../image/gobackway.png) no-repeat center center;
  }
  .areapower .shalunbuilding, .areapower .yuanbuilding {
    margin: -16% 0 0 0;
  }
  .areapower .waybg {
    margin: 0 auto;
    width: 53.5%;
    text-align: center;
    background: url(../../image/powerroad.png) no-repeat center 0;
  }
  .areapower .allways {
    position: relative;
    margin-top: -215px;
    /*.toshalun.arrow2{
                animation: goarrow2 2200ms infinite ease-in-out;
            }    
            .toshalun.arrow3{
                animation: goarrow3 2200ms infinite ease-in-out;
            }  */
    /*.toshalunback{
                animation: goback 2200ms infinite ease-in-out;
            }
            .toshalunback.arrow2{
                animation: gobackarrow2 2200ms infinite ease-in-out;
            }    
            .toshalunback.arrow3{
                animation: gobackarrow3 2200ms infinite ease-in-out;
            }    */
    /*.tolucha.arrow2{
                animation: goarrow2 2200ms infinite ease-in-out;
            }    
            .tolucha.arrow3{
                animation: goarrow3 2200ms infinite ease-in-out;
            }   */
    /*.toluchaback{
                animation: goback 2200ms infinite ease-in-out;
            }
            .toluchaback.arrow2{
                animation: gobackarrow2 2200ms infinite ease-in-out;
            }    
            .toluchaback.arrow3{
                animation: gobackarrow3 2200ms infinite ease-in-out;
            }   */
    /*.tochangbin.arrow2{
                animation: goarrow2 2200ms infinite ease-in-out;
            }    
            .tochangbin.arrow3{
                animation: goarrow3 2200ms infinite ease-in-out;
            }  */
    /*.tochangbinback{
                animation: goback 2200ms infinite ease-in-out;  
            }
            .tochangbinback.arrow2{
                animation: gobackarrow2 2200ms infinite ease-in-out;
            }    
            .tochangbinback.arrow3{
                animation: gobackarrow3 2200ms infinite ease-in-out;
            } */
    /*.toyungan.arrow2{
                animation: goarrow2 2200ms infinite ease-in-out;
            }    
            .toyungan.arrow3{
                animation: goarrow3 2200ms infinite ease-in-out;
            }   */
    /*.toyunganback{
                animation: goback 2200ms infinite ease-in-out;  
            }
            .toyunganback.arrow2{
                animation: gobackarrow2 2200ms infinite ease-in-out;
            }    
            .toyunganback.arrow3{
                animation: gobackarrow3 2200ms infinite ease-in-out;
            }   */
  }
  .areapower .allways .toshalun, .areapower .allways .toshalunback {
    offset-path: path("M1,156s384,14.84,384-82.75V0");
  }
  .areapower .allways .toshalun, .areapower .allways .toshalun.arrow2, .areapower .allways .toshalun.arrow3, .areapower .allways .toshalunback, .areapower .allways .toshalunback.arrow2, .areapower .allways .toshalunback.arrow3 {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    background: none;
  }
  .areapower .allways .toshalun {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    width: auto;
  }
  .areapower .allways .toshalun .inner {
    -webkit-animation: chargingalt-1 3s infinite ease-in-out;
            animation: chargingalt-1 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 1;
  }
  .areapower .allways .toshalun .inner:nth-child(2) {
    margin: 0 0px;
    -webkit-animation: chargingalt-2 3s infinite ease-in-out;
            animation: chargingalt-2 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun .inner:nth-child(3) {
    -webkit-animation: chargingalt-3 3s infinite ease-in-out;
            animation: chargingalt-3 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun .inner:nth-child(4) {
    margin: 0px 0 0 0px;
    -webkit-animation: chargingalt-4 3s infinite ease-in-out;
            animation: chargingalt-4 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun .inner:nth-child(5) {
    margin: 0px 0 0 0px;
    -webkit-animation: chargingalt-5 3s infinite ease-in-out;
            animation: chargingalt-5 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun .inner:nth-child(6) {
    margin: -2px 0 0 0px;
    -webkit-animation: chargingalt-6 3s infinite ease-in-out;
            animation: chargingalt-6 3s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .toshalun .inner:nth-child(7) {
    margin: -4px 0 0 0px;
    -webkit-animation: chargingalt-7 3s infinite ease-in-out;
            animation: chargingalt-7 3s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .toshalun .inner:nth-child(8) {
    margin: -7px 0 0 0px;
    -webkit-animation: chargingalt-8 3s infinite ease-in-out;
            animation: chargingalt-8 3s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .toshalun .inner:nth-child(9) {
    margin: -11px 0 0 0px;
    -webkit-animation: chargingalt-9 3s infinite ease-in-out;
            animation: chargingalt-9 3s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .toshalun .inner:nth-child(10) {
    margin: -16px 0 0 0px;
    -webkit-animation: chargingalt-10 3s infinite ease-in-out;
            animation: chargingalt-10 3s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .toshalun .inner:nth-child(11) {
    margin: -22px 0 0 0px;
    -webkit-animation: chargingalt-11 3s infinite ease-in-out;
            animation: chargingalt-11 3s infinite ease-in-out;
    -webkit-transform: rotate(71deg);
            transform: rotate(71deg);
  }
  .areapower .allways .toshalun .inner:nth-child(12) {
    margin: -29px 0 0 0px;
    -webkit-animation: chargingalt-12 3s infinite ease-in-out;
            animation: chargingalt-12 3s infinite ease-in-out;
    -webkit-transform: rotate(66deg);
            transform: rotate(66deg);
  }
  .areapower .allways .toshalun .inner:nth-child(13) {
    margin: -39px 0 0 0px;
    -webkit-animation: chargingalt-13 3s infinite ease-in-out;
            animation: chargingalt-13 3s infinite ease-in-out;
    -webkit-transform: rotate(56deg);
            transform: rotate(56deg);
  }
  .areapower .allways .toshalun.goback {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    width: auto;
  }
  .areapower .allways .toshalun.goback .inner {
    -webkit-animation: charging-1 2s infinite ease-in-out;
            animation: charging-1 2s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(2) {
    margin: 0 0px;
    -webkit-animation: charging-2 2s infinite ease-in-out;
            animation: charging-2 2s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(3) {
    -webkit-animation: charging-3 2s infinite ease-in-out;
            animation: charging-3 2s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(4) {
    margin: 0px 0 0 0px;
    -webkit-animation: charging-4 2s infinite ease-in-out;
            animation: charging-4 2s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(5) {
    margin: 0px 0 0 0px;
    -webkit-animation: charging-5 2s infinite ease-in-out;
            animation: charging-5 2s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(6) {
    margin: 0px 0 0 0px;
    -webkit-animation: charging-6 2s infinite ease-in-out;
            animation: charging-6 2s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(7) {
    margin: -2px 0 0 0px;
    -webkit-animation: charging-7 2s infinite ease-in-out;
            animation: charging-7 2s infinite ease-in-out;
    -webkit-transform: rotate(85deg);
            transform: rotate(85deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(8) {
    margin: -4px 0 0 0px;
    -webkit-animation: charging-8 2s infinite ease-in-out;
            animation: charging-8 2s infinite ease-in-out;
    -webkit-transform: rotate(85deg);
            transform: rotate(85deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(9) {
    margin: -8px 0 0 0px;
    -webkit-animation: charging-9 2s infinite ease-in-out;
            animation: charging-9 2s infinite ease-in-out;
    -webkit-transform: rotate(85deg);
            transform: rotate(85deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(10) {
    margin: -10px 0 0 0px;
    -webkit-animation: charging-10 2s infinite ease-in-out;
            animation: charging-10 2s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(11) {
    margin: -18px 0 0 0px;
    -webkit-animation: charging-11 2s infinite ease-in-out;
            animation: charging-11 2s infinite ease-in-out;
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(12) {
    margin: -28px 0 0 0px;
    -webkit-animation: charging-12 2s infinite ease-in-out;
            animation: charging-12 2s infinite ease-in-out;
    -webkit-transform: rotate(65deg);
            transform: rotate(65deg);
  }
  .areapower .allways .toshalun.goback .inner:nth-child(13) {
    margin: -40px 0 0 0px;
    -webkit-animation: charging-13 2s infinite ease-in-out;
            animation: charging-13 2s infinite ease-in-out;
    -webkit-transform: rotate(55deg);
            transform: rotate(55deg);
  }
  .areapower .allways .tolucha, .areapower .allways .toluchaback {
    offset-path: path("M294,209.23s91-74,91-134.09V0");
    background: none;
  }
  .areapower .allways .tolucha {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    width: 25%;
  }
  .areapower .allways .tolucha .inner {
    -webkit-animation: chargingalt-1 3s infinite ease-in-out;
            animation: chargingalt-1 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    width: 25px;
  }
  .areapower .allways .tolucha .inner:nth-child(2) {
    margin: 0 0px;
    -webkit-animation: chargingalt-2 3s infinite ease-in-out;
            animation: chargingalt-2 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .tolucha .inner:nth-child(3) {
    -webkit-animation: chargingalt-3 3s infinite ease-in-out;
            animation: chargingalt-3 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .tolucha .inner:nth-child(4) {
    margin: 0px 0 0 0px;
    -webkit-animation: chargingalt-4 3s infinite ease-in-out;
            animation: chargingalt-4 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .tolucha .inner:nth-child(5) {
    margin: -2px 0 0 0px;
    -webkit-animation: chargingalt-5 3s infinite ease-in-out;
            animation: chargingalt-5 3s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .tolucha .inner:nth-child(6) {
    margin: -10px 0 0 0px;
    -webkit-animation: chargingalt-6 3s infinite ease-in-out;
            animation: chargingalt-6 3s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .tolucha .inner:nth-child(7) {
    margin: -23px 0 0 0px;
    -webkit-animation: chargingalt-7 3s infinite ease-in-out;
            animation: chargingalt-7 3s infinite ease-in-out;
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  .areapower .allways .tolucha.goback {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  .areapower .allways .tolucha.goback .inner {
    -webkit-animation: charging-1 2s infinite ease-in-out;
            animation: charging-1 2s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .tolucha.goback .inner:nth-child(2) {
    margin: 5% 0 0 0;
    -webkit-animation: charging-2 1.8s infinite ease-in-out;
            animation: charging-2 1.8s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .tolucha.goback .inner:nth-child(3) {
    margin: 5% 0 0 0;
    -webkit-animation: charging-3 1.8s infinite ease-in-out;
            animation: charging-3 1.8s infinite ease-in-out;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .areapower .allways .tolucha.goback .inner:nth-child(4) {
    margin: 4.8% 0 0 0;
    -webkit-animation: charging-4 1.8s infinite ease-in-out;
            animation: charging-4 1.8s infinite ease-in-out;
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
  }
  .areapower .allways .tolucha.goback .inner:nth-child(5) {
    margin: 2% 0 0 0;
    -webkit-animation: charging-5 1.8s infinite ease-in-out;
            animation: charging-5 1.8s infinite ease-in-out;
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  .areapower .allways .tolucha.goback .inner:nth-child(6) {
    margin: -2% 0 0 0;
    -webkit-animation: charging-6 1.8s infinite ease-in-out;
            animation: charging-6 1.8s infinite ease-in-out;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  .areapower .allways .tolucha.goback .inner:nth-child(7) {
    margin: -7% 0 0 0;
    -webkit-animation: charging-7 1.8s infinite ease-in-out;
            animation: charging-7 1.8s infinite ease-in-out;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  .areapower .allways .tochangbin {
    offset-path: path("M476,209.23s-91-74-91-134.09V0");
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
    background: none;
  }
  .areapower .allways .tochangbin {
    -webkit-animation: none;
            animation: none;
    width: 25%;
  }
  .areapower .allways .tochangbin .inner {
    -webkit-animation: charging-1 3s infinite ease-in-out;
            animation: charging-1 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    width: 25px;
  }
  .areapower .allways .tochangbin .inner:nth-child(2) {
    margin: 0 0px;
    -webkit-animation: charging-2 3s infinite ease-in-out;
            animation: charging-2 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .tochangbin .inner:nth-child(3) {
    -webkit-animation: charging-3 3s infinite ease-in-out;
            animation: charging-3 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .tochangbin .inner:nth-child(4) {
    margin: 0px 0 0 0px;
    -webkit-animation: charging-4 3s infinite ease-in-out;
            animation: charging-4 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .tochangbin .inner:nth-child(5) {
    margin: -2px 0 0 0px;
    -webkit-animation: charging-5 3s infinite ease-in-out;
            animation: charging-5 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .tochangbin .inner:nth-child(6) {
    margin: -10px 0 0 0px;
    -webkit-animation: charging-6 3s infinite ease-in-out;
            animation: charging-6 3s infinite ease-in-out;
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
  .areapower .allways .tochangbin .inner:nth-child(7) {
    margin: -23px 0 0 0px;
    -webkit-animation: charging-7 3s infinite ease-in-out;
            animation: charging-7 3s infinite ease-in-out;
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
  .areapower .allways .tochangbin.goback {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
  }
  .areapower .allways .tochangbin.goback .inner {
    -webkit-animation: chargingalt-1 3s infinite ease-in-out;
            animation: chargingalt-1 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .tochangbin.goback .inner:nth-child(2) {
    margin: 0 0px;
    -webkit-animation: chargingalt-2 3s infinite ease-in-out;
            animation: chargingalt-2 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .tochangbin.goback .inner:nth-child(3) {
    -webkit-animation: chargingalt-3 3s infinite ease-in-out;
            animation: chargingalt-3 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .tochangbin.goback .inner:nth-child(4) {
    margin: 0px 0 0 0px;
    -webkit-animation: chargingalt-4 3s infinite ease-in-out;
            animation: chargingalt-4 3s infinite ease-in-out;
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
  .areapower .allways .tochangbin.goback .inner:nth-child(5) {
    margin: -2px 0 0 0px;
    -webkit-animation: chargingalt-5 3s infinite ease-in-out;
            animation: chargingalt-5 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .tochangbin.goback .inner:nth-child(6) {
    margin: -10px 0 0 0px;
    -webkit-animation: chargingalt-6 3s infinite ease-in-out;
            animation: chargingalt-6 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .tochangbin.goback .inner:nth-child(7) {
    margin: -23px 0 0 0px;
    -webkit-animation: chargingalt-7 3s infinite ease-in-out;
            animation: chargingalt-7 3s infinite ease-in-out;
    -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
  }
  .areapower .allways .toyungan, .areapower .allways .toyunganback {
    offset-path: path("M769,156S385,170.84,385,73.25V0");
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    background: none;
  }
  .areapower .allways .toyungan {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: rotate(193deg);
            transform: rotate(193deg);
    width: auto;
  }
  .areapower .allways .toyungan .inner {
    -webkit-animation: charging-1 3s infinite ease-in-out;
            animation: charging-1 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan .inner:nth-child(2) {
    margin: -5% 0 0 0;
    -webkit-animation: charging-2 3s infinite ease-in-out;
            animation: charging-2 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan .inner:nth-child(3) {
    margin: -4.2% 0 0 0;
    -webkit-animation: charging-3 3s infinite ease-in-out;
            animation: charging-3 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan .inner:nth-child(4) {
    margin: -4% 0 0 0;
    -webkit-animation: charging-4 3s infinite ease-in-out;
            animation: charging-4 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan .inner:nth-child(5) {
    margin: -4% 0 0 0;
    -webkit-animation: charging-5 3s infinite ease-in-out;
            animation: charging-5 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan .inner:nth-child(6) {
    margin: -4% 0 0 0;
    -webkit-animation: charging-6 3s infinite ease-in-out;
            animation: charging-6 3s infinite ease-in-out;
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
  .areapower .allways .toyungan .inner:nth-child(7) {
    margin: -5% 0 0 0;
    -webkit-animation: charging-7 3s infinite ease-in-out;
            animation: charging-7 3s infinite ease-in-out;
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
  .areapower .allways .toyungan .inner:nth-child(8) {
    margin: -6% 0 0 0;
    -webkit-animation: charging-8 3s infinite ease-in-out;
            animation: charging-8 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan .inner:nth-child(9) {
    margin: -8% 0 0 0;
    -webkit-animation: charging-9 3s infinite ease-in-out;
            animation: charging-9 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan .inner:nth-child(10) {
    margin: -9% 0 0 0;
    -webkit-animation: charging-10 3s infinite ease-in-out;
            animation: charging-10 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan .inner:nth-child(11) {
    margin: -10% 0 0 0;
    -webkit-animation: charging-11 3s infinite ease-in-out;
            animation: charging-11 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan .inner:nth-child(12) {
    margin: -12% 0 0 0;
    -webkit-animation: charging-12 3s infinite ease-in-out;
            animation: charging-12 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan .inner:nth-child(13) {
    margin: -13% 0 0 4%;
    -webkit-animation: charging-13 3s infinite ease-in-out;
            animation: charging-13 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan.goback {
    -webkit-animation: none;
            animation: none;
    -webkit-transform: rotate(195deg);
            transform: rotate(195deg);
    width: auto;
  }
  .areapower .allways .toyungan.goback .inner {
    -webkit-animation: chargingalt-1 3s infinite ease-in-out;
            animation: chargingalt-1 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(2) {
    margin: -11px 0 0 0px;
    -webkit-animation: chargingalt-2 3s infinite ease-in-out;
            animation: chargingalt-2 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(3) {
    -webkit-animation: chargingalt-3 3s infinite ease-in-out;
            animation: chargingalt-3 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    margin: -10px 0 0 0px;
  }
  .areapower .allways .toyungan.goback .inner:nth-child(4) {
    margin: -7px 0 0 0px;
    -webkit-animation: chargingalt-4 3s infinite ease-in-out;
            animation: chargingalt-4 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(5) {
    margin: -7px 0 0 0px;
    -webkit-animation: chargingalt-5 3s infinite ease-in-out;
            animation: chargingalt-5 3s infinite ease-in-out;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(6) {
    margin: -10px 0 0 0px;
    -webkit-animation: chargingalt-6 3s infinite ease-in-out;
            animation: chargingalt-6 3s infinite ease-in-out;
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(7) {
    margin: -14px 0 0 0px;
    -webkit-animation: chargingalt-7 3s infinite ease-in-out;
            animation: chargingalt-7 3s infinite ease-in-out;
    -webkit-transform: rotate(265deg);
            transform: rotate(265deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(8) {
    margin: -18px 0 0 0px;
    -webkit-animation: chargingalt-8 3s infinite ease-in-out;
            animation: chargingalt-8 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(9) {
    margin: -22px 0 0 0px;
    -webkit-animation: chargingalt-9 3s infinite ease-in-out;
            animation: chargingalt-9 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(10) {
    margin: -28px 0 0 0px;
    -webkit-animation: chargingalt-10 3s infinite ease-in-out;
            animation: chargingalt-10 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(11) {
    margin: -34px 0 0 0px;
    -webkit-animation: chargingalt-11 3s infinite ease-in-out;
            animation: chargingalt-11 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(12) {
    margin: -42px 0 0 0px;
    -webkit-animation: chargingalt-12 3s infinite ease-in-out;
            animation: chargingalt-12 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .allways .toyungan.goback .inner:nth-child(13) {
    margin: -48px 0 0 26px;
    -webkit-animation: chargingalt-13 3s infinite ease-in-out;
            animation: chargingalt-13 3s infinite ease-in-out;
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
  .areapower .swith {
    position: absolute;
    width: 110px;
    bottom: 3%;
    left: 3%;
    float: none;
    margin: 0 auto;
  }
  .areapower .allways {
    zoom: 1;
    height: 100%;
  }
  .areapower .allways .toshalun, .areapower .allways .toshalunback {
    top: 0%;
    left: -22%;
  }
  .areapower .allways .tolucha, .areapower .allways .toluchaback {
    top: 0%;
    left: -22%;
  }
  .areapower .allways .tochangbin, .areapower .allways .tochangbinback {
    top: 0%;
    left: -22%;
  }
  .areapower .allways .toyungan, .areapower .allways .toyunganback {
    top: 0%;
    left: -22%;
  }
}

@media (min-width: 1100px) {
  .areapower .buildingnum {
    width: 45%;
    font-size: 1.05em;
  }
  .areapower .controlnum {
    position: absolute;
    width: 25.33%;
    right: 3%;
    top: 15%;
    font-size: 19px;
  }
  .areapower .waybg {
    width: 50%;
  }
  .areapower .shalunbuilding, .areapower .yuanbuilding {
    margin: -11% 0 0 0;
  }
  .areapower .allways {
    zoom: 1;
    height: 100%;
  }
  .areapower .allways .toshalun, .areapower .allways .toshalunback {
    top: 0%;
    left: -22%;
  }
  .areapower .allways .tolucha, .areapower .allways .toluchaback {
    top: 0%;
    left: -22%;
  }
  .areapower .allways .tochangbin, .areapower .allways .tochangbinback {
    top: 0%;
    left: -22%;
  }
  .areapower .allways .toyungan, .areapower .allways .toyunganback {
    top: 0%;
    left: -22%;
  }
}

@media (min-width: 1200px) {
  .areapower .waybg {
    width: 37.5%;
  }
  .areapower .shalunbuilding, .areapower .yuanbuilding {
    margin: -11% 0 0 0;
  }
  .areapower .allways {
    zoom: 1;
    height: 100%;
  }
  .areapower .allways .toshalun {
    top: 0%;
    left: 23%;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
    margin: -5% 0 0 0;
  }
  .areapower .allways .tolucha, .areapower .allways .toluchaback {
    top: 0%;
    left: 0%;
    margin: -12% 0% 0 -16%;
  }
  .areapower .allways .tochangbin, .areapower .allways .tochangbinback {
    top: 0%;
    left: 0%;
    width: 50%;
    margin: -12% 0% 0 -32%;
  }
  .areapower .allways .toyungan, .areapower .allways .toyunganback {
    top: 0%;
    left: -66%;
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
    margin: -2% 0 0 -2%;
  }
  .areapower .allways .toshalun, .areapower .allways .tolucha, .areapower .allways .tochangbin, .areapower .allways .toyungan {
    width: auto;
  }
  .areapower .allways .toshalun .inner, .areapower .allways .tolucha .inner, .areapower .allways .tochangbin .inner, .areapower .allways .toyungan .inner {
    width: 20px;
  }
  .originopen.areapower .allways .toshalun {
    top: 0%;
    left: 23%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    margin: -2% 0 0 0;
  }
  .originopen.areapower .allways .tolucha {
    top: 0%;
    left: 0%;
    margin: -8% 0 0 4%;
  }
  .originopen.areapower .allways .tochangbin {
    top: 0%;
    left: 0%;
    margin: -7.5% 0 0 -6%;
  }
  .originopen.areapower .allways .toyungan {
    top: 0%;
    left: 0%;
    margin: 0 0 0 -22%;
    -webkit-transform: rotate(195deg);
            transform: rotate(195deg);
  }
  .originopen.areapower .allways .toshalun, .originopen.areapower .allways .tolucha, .originopen.areapower .allways .tochangbin, .originopen.areapower .allways .toyungan {
    width: auto;
  }
  .originopen.areapower .allways .toshalun .inner, .originopen.areapower .allways .tolucha .inner, .originopen.areapower .allways .tochangbin .inner, .originopen.areapower .allways .toyungan .inner {
    width: 25px;
  }
  .originopen.areapower .controlnum {
    right: 10%;
  }
}

@media (min-width: 1300px) {
  .linebarset {
    padding: 20px 15px;
  }
  .areapower .waybg {
    width: 52%;
  }
  .areapower .shalunbuilding, .areapower .yuanbuilding {
    margin: -14% 0 0 0;
  }
}

@media (min-width: 1400px) {
  .areapower .waybg {
    width: 58.5%;
  }
}

@media (min-width: 1500px) {
  .linebarset {
    padding: 20px 20px;
  }
  .areapower .waybg {
    width: 49.5%;
  }
}
/*# sourceMappingURL=animation.css.map */