.pic-1 .logo{
  position: absolute;
  right: 1%;
  top: 3.4%;
  width: 11%;
  padding-bottom: 3%; 
}

.pic-1 img,
.pic-2 img,
.pic-3 img,
.pic-4 img,
.pic-5 img,
.pic-6 img,
.pic-7 img,
.pic-8 img,
.pic-9 img{width: 100%}
.pic-1,
.pic-2,
.pic-3,
.pic-4,
.pic-5,
.pic-6,
.pic-7,
.pic-8{position: relative; font-size: 0; overflow: hidden}
.oscar{position: absolute;left: 0;top: 0}

.pic-2{padding-bottom: 4vw;overflow: visible;}
.pic-2 .left,
.pic-2 .right{
  width: 26%;
  position: absolute;top: 50%;  transform: translate3d(0, 0%, 0);/* transition: all .25s; */ z-index: -1; 
}
.pic-2 .left{left: 0}
.pic-2 .right{right: 0;    width: 32%;}
/* .pic-3{padding-bottom: 4vw;} */

.pic-4{padding-bottom: 4vw;}
.pic-4 .title,
.pic-4 .text,
.pic-4 .oscar{
  position: absolute;left: 0;top: 0
}


.pic-5{padding-bottom: 4vw;}
.pic-5 .title,
.pic-5 .text,
.pic-5 .oscar{
  position: absolute;left: 0;top: 0
}



.pic-6 .dialogue,
.pic-6 .circle,
.pic-6 .text,
.pic-6 .oscar{
  position: absolute;left: 0;top: 0
}

.pic-6 .more-product{
  position: absolute;
  left: 21%;
  bottom: 8%;
  width: 27%;
  padding-bottom: 5%;
}


.pic-7{
  background-color: #fff;padding-bottom: 4vw;
}
.pic-7 .bg{
  position: absolute; top: 0;left: 0
}
.pic-7 .images{
  width: 100%;
  text-align: center;
  margin-top: 1vw;   
}

.pic-7 .images .link{
  position: relative;display: inline-block;width: 14.9%;margin-right: 0.76%; 
}
.pic-7 .images .image{
   transition: all 0.25s;width: 100%
}
.pic-7 .images .link:last-of-type{margin-right: 0}
.pic-7 .images .image.on{
  position: absolute;opacity: 0;left: 0;top: 0;
}
.pic-7 .images .link:hover .image.on{opacity: 1}

.pic-8 .text{position: absolute;left: 0;top: 0}
.pic-8 .share {position: absolute;width: 26%;top: 50%;left: 50%; transform: translate(-50%,-21%);}
.pic-8 .share .not-on,
.pic-8 .share .on{transition: all 0.25s;}
.pic-8 .share .on{opacity: 0;position: absolute;left: 0;top: 0}
.pic-8 .share:hover .not-on{opacity: 0}
.pic-8 .share:hover .on{opacity: 1}


@-webkit-keyframes slideInUpByMingWu {
  from {
    -webkit-transform: translate3d(0, -22%, 0);
    transform: translate3d(0, -22%, 0);
    visibility: visible;
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 1
  }
}
@keyframes slideInUpByMingWu {
  from {
    -webkit-transform: translate3d(0, -22%, 0);
    transform: translate3d(0, -22%, 0);
    visibility: visible;
    opacity: 0
  }

  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 1
  }
}
.slideInUpByMingWu {
  -webkit-animation-name: slideInUpByMingWu;
  animation-name: slideInUpByMingWu;
}


@media screen and (max-width:640px) {
  body{background-color: #f5f6f9}
  .pic-2 .left, .pic-2 .right{
    width: 42%;   transform: translate3d(0, 0%, 0);/* transform: translate3d(0, -66%, 0); */
  }
  .pic-2 .right{
    width: 51%;/* transform: translate3d(0, -61%, 0); */
  }
  .pic-6 .more-product{
    left: 15%;
    bottom: 33%;
    width: 71%;
    padding-bottom: 21%;
  }
  .pic-7 .images .image{
    width: 69.4%;margin-right: auto;display: block;margin-left: auto;margin-bottom: 3.5%;
  }
  .pic-7 .images a:last-of-type .image{margin-right: auto}
  .pic-8 .share{
    width: 71%;transform: translate(-50%,158%);
  }

  @-webkit-keyframes slideInUpByMingWuLeft {
    from {
      -webkit-transform: translate3d(0, -22%, 0);
      transform: translate3d(0, -22%, 0);
      visibility: visible;
      opacity: 0;
    }

    to {
      -webkit-transform: translate3d(0, -66%, 0);
      transform: translate3d(0, -66%, 0);
      opacity: 1
    }
  }
  @keyframes slideInUpByMingWuLeft {
    from {
      -webkit-transform: translate3d(0, -22%, 0);
      transform: translate3d(0, -22%, 0);
      visibility: visible;
      opacity: 0
    }

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

  .slideInUpByMingWuLeft {
    -webkit-animation-name: slideInUpByMingWuLeft;
    animation-name: slideInUpByMingWuLeft;
  }

  @-webkit-keyframes slideInUpByMingWuRight {
    from {
      -webkit-transform: translate3d(0, -22%, 0);
      transform: translate3d(0, -22%, 0);
      visibility: visible;
      opacity: 0;
    }

    to {
      -webkit-transform: translate3d(0, -61%, 0);
      transform: translate3d(0, -61%, 0);
      opacity: 1
    }
  }
  @keyframes slideInUpByMingWuRight {
    from {
      -webkit-transform: translate3d(0, -22%, 0);
      transform: translate3d(0, -22%, 0);
      visibility: visible;
      opacity: 0
    }

    to {
      -webkit-transform: translate3d(0, -61%, 0);
      transform: translate3d(0, -61%, 0);
      opacity: 1
    }
  }
  
  .slideInUpByMingWuRight {
    -webkit-animation-name: slideInUpByMingWuRight;
    animation-name: slideInUpByMingWuRight;
  }


}