* {
    margin: 0;
    padding: 0;
}

body {
    font: 16px/1.8 "Microsoft Yahei", verdana;
}


.nav-bar {
    height: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}

.nav-bar-inner {
    width: 100%;
    margin: 0 auto;
}

.link {
    font-size: 0.24rem;
    line-height: 1rem;
    color: #fff;
    
    margin-right: 0.4rem;
        display: flex;
    flex-direction: row;
    align-items: center;
}

.fr {
    float: right;
}

#nav .line {
    transform: rotate(30deg) translateY(4px);
    display: inline-block;
    width: 2px;
    background-color: #ffffff;
    height: 0.26rem;
}

.link a {
    font-size: 0.24rem;
    line-height: 1rem;
    color: #fff;
    padding: 0 0.3rem;
    text-decoration: none;
}

.link a:visited {
    color: #fff;
}
.link a:hover{
    cursor: pointer;
}

.section .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.section .bg img {
    display: block;
    width: 100%;
    height: 100%;
}
.arrow{
    bottom: 0.5rem;
    position: fixed;
    left: 50%;
    width: 100px;
    height: 55px;
    margin-left: -50px;
    z-index: 10;
}
.ani_arr{
     animation-name: fadeInDown;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}
    .section .bg1,
    .section .bg2,
    .section .bg3,
    .section .bg4,
    .section .bg5,
    .section .bg6,
    .section .bg7,
    .section .bg8,
    .section .bg9,
    .section .bg10,
    .section .bg11{
        background-size: contain;
    }
.arrow img {
    width: 100%;
}
.bg1 {
    position: absolute;
    top: 31.5%;
    left:9%;
    width: 6.44rem;
    height: 2.21rem;
    background: url(../images/section_1_left.png) no-repeat;
    transition: all 1s;
}

.active .bg2 {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@media screen and (min-width: 1282px){

}
@media screen and (max-width: 1480px){
    .link a {
        font-size: 0.2rem;
    }

    .section .bg2{
        width: 3rem;
        height: 1rem;
        
    }
    .section .bg1{
        width: 4rem;
        height: 1.21rem;
        top: 33%;
    }
    .section .bg3{
        width: 1.4rem;
        height: 1.6rem;
    }
    .section .bg4{
        width: 4.2rem;
        height: 3.6rem;
        right: 9%;
        top: 30%;
    }
    .section .bg5{
        width: 1.5rem;
        height: 0.7rem;
        top: 30%;
    }
    .section .bg6{
        width: 3.6rem;
        height: 1.2rem;
        top: 33%;
    }
    .section .bg7{
        width: 4.6rem;
        height: 3.6rem;
        right: 9%;
        top: 30%;

    }
     .section .bg8{
        width: 3.2rem;
        height: 1.2rem;
        top: 33%;
    }

    .section .bg9{
        width: 5rem;
        height: 4.2rem;
        right: 9%;
        top: 30%;
    }

 .section .bg10{
        width: 4rem;
        height: 1.2rem;
        top: 33%;
    }

 .section .bg11{
        width: 4.4rem;
        height: 4rem;
        right: 9%;
        top: 30%;
    }
    .arrow{
    
    width: 0.5rem;
    height: 0.35rem;
    margin-left: -0.25rem;
    z-index: 10;
}

    
}
.bg2 {
    position: absolute;
    top: 15%;
    left: 9%;
    width: 4.33rem;
    height: 1.15rem;
    background: url(../images/logo.png) no-repeat;
    transition: all 1s;
}

.active .bg1,
.active .bg6,
.active .bg8,
.active .bg10{
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.bg3 {
    position: fixed;
    top: 58%;
    left:9%;
    width: 2.6rem;
    height: 3.07rem;
    background: url(../images/erweima.png) no-repeat;
    transition: all 1s;
}
.active .bg4{
     -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;

  
  -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.bg4 {
    position: absolute;
    top: 15%;
    right: 1%;
    width: 9.2rem;
    height: 7.3rem;
    background: url(../images/section_1_right.png) no-repeat;
    transition: all 1s;
}

.active .bg5 {
    -webkit-animation-name: plane;
    animation-name: plane;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*
.bg5 {
    position: absolute;
    top: 18%;
    right: 25%;
    width: 2.9rem;
    height: 1.3rem;
    background: url(../images/section_1_plane.png) no-repeat;
    transition: all 1s;
} */

.bg6 {
    position: absolute;
    top: 32%;
    left:9%;
    width: 7.2rem;
    height: 2.3rem;
    background: url(../images/section_2_left.png) no-repeat;
    transition: all 1s;
}
.active .bg7{
      -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
   -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
     animation-delay: 1s;
     
}

.bg7 {
    position: absolute;
    top: 19%;
    right: 1%;
    width: 9.1rem;
    height: 7.2rem;
    background: url(../images/section_2_right.png) no-repeat;
    transition: all 1s;
    transform: translateY(-2000px);
}

.bg8 {
    position: absolute;
    top: 32%;
    left:9%;
    width: 6.1rem;
    height: 2.2rem;
    background: url(../images/section_3_left.png) no-repeat;
    transition: all 1s;
}
.active .bg9{
      -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
   -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
     animation-delay: 1s;
}
.bg9 {
    position: absolute;
    top: 17%;
    right: 1%;
    width: 9.8rem;
    height: 8.2rem;
    background: url(../images/section_3_right.png) no-repeat;
    transition: all 1s;
}

.bg10 {
    position: absolute;
    top: 31%;
    left:9%;
    width: 7.6rem;
    height: 2.2rem;
    background: url(../images/section_4_left.png) no-repeat;
    transition: all 1s;
}
.active .bg11{
      -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
   -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
     animation-delay: 1s;
}

.bg11 {
    position: absolute;
    top: 12%;
    right: 1%;
    width: 8.8rem;
    height: 7.9rem;
    background: url(../images/section_4_right.png) no-repeat;
    transition: all 1s;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


@-webkit-keyframes plane {
    0% {
        opacity: 0.4;
        transform: translate3d(0, 0, 0) rotate(360deg) scale(0);
    }

    30% {
        opacity: 0.6;
        transform: translate3d(100px, 0px, 0) rotate(30deg) scale(0.4);
    }

    65% {
        opacity: 0.8;
        transform: translate3d(-100px, 0px, 0) rotate(10deg) scale(0.7);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}

@keyframes plane {

    0% {
        opacity: 0.4;
        transform: translate3d(0, 0, 0) rotate(360deg) scale(0);
    }

    30% {
        opacity: 0.6;
        transform: translate3d(100px, 0px, 0) rotate(30deg) scale(0.4);
    }

    65% {
        opacity: 0.8;
        transform: translate3d(-100px, 0px, 0) rotate(10deg) scale(0.7);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        -ms-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transform: translateY(-2000px); 
    
  }
  
  30% {
    transform: translateY(0px);
     -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
    opacity: 1;
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
    opacity: 1;
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
    opacity: 1;
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
    opacity: 1;
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}