@keyframes ease-right {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes ease-right {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes reveal {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translateZ(0) skew(45deg) scaleX(0);
    transform: translateZ(0) skew(45deg) scaleX(0);
  }
  0.0001% {
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  50% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translateZ(0) skew(45deg) scaleX(1);
    transform: translateZ(0) skew(45deg) scaleX(1);
  }
  50.0001% {
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  to {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: translateZ(0) skew(45deg) scaleX(0);
    transform: translateZ(0) skew(45deg) scaleX(0);
  }
}
@keyframes reveal {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translateZ(0) skew(45deg) scaleX(0);
    transform: translateZ(0) skew(45deg) scaleX(0);
  }
  0.0001% {
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  50% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translateZ(0) skew(45deg) scaleX(1);
    transform: translateZ(0) skew(45deg) scaleX(1);
  }
  50.0001% {
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  to {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: translateZ(0) skew(45deg) scaleX(0);
    transform: translateZ(0) skew(45deg) scaleX(0);
  }
}
@keyframes zoomSmall {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes zoomSmall {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse-border {
  0% {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes toRight {
  0% {
    right: 0.2rem;
  }
  100% {
    right: 0.3rem;
  }
}
@-webkit-keyframes toRight {
  0% {
    right: 0.2rem;
  }
  100% {
    right: 0.3rem;
  }
}
@keyframes toLeft {
  0% {
    left: 0.55rem;
  }
  100% {
    left: 0.65rem;
  }
}
@-webkit-keyframes toLeft {
  0% {
    left: 0.55rem;
  }
  100% {
    left: 0.65rem;
  }
}
.top {
  text-align: center;
  color: #fff;
}
.top .bTit {
  font-size: 0.8rem;
  line-height: 0.8rem;
  font-family: 'Kinetika-Bold';
  margin-bottom: 0.2rem;
  color: #fff;
}
.top p {
  font-size: 0.28rem;
  line-height: 0.34rem;
  font-family: 'Kinetika-Bold';
  color: #fff;
}
.mobile {
  display: none;
}
.b-lazy {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.w1300 {
  width: 13rem;
  margin: 0 auto;
}
.banner {
  height: 9rem;
}
.banner img {
  height: 100%;
  width: 100%;
  display: block;
}
.banner .shop-btn {
  display: none;
}
.part1 {
  height: 8.4rem;
  background-color: #fff;
}
.part1 .icoBox {
  width: 11.5rem;
  height: 3.53rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  flex-wrap: wrap;
}
.part1 .icoBox li {
  text-align: center;
  width: 5.67rem;
  height: 1.71rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 2rem;
  transition: all 0.5s ease-in-out;
}
.part1 .icoBox li:hover .tit {
  color: #000;
}
.part1 .icoBox li:nth-child(1).on {
  background: url('../../image/product/nexa-n20000/ico_01_h.jpg') no-repeat !important;
  background-size: 5.67rem auto !important;
}
.part1 .icoBox li:nth-child(2).on {
  background: url('../../image/product/nexa-n20000/ico_02_h.jpg') no-repeat !important;
  background-size: 5.67rem auto !important;
}
.part1 .icoBox li:nth-child(3).on {
  background: url('../../image/product/nexa-n20000/ico_03_h.jpg') no-repeat !important;
  background-size: 5.67rem auto !important;
}
.part1 .icoBox li:nth-child(4).on {
  background: url('../../image/product/nexa-n20000/ico_04_h.jpg') no-repeat !important;
  background-size: 5.67rem auto !important;
}
.part1 .icoBox li .tit {
  transition: color 0.5s ease-in-out;
  color: #fff;
  display: block;
  font-style: inherit;
  font-weight: bold;
  font-size: 0.36rem;
  line-height: 0.36rem;
}
.part1 .icoBox li .tit.mobile {
  display: none;
}
.proVideo {
  height: 10.8rem;
}
.proVideo .video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.part2 {
  overflow: hidden;
  height: 9rem;
}
.part2 .w1300 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 13rem;
  height: 100%;
}
.part2 .w1300 .top {
  position: absolute;
  right: -1.2rem;
  top: 48%;
  transform: translateY(-50%);
  z-index: 3;
  width: 4.2rem;
  text-align: left;
}
.part2 .w1300 .top p {
  width: 4.4rem;
}
.part3 {
  height: 9rem;
  overflow: hidden;
}
.part3 .bg1 {
  position: absolute;
  left: 50%;
  top: 1.6rem;
  transform: translateX(-49.5%);
  z-index: 2;
  width: 9.28rem;
  height: 6.1rem;
}
.part3 .w1300 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.part3 .w1300 .top {
  position: absolute;
  left: 50%;
  top: 0.8rem;
  transform: translateX(-50%);
  color: #fff;
  z-index: 1;
  width: 100%;
  text-align: center;
}
.part3 .w1300 .top p {
  position: absolute;
  top: 3.3rem;
  text-align: left;
  width: 3rem;
}
.part3 .w1300 .top p.p1 {
  left: 0rem;
}
.part3 .w1300 .top p.p2 {
  left: 11.6rem;
}
.part3 .w1300 .top .bTit {
  font-size: 1.5rem;
  color: #d1ebf3;
}
.part4 {
  height: 100vh;
  overflow: hidden;
}
.part4 .bgBor {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.part4 .bgBor img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.part5 {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
}
.part5 .bg2 {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.part5 .w1300 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 13rem;
  height: 100%;
}
.part5 .w1300 .top {
  position: absolute;
  left: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 6.5rem;
  text-align: left;
  opacity: 0;
}
.part6 {
  overflow: hidden;
  height: 8.99rem;
  margin-top: -0.01rem;
}
.part6 .w1300 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 13rem;
  height: 100%;
}
.part6 .w1300 .top {
  position: absolute;
  top: 1.6rem;
  z-index: 3;
  width: 100%;
  text-align: center;
}
.part7 {
  overflow: hidden;
  height: 9rem;
}
.part7 .w1300 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  height: 3rem;
}
.part7 .w1300 .top {
  position: absolute;
  top: 1.4rem;
  left: 0;
  width: 100%;
}
.part7 .w1300 .top .bTit {
  color: #000;
}
.part7 .proBox {
  width: 16.5rem;
  height: 5rem;
  position: absolute;
  left: calc(50% + 30px);
  transform: translateX(-50%);
  top: 3.2rem;
  z-index: 2;
}
.part7 .proBox .swiper-wrapper .swiper-slide {
  width: 5.5rem;
}
.part7 .proBox .swiper-wrapper .swiper-slide .img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  height: 4.97rem;
}
.part7 .proBox .swiper-wrapper .swiper-slide .img img {
  height: 4.97rem;
}
.part7 .proBox .swiper-wrapper .swiper-slide .img .tit {
  position: absolute;
  left: 0;
  top: 3.9rem;
  font-size: 0.26rem;
  line-height: 0.32rem;
  color: #000;
  font-weight: bold;
  font-family: 'Kinetika-Bold';
  display: block;
  width: 2rem;
  text-transform: uppercase;
}
.part7 .changeBtn {
  width: 100%;
  position: absolute;
  top: 5.7rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  height: 0.61rem;
}
.part7 .changeBtn .btnL {
  width: 0.37rem;
  height: 0.61rem;
  left: 0.25rem;
  margin-top: -0.8rem;
  background: url('../../image/product/nexa-n20000/part7/left_ico.png') no-repeat;
  background-size: 0.37rem auto;
}
.part7 .changeBtn .btnL:hover {
  opacity: 0.8;
}
.part7 .changeBtn .btnR {
  width: 0.37rem;
  height: 0.61rem;
  right: 0.4rem;
  margin-top: -0.8rem;
  background: url('../../image/product/nexa-n20000/part7/right_ico.png') no-repeat;
  background-size: 0.37rem auto;
}
.part7 .changeBtn .btnR:hover {
  opacity: 0.8;
}
.part8 {
  height: 10.2rem;
  overflow: hidden;
  background-color: #fff;
  background-size: 19.2rem 9rem;
}
.part8 .w1300 {
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
}
.part8 .w1300 .pro {
  position: absolute;
  left: 0px;
  bottom: 1.4rem;
  z-index: 5;
  width: 4.37rem;
}
.part8 .top {
  width: 6.5rem;
  position: absolute;
  left: 6.4rem;
  top: 3.6rem;
  color: #fff;
  z-index: 4;
  width: 100%;
  text-align: left;
}
.part8 .top .bTit {
  font-size: 0.6rem;
  line-height: 0.6rem;
  color: #000;
}
.part8 .top p {
  margin: 0.2rem 0 0 0rem;
  color: #000;
}
.part9 {
  height: 14.05rem;
}
.part9 .w1300 {
  width: 14rem;
  margin: 0 auto;
}
.part9 .top {
  position: absolute;
  left: -1.2rem;
  top: 2.1rem;
  color: #fff;
  z-index: 3;
  width: 100%;
  font-size: 0.24rem;
  line-height: 0.3rem;
  text-align: left;
}
.part9 .top p.te {
  margin-top: 0.3rem;
}
@media (max-width: 750px) {
  .pc {
    display: none!important;
  }
  .mobile {
    display: block!important;
  }
  .banner {
    height: 13.34rem;
    position: relative;
  }
  .banner .shop-btn {
    display: inline-block;
    position: absolute;
    font-size: 0.24rem;
    line-height: 0.36rem;
    padding: 0 0.06rem;
    top: 12.58rem;
    left: 3rem;
    color: #fed314;
    border: 0.02rem solid #fed314;
  }
  .part1 {
    height: 13.34rem;
  }
  .part1 .icoBox {
    width: 5.2rem;
    height: auto;
  }
  .part1 .icoBox li {
    width: 5.2rem;
    height: 1.6rem;
    margin-bottom: 0.6rem;
    background-size: 5.2rem 1.6rem;
  }
  .part1 .icoBox li:nth-child(1).on,
  .part1 .icoBox li:nth-child(2).on,
  .part1 .icoBox li:nth-child(3).on,
  .part1 .icoBox li:nth-child(4).on {
    background-size: 5.2rem 1.6rem !important;
  }
  .part1 .icoBox li .tit {
    font-size: 0.33rem;
    line-height: 0.33rem;
  }
  .proVideo {
    height: 4.22rem;
  }
  .part2 {
    height: 13.34rem;
  }
  .part2 .w1300 {
    width: 100%;
  }
  .part2 .w1300 .top {
    right: 0.25rem;
    top: 1.5rem;
    width: 7rem;
    text-align: center;
    transform: none;
  }
  .part2 .w1300 .top .bTit {
    margin-bottom: 0.1rem;
  }
  .part2 .w1300 .top p {
    width: 4.1rem;
    display: inline-block;
  }
  .part3 {
    height: 11.8rem;
  }
  .part3 .bg1 {
    display: none;
  }
  .part3 .w1300 {
    width: 100%;
  }
  .part3 .w1300 .top {
    position: absolute;
    left: 50%;
    top: 1.2rem;
    transform: translateX(-50%);
    color: #fff;
    z-index: 1;
    width: 100%;
    text-align: center;
  }
  .part3 .w1300 .top p {
    position: absolute;
    top: 1.8rem;
    text-align: center;
    text-transform: uppercase;
    width: 2.3rem;
  }
  .part3 .w1300 .top p.p1 {
    left: 1rem;
  }
  .part3 .w1300 .top p.p2 {
    left: 4.6rem;
  }
  .part3 .w1300 .top .bTit {
    font-size: 1.23rem;
  }
  .part4 {
    height: 100vh;
    overflow: hidden;
  }
  .part4 .bgBor {
    width: 100%;
    height: 100%;
  }
  .part4 .bgBor img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .part5 {
    height: 100vh;
  }
  .part5 .w1300 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 100%;
    height: 100%;
  }
  .part5 .w1300 .top {
    position: absolute;
    left: 0;
    top: 0.8rem;
    transform: none;
    z-index: 3;
    width: 100%;
    text-align: center;
  }
  .part6 {
    height: 13.35rem;
  }
  .part6 .w1300 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 100%;
    height: 100%;
  }
  .part6 .w1300 .top {
    position: absolute;
    top: 1.6rem;
    z-index: 3;
    width: 100%;
    text-align: center;
  }
  .part7 {
    height: 8.5rem;
  }
  .part7 .w1300 {
    height: 2.7rem;
  }
  .part7 .w1300 .top {
    top: 1.1rem;
  }
  .part7 .w1300 .top .bTit {
    width: 5.5rem;
    margin: 0 auto;
  }
  .part7 .w1300 .top p {
    width: 6.2rem;
    display: inline-block;
  }
  .part7 .proBox {
    height: 5.5rem;
    top: 2.7rem;
    left: 0;
  }
  .part7 .proBox .swiper-wrapper .swiper-slide {
    width: 7.5rem;
  }
  .part7 .proBox .swiper-wrapper .swiper-slide .img {
    height: 4rem;
  }
  .part7 .proBox .swiper-wrapper .swiper-slide .img img {
    height: 4rem;
  }
  .part7 .proBox .swiper-wrapper .swiper-slide .img .tit {
    left: 0.2rem;
    top: 3.2rem;
    font-size: 0.24rem;
    width: 1.6rem;
  }
  .part7 .changeBtn {
    width: 7.5rem;
    top: 4.8rem;
  }
  .part7 .changeBtn .btnL {
    left: 0.2rem;
    margin-top: -0.75rem;
  }
  .part7 .changeBtn .btnR {
    right: 0.2rem;
    margin-top: -0.75rem;
  }
  .part8 {
    height: 13.4rem;
    background-size: 7.5rem 13.4rem;
  }
  .part8 .w1300 {
    width: 100%;
  }
  .part8 .w1300 .pro {
    left: 2rem;
    bottom: 1.8rem;
  }
  .part8 .top {
    top: 0.8rem;
    left: 0;
    text-align: center;
  }
  .part8 .top .tit {
    display: none;
  }
  .part8 .top .bTit {
    margin: 0;
  }
  .part8 .top p {
    margin: 0.1rem 0 0 0.1rem;
  }
  .part9 {
    height: 13.74rem;
  }
  .part9 .w1300 {
    width: 100%;
  }
  .part9 .top {
    top: 0.4rem;
    left: 0;
    width: 100%;
    text-align: center;
  }
  .part9 .top .bTit {
    margin: 0 auto;
  }
  .part9 .top p {
    margin-top: 0.2rem;
  }
  .part9 .top p.te {
    margin: 0;
  }
}