/*PC端*/
/*M端*/
@font-face {
  font-family: 'Montserrat Medium';
  src: url('../../fonts/Montserrat-Medium-7.otf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
[aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;
  transform-origin: 50% 0;
  transform: translate3d(0px, 0px, -500px) rotateX(-45deg);
}
[aos="new-animation"].aos-animate {
  opacity: 1;
  transform: translate(0px, 0px) rotateX(0);
}
[aos="new-animation-2"] {
  opacity: 0;
  transition-property: transform, opacity;
  transform-origin: 50% 0;
  transform: translate3d(0px, 300px, -500px) rotateX(-45deg);
}
[aos="new-animation-2"].aos-animate {
  opacity: 1;
  transform: translate(0px, 0px) rotateX(0);
}
.container-fluid {
  background: #000;
  padding-top: 0.6rem;
}
.banner {
  height: 9rem;
  background: url("../../image/product/t600/banner.jpg") 100% no-repeat;
  background-size: cover;
}
.w1400 {
  width: 14rem;
  margin: 0 auto;
}
.con {
  color: #fff;
}
.con h3 {
  font-size: 0.5rem;
  line-height: 0.65rem;
  font-family: 'Kinetika-Bold', Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
}
.con p {
  margin-top: 0.4rem;
  font-size: 0.2rem;
  line-height: 0.3rem;
  font-family: 'Kinetika-Regular', Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.b-lazy {
  background-size: cover;
  background-position: center;
}
.hots {
  height: calc(100vh - 0.6rem);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hots .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  border: 1.5px solid #f5f6fe;
  background-image: -moz-linear-gradient(90deg, #d7d8f1 0%, #b5bce8 35%, #f1f1f1 61%, #b8bae2 81%, #f9f9f7 100%);
  background-image: -webkit-linear-gradient(90deg, #d7d8f1 0%, #b5bce8 35%, #f1f1f1 61%, #b8bae2 81%, #f9f9f7 100%);
  background-image: -ms-linear-gradient(90deg, #d7d8f1 0%, #b5bce8 35%, #f1f1f1 61%, #b8bae2 81%, #f9f9f7 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.25rem;
}
.hots .icon {
  width: 1.45rem;
}
.hots .hots-box {
  position: relative;
  z-index: 2;
  display: flex;
  width: 10.5rem;
  justify-content: space-between;
  opacity: 0;
}
.hots .hots-box .hot-item {
  text-align: center;
}
.hots .hots-box p {
  font-size: 0.26rem;
  line-height: 0.334rem;
  color: #150b60;
  margin-top: 0.3rem;
}
.video-box {
  height: 9rem;
}
.video-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scroll-item-1 {
  height: calc(100vh - 0.6rem);
}
.part1 {
  height: calc(100vh - 0.6rem);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.part1 img {
  width: 10.31rem;
  --clip-height: 100%;
  display: inline-block;
  -webkit-clip-path: inset(0 -1rem var(--clip-height) 0);
  clip-path: inset(0 0 var(--clip-height) 0);
  transform: translateY(var(--clip-height));
}
.part2 {
  background: #000;
  height: calc(100vh - 0.6rem);
  padding-top: 3.5rem;
  position: relative;
}
.part2 .bg {
  width: 2.92rem;
  height: 7.75rem;
  background-repeat: no-repeat;
  background-image: url("../../image/product/t600/hand.png");
  position: absolute;
  bottom: 0;
  left: 11.6rem;
  background-size: 100%;
}
.part3 {
  background: #000;
  height: 9rem;
}
.part3 .w1400 {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding-top: 3.4rem;
}
.part3 .con {
  position: relative;
  z-index: 2;
  padding-left: 7.8rem;
}
.part3 .part3-video {
  position: absolute;
  height: 15.5rem;
  top: 0;
  left: -4rem;
}
.part3 .mask {
  background: url("../../image/product/t600/part3-mask.png") no-repeat;
  width: 5.7rem;
  height: 1rem;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0.6rem;
}
.part4 {
  height: 9rem;
  padding-top: 3.9rem;
}
.part4 .con {
  color: #010101;
}
.part5 {
  height: calc(100vh - 0.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  position: sticky;
  top: 0.6rem;
}
.part5 .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}
.part5 .con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 14.16rem;
  height: 4.57rem;
  text-align: center;
  color: #150b60;
  position: relative;
  z-index: 2;
  padding: 0 3.55rem;
}
.flavors {
  background: #101010;
  background-image: url("../../image/product/t600/flavors-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  padding-bottom: 2.65rem;
  padding-top: 0.56rem;
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.flavors .tit {
  text-align: center;
  margin-bottom: 0.56rem;
}
.flavors .tit img {
  width: 8.1rem;
  scale: 0.8;
}
.flavors .pro-box {
  justify-content: space-between;
  display: grid;
  grid-template-rows: repeat(3, 5.2rem);
  grid-template-columns: repeat(4, 3.31rem);
  grid-row-gap: 0.22rem;
  perspective: 900px;
}
.flavors .pro-box .pro-item {
  border-radius: 0.08rem;
  border: 1px solid #fff;
  overflow: hidden;
  font-family: 'Kinetika-Regular', "Montserrat Medium";
}
.flavors .pro-box .pro-item:hover .pro-img img {
  scale: 1.15;
  rotate: -5deg;
}
.flavors .pro-box .pro-item:nth-child(1) {
  color: #0f0a76;
}
.flavors .pro-box .pro-item:nth-child(1):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(1):hover p {
  background: #0f0a76;
}
.flavors .pro-box .pro-item:nth-child(2) {
  color: #e43b95;
}
.flavors .pro-box .pro-item:nth-child(2):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(2):hover p {
  background: #e43b95;
}
.flavors .pro-box .pro-item:nth-child(3) {
  color: #ef964a;
}
.flavors .pro-box .pro-item:nth-child(3):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(3):hover p {
  background: #ef964a;
}
.flavors .pro-box .pro-item:nth-child(4) {
  color: #8bc500;
}
.flavors .pro-box .pro-item:nth-child(4):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(4):hover p {
  background: #8bc500;
}
.flavors .pro-box .pro-item:nth-child(5) {
  color: #8bc500;
}
.flavors .pro-box .pro-item:nth-child(5):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(5):hover p {
  background: #8bc500;
}
.flavors .pro-box .pro-item:nth-child(6) {
  color: #322ec6;
}
.flavors .pro-box .pro-item:nth-child(6):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(6):hover p {
  background: #322ec6;
}
.flavors .pro-box .pro-item:nth-child(7) {
  color: #8bc500;
}
.flavors .pro-box .pro-item:nth-child(7):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(7):hover p {
  background: #8bc500;
}
.flavors .pro-box .pro-item:nth-child(8) {
  color: #7b3621;
}
.flavors .pro-box .pro-item:nth-child(8):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(8):hover p {
  background: #7b3621;
}
.flavors .pro-box .pro-item:nth-child(9) {
  color: #322ec6;
}
.flavors .pro-box .pro-item:nth-child(9):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(9):hover p {
  background: #322ec6;
}
.flavors .pro-box .pro-item:nth-child(10) {
  color: #8bc500;
}
.flavors .pro-box .pro-item:nth-child(10):hover {
  color: #fff;
}
.flavors .pro-box .pro-item:nth-child(10):hover p {
  background: #8bc500;
}
.flavors .pro-box .pro-img {
  width: 3.31rem;
  height: 4.54rem;
  overflow: hidden;
}
.flavors .pro-box .pro-img img {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.flavors .pro-box p {
  height: 0.65rem;
  line-height: 0.65rem;
  text-align: center;
  font-size: 0.22rem;
  background-image: -moz-linear-gradient(165deg, #ffffff 0%, #e5e5e5 8%, #ffffff 29%, #ffffff 76%, #d2d2d2 100%);
  background-image: -webkit-linear-gradient(165deg, #ffffff 0%, #e5e5e5 8%, #ffffff 29%, #ffffff 76%, #d2d2d2 100%);
  background-image: -ms-linear-gradient(165deg, #ffffff 0%, #e5e5e5 8%, #ffffff 29%, #ffffff 76%, #d2d2d2 100%);
}
.flavors .bg-swiper {
  height: 1.2rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.flavors .bg-swiper .img-box {
  height: 100%;
  width: 200%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flavors .bg-swiper img {
  width: 3.76rem;
}
.part6 {
  height: calc(100vh - 0.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.part6 .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.46);
  transform: translate(-50%, -50%);
}
.part6 .pro-img {
  width: 1.07rem;
  margin-right: 2.7rem;
}
.part6 .con-box {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
.part6 .con {
  color: #020202;
  opacity: 0;
}
.part6 .con p {
  font-size: 0.24rem;
  line-height: 0.36rem;
}
.part7 {
  height: 9rem;
  padding-top: 2.45rem;
}
.part7 .con {
  color: #010101;
  margin-bottom: 0.7rem;
}
.part7 .con p {
  margin-top: 0.15rem;
}
@media (max-width: 750px) {
  [aos="new-animation"] {
    opacity: 0;
    transition-property: transform, opacity;
    transform-origin: 50% 0;
    transform: translate3d(0px, 0px, -15rem) rotateX(-45deg);
  }
  [aos="new-animation"].aos-animate {
    opacity: 1;
    transform: translate(0px, 0px) rotateX(0);
  }
  [aos="new-animation-2"] {
    opacity: 0;
    transition-property: transform, opacity;
    transform-origin: 50% 0;
    transform: translate3d(0px, 300px, -15rem) rotateX(-45deg);
  }
  [aos="new-animation-2"].aos-animate {
    opacity: 1;
    transform: translate(0px, 0px) rotateX(0);
  }
  .container-fluid {
    padding-top: 1rem;
  }
  .w1400 {
    width: 100%;
  }
  .banner {
    height: 13.34rem;
    background-image: url("../../image/product/t600/banner-m.jpg");
  }
  .hots .hots-box {
    width: 50%;
    flex-wrap: wrap;
  }
  .hots .hots-box .hot-item {
    margin: 0.65rem 0;
  }
  .video-box {
    height: 4.21875rem;
  }
  .part1 {
    height: calc(100vh - 1rem);
  }
  .part1 img {
    width: 80%;
  }
  .part2 {
    height: calc(100vh - 1rem);
    padding-top: 1rem;
  }
  .part2 .con {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    text-align: center;
  }
  .part2 .bg {
    left: 50%;
    margin-left: -1.46rem;
  }
  .part3 {
    height: calc(100vh - 1rem);
  }
  .part3 .w1400 {
    padding-top: 0.6rem;
  }
  .part3 .con {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    text-align: center;
  }
  .part3 .part3-video {
    height: 13rem;
    left: -2.55rem;
    top: auto;
    bottom: -4.4rem;
  }
  .part3 .mask {
    top: auto;
    left: 1rem;
    bottom: 7.6rem;
  }
  .part4 {
    height: calc(100vh - 1rem);
    padding-top: 1.3rem;
  }
  .part4 .con {
    padding: 0 0.3rem;
    text-align: center;
  }
  .part5 {
    height: calc(100vh - 1rem);
  }
  .part5 .con {
    width: 95%;
    height: 80%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 0.4rem;
  }
  .flavors .pro-box {
    padding: 0 0.3rem;
    grid-template-columns: repeat(2, 3.31rem);
    grid-template-rows: repeat(5, 5.2rem);
  }
  .part6 {
    height: calc(100vh - 1rem);
  }
  .part6 .con-box {
    flex-direction: column-reverse;
  }
  .part6 .pro-img {
    margin-right: 0;
    width: 1.2rem;
    margin-top: 0.5rem;
  }
  .part6 .con {
    text-align: center;
  }
  .part7 {
    height: calc(100vh - 1rem);
    background-position: 63% 100%;
    padding-top: 1.1rem;
  }
  .part7 .con {
    padding-left: 0.6rem;
  }
}