body {
  background-color: #000;
}

.header-swiper-box {
  width: 100%;
  position: relative;
  overflow: hidden;
}

video {
  width: 100%;
  height: auto;
}
.header-swiper-box .header-swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
}

.swiper-pagination-bullet {
  /* width: 73px !important;
  height: 5.5px !important;
  opacity: 1 !important;
  border-radius: 3.8px !important;
  background-color: #fff !important; */
  width: 3.80vw !important;
  height: 0.29vw !important;
  opacity: 1 !important;
  border-radius: 0.20vw !important;
  background-color: #fff !important;
}

.swiper-pagination-bullet-active {
  background-color: #000 !important;
}

.slogan {
  color: #fff;
  overflow: hidden;
  text-align: center;
  background-color: #000;
  /* margin: 125px 0px 128px 0px; */
  margin: 6.51vw 0px 6.67vw 0px;

}

.slogan .slogan-title {
  /* font-size: 35px; */
  font-size: 1.82vw;

  font-weight: 700;
  overflow: hidden;
  /* line-height: 42px; */
  /* margin-bottom: 35.5px; */
  line-height: 2.19vw;
  margin-bottom: 1.85vw;
}

.slogan .slogan-text {
  /* font-size: 14px; */
  font-weight: 500;
  /* line-height: 17px; */
  font-size: 0.73vw;
  line-height: 0.89vw;

}

.recommend-products {
  display: flex;
  color: #fff;
  /* margin-bottom: 95.5px; */
  margin-bottom: 4.97vw;
  background-color: #000;

}

.recommend-products .products-more {
  /* width: 870px;
  gap: 28.5px; */
  width: 45.31vw;
  gap: 1.48vw;
  display: flex;
  /* padding-left: 175px; */
  padding-left: 9.11vw;

  flex-direction: column;
}

.recommend-products .products-more div {
  align-self: flex-start;
}

.recommend-products .products-more .products-title {
  /* font-size: 60px; */
  font-size: 3.13vw;

  font-weight: 700;
  /* line-height: 85px; */
}





.recommend-products .products-more .products-title.splitting .char {
  visibility: hidden;
}

.recommend-products .products-more .products-title.splitting .char::before,
.recommend-products .products-more .products-title.splitting .char::after {
  visibility: visible;
  animation: slide-in 7s cubic-bezier(0.7, 0, 0.1, 1) both infinite;
  animation-delay: calc(0ms + (100ms * var(--char-index)));
}

.recommend-products .products-more .products-title.splitting span:first-child .char::before {
  color: hsl(0, 0%, 100%);
}

.recommend-products .products-more .products-title.splitting span:first-child .char::after {
  color: #86FFCF;
}

.recommend-products .products-more .products-title.splitting span:last-child .char::before {
  color: #86FFCF;
}

.recommend-products .products-more .products-title.splitting span:last-child .char::after {
  color: hsl(0, 0%, 100%);
}

.recommend-products .products-more .products-title.splitting .char::after {
  animation-name: slide-in-2;
}






@keyframes slide-in {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  30%,
  70% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  95%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}

@keyframes slide-in-2 {
  0%,
  10% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  35%,
  65% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  85%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}







.recommend-products .products-more .products-text {
  /* font-size: 20px; */
  font-size: 1.04vw;

  font-weight: 700;
}

.recommend-products .products-more .products-btn {
  cursor: pointer;
  /* font-size: 14px; */
  font-size: 0.73vw;

  user-select: none;

  color: #86FFCF;
  font-weight: 500;
  /* line-height: 17px; */
  line-height: 0.89vw;

  /* padding: 0 11.5px; */
  padding: 0 0.60vw;

  /* border-radius: 10.7px; */
  border-radius: 0.56vw;

  /* border: 1px solid #86FFCF; */
  border: 0.05vw solid #86FFCF;

}

.recommend-products .products-list,
.recommend-products .products-swiper {

  cursor: pointer;
  position: relative;
  width: 45.21vw;
  height: 25vw;
  overflow: hidden;
  box-sizing: border-box;

  /* background-color: #222; */
}

.recommend-products .products-swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.recommend-products .products-list .products-item,
.recommend-products .products-swiper .swiper-slide {
  /* width: 868px;
  height: 480px; */
  width: 100% !important;
  height: 25vw;
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
  position: relative;
  /* border-radius: 10px; */
  border-radius: 0.52vw;
  box-sizing: border-box;

  background-color: #222;
  justify-content: space-between;
}

.recommend-products .products-list .products-item img {
  width: 100%
}

.recommend-products .products-list .products-item .products-tag {

  color: #000;
  position: absolute;
  top: 0;
  left: 0;

  /* font-size: 23px; */
  font-size: 1.20vw;

  font-weight: 700;
  /* padding: 5.5px 10px; */
  padding: 0.29vw 0.52vw;

  background-color: #86FFCF;
  /* border-top-left-radius: 10px; */
  border-top-left-radius: 0.52vw;

  /* border-bottom-right-radius: 10px; */
  border-bottom-right-radius: 0.52vw;

}

.recommend-products .products-list .products-item .products-left {
  

  position: absolute;
  /* top: 125px;
  left: 76px; */

  top: 6.51vw;
  left: 3.96vw;

}

.recommend-products .products-list .products-item .products-left .products-name {
  color: #86FFCF;
  /* font-size: 49px; */
  font-size: 2.55vw;
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Inter";

}

.b_go {
  width: 3vh;
  position: absolute;
  bottom: 9%;
  right: 5%;
}
/* .recommend-products .products-list .products-item .products-left .products-parameter-text {

  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  margin-bottom: 50px;
  font-family: "Inter";

} */

/* .recommend-products .products-list .products-item .products-img {
  width: 102px;
  height: 288px;
  margin-top: 105px;
  margin-right: 161.5px;
} */

/* .recommend-products .products-list .products-item .products-img img {
  width: 100%;
  display: block;
} */

/* .products-parameter {
  gap: 28px;
  display: flex;
  padding: 0 250px;
  margin-bottom: 100px;
  justify-content: space-between;
} */

.products-parameter-box {
  /* gap: 28px; */
  gap: 1.46vw;

  display: flex;
  /* padding: 0 250px; */
  padding: 0 13.02vw;

  /* margin-bottom: 100px; */
  margin-bottom: 5.21vw;

  justify-content: space-between;
}

.products-parameter .products-parameter-content {
  /* color: #fff; */
  overflow: hidden;
  position: relative;
}

.products-parameter .products-parameter-content .parameter-text {
  color: #fff;
  position: absolute;
  /* top: 18px; */
  top: 0.94vw;

  /* left: 23.5px; */
  left: 1.22vw;

  z-index: 1;
  /* font-size: 14px; */
  font-size: 0.73vw;

  font-weight: 500;
  /* line-height: 17px; */
  line-height: 0.89vw;

}

.products-parameter .products-parameter-content img {
  width: 100%;
  transition: all 0.3s;
}

.products-parameter .products-parameter-content:hover img {

  transform: scale(1.1);

}

.products-parameter .products-parameter-content::after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: red; */

  background-image: url("../images/5.png");
}

.slogan-line {
  width: 100%;
  /* height: 243px; */
  height: 21.66vw;

  color: #fff;
  display: flex;
  cursor: pointer;
  overflow: hidden;
  align-items: flex-end;
  background-size: 100%;
  flex-direction: column;
  background-color: #000;
  background-repeat: no-repeat;
}

.slogan-line img {
  width: 100%;
}

.slogan-line .slogan-box {
  text-align: center;
}

.slogan-line .slogan-title {
  /* font-size: 33px; */
  font-size: 1.72vw;

  font-weight: 700;
  /* line-height: 40px; */
  line-height: 2.08vw;

  /* margin-bottom: 15px; */
  margin-bottom: 0.78vw;

}

.slogan-line .slogan-subheading {
  /* font-size: 23px; */
  font-weight: 700;
  /* line-height: 28px; */
  line-height: 1.46vw;

  /* margin-bottom: 35px; */
  margin-bottom: 1.82vw;

}

.slogan-line .slogan-content {
  /* font-size: 14px; */
  font-size: 0.73vw;

  font-weight: 500;
  /* line-height: 17px; */
  line-height: 0.89vw;

}

.brand-storys {
  color: #fff;
  display: flex;
  /* padding-top: 153px; */
  padding-top: 7.97vw;

  align-items: center;
  flex-direction: column;
}

.brand-storys .brand-storys-title {
  /* font-size: 42px; */
  font-size: 2.19vw;

  font-weight: 700;
  /* line-height: 50px; */
  /* padding-bottom: 60px; */
  line-height: 2.60vw;
  padding-bottom: 3.13vw;

}

.brand-storys-box {

  /* width: 1420px;
  height: 690px; */
  width: 73.96vw;
  height: 35.94vw;

  display: grid;

  /* grid-row-gap: 14px;
  grid-column-gap: 14px; */
  grid-row-gap: 0.73vw;
  grid-column-gap: 0.73vw;
  grid-template-rows: repeat(36, 1fr);
  grid-template-columns: repeat(30, 1fr);

}

.brand-storys-box .brand-storys-item {
  display: flex;
  cursor: pointer;
  position: relative;
  /* border-radius: 20px; */
  border-radius: 1.04vw;

  flex-direction: column;
  background-color: #323538;
  justify-content: space-between;

}

.brand-storys-box .brand-storys-item .storys-title {
  /* font-size: 20px; */
  font-weight: 700;
  /* line-height: 24px; */
  font-size: 1.04vw;
  line-height: 1.25vw;
}

.brand-storys-box .brand-storys-item.item-1 .storys-title {
  /* font-size: 45px; */
  font-size: 2.34vw;

  font-weight: 700;
  /* line-height: 55px; */
  line-height: 2.86vw;

  /* padding-left: 58px; */
  /* padding-top: 82.5px; */
  padding-left: 3.02vw;
  padding-top: 4.30vw;

}

.brand-storys-box .brand-storys-item.item-1 .storys-content {
  /* padding-left: 59.5px;
  padding-bottom: 45px; */
  padding-left: 3.10vw;
  padding-bottom: 2.34vw;
}

.brand-storys-box .brand-storys-item.item-1 {

  grid-area: 1 / 1 / 37 / 11;

  
  background-size: 101.5%;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size 0.5s ease;
  background-image: url("../images/7.jpg");
}

.brand-storys-box .brand-storys-item.item-1:hover {
  background-size: 120%;
}

.brand-storys-box .brand-storys-item.item-2 {
  
  color: #000;
  display: block;
  /* padding-top: 27.5px; */
  /* padding-left: 34.5px; */
  padding-top: 1.43vw;
  padding-left: 1.80vw;
  background-size: 101%;
  grid-area: 1 / 11 / 19 / 22;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size 0.5s ease;
  background-image: url("../images/8.jpg");
}

.brand-storys-box .brand-storys-item.item-2:hover {
  background-size: 120%;
}

.brand-storys-box .brand-storys-item.item-2 .storys-content {
  /* font-size: 14px; */
  font-weight: 500;
  /* line-height: 17px; */
  font-size: 0.73vw;
  line-height: 0.89vw;

}

.brand-storys-box .brand-storys-item.item-3 {
  
  grid-area: 1 / 22 / 19 / 31;

  color: #000;
  
  overflow: hidden;
  background-color: #fff;
  justify-content: flex-end;
  

}

.brand-storys-box .brand-storys-item.item-3 .item-3-img {
  width: 101%;
  position: absolute;
  top: -1%;
  left: -1%;
  overflow: hidden;
}

.brand-storys-box .brand-storys-item.item-3 img {
  width: 100%;
  transition: transform 0.5s ease;
  
}

.brand-storys-box .brand-storys-item.item-3:hover .item-3-img img {

  transform: scale(1.2);

}

.brand-storys-box .brand-storys-item.item-3 .storys-title {
  /* font-size: 20px; */
  font-weight: 700;
  /* line-height: 25px;
  margin-left: 35px;
  margin-bottom: 20px; */
  font-size: 1.04vw;
  line-height: 1.30vw;
  margin-left: 1.82vw;
  margin-bottom: 1.04vw;
}

.brand-storys-box .brand-storys-item.item-3 .storys-content {
  /* font-size: 14px; */
  font-weight: 500;
  /* line-height: 17px;
  margin-left: 35px;
  margin-bottom: 30px; */
  font-size: 0.73vw;
  line-height: 0.89vw;
  margin-left: 1.82vw;
  margin-bottom: 1.56vw;

}

.brand-storys-box .brand-storys-item.item-4 {

  grid-area: 19 / 11 / 37 / 18;

  background-color: rgb(26, 56, 54);

}

.brand-storys-box .brand-storys-item.item-4 .storys-title {
  /* font-size: 20px; */
  font-weight: 700;
  /* margin-top: 25px; */
  /* margin-left: 33px; */
  /* line-height: 24px; */
  font-size: 1.04vw;
  margin-top: 1.30vw;
  margin-left: 1.72vw;
  line-height: 1.25vw;

}

.brand-storys-box .brand-storys-item.item-4 .storys-content {
  /* font-size: 14px; */
  font-weight: 500;
  /* line-height: 17px; */
  /* margin-left: 33px; */
  font-size: 0.73vw;
  line-height: 0.89vw;
  margin-left: 1.72vw;

}

.brand-storys-box .brand-storys-item.item-4 .item-4-img {
  width: 100%;
  overflow: hidden;
}

.brand-storys-box .brand-storys-item.item-4 .item-4-img img {
  width: 100%;
  transition: transform 0.5s ease;
}

.brand-storys-box .brand-storys-item.item-4:hover .item-4-img img {

  transform: scale(1.2);

}

.brand-storys-box .brand-storys-item.item-5 {

  grid-area: 19 / 18 / 37 / 26;

  background-size: 101%;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size 0.5s ease;
  background-image: url("../images/11.jpg");

}

.brand-storys-box .brand-storys-item.item-5:hover {
  background-size: 120%;
}

.brand-storys-box .brand-storys-item.item-5 .storys-title {
  /* font-size: 20px; */
  font-weight: 700;
  /* margin-top: 28px; */
  /* margin-left: 38px; */
  /* line-height: 24px; */
  font-size: 1.04vw;
  margin-top: 1.46vw;
  margin-left: 1.98vw;
  line-height: 1.25vw;

}

.brand-storys-box .brand-storys-item.item-5 .storys-content {
  /* font-size: 14px; */
  font-weight: 500;
  /* line-height: 17px; */
  /* margin-left: 38px; */
  /* margin-bottom: 25px; */
  font-size: 0.73vw;
  line-height: 0.89vw;
  margin-left: 1.98vw;
  margin-bottom: 1.30vw;

}

.brand-storys-box .brand-storys-item.item-6 {
  
  grid-area: 19 / 26 / 28 / 31;

  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size 0.5s ease;
  background-image: url("../images/12.png");

}

.brand-storys-box .brand-storys-item.item-6:hover {
  background-size: 120%;
}

/* .brand-storys-box .brand-storys-item.item-6 img {
  width: 100%;
} */

.brand-storys-box .brand-storys-item.item-7 {

  grid-area: 28 / 26 / 37 / 31;
  background-size: 101%;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size 0.5s ease;
  background-image: url("../images/13.png");

}

.brand-storys-box .brand-storys-item.item-7:hover {
  background-size: 120%;
}

/* .brand-storys-box .brand-storys-item.item-7 img {
  width: 100%;
} */

.new-product {
  display: flex;
  /* margin-top: 168px; */
  margin-top: 8.75vw;

  align-items: center;
  flex-direction: column;
}

.new-product .new-product-title {
  color: #fff;
  /* font-size: 42px; */
  font-size: 2.19vw;

  font-weight: 700;
  /* line-height: 50px; */
  line-height: 2.60vw;

  text-align: center;
  /* margin-bottom: 70px; */
  margin-bottom: 3.65vw;

}

.new-product .new-product-box {
  /* gap: 108px; */
  gap: 5.63vw;

  display: flex;

}

.new-product .new-product-box .new-product-left {
  /* width: 670px; */
  width: 34.90vw;
  cursor: pointer;
  overflow: hidden;
  border-radius: 20px;
}

.new-product .new-product-box .new-product-left img {
  width: 100%;
  transition: all 0.3s ease-out;
}


.new-product .new-product-box .new-product-left:hover img {
  transform: scale(1.1);
}

.new-product .new-product-box .new-product-right .new-product-slogan {

  color: #fff;
  /* font-size: 32px; */
  font-weight: 700;
  /* line-height: 39px; */

  font-size: 1.67vw;
  line-height: 2.03vw;


}

.new-product .new-product-box .new-product-list  {
  color: #fff;
  display: flex;
  /* margin-top: 138px; */
  margin-top: 7.19vw;

  flex-direction: column;
}

.new-product .new-product-box .new-product-list .new-product-list-title {

  /* font-size: 16px; */
  font-weight: 700;
  /* line-height: 19px; */
  /* margin-bottom: 10px; */

  font-size: 0.83vw;
  line-height: 0.99vw;
  margin-bottom: 0.52vw;


}

.new-product .new-product-box .new-product-list .new-product-list-content {
  /* gap: 13.5px; */
  gap: 0.70vw;

  display: flex;
  flex-direction: column;
}

.new-product .new-product-box .new-product-list .new-product-list-content .new-product-list-row {
  /* gap: 43px; */
  gap: 2.24vw;

  display: flex;
  cursor: pointer;
  align-items: center;
}

.new-product .new-product-box .new-product-list .new-product-list-content .new-product-list-row .new-product-list-img {
  /* width: 102.5px;
  height: 51px;
  border-radius: 8px; */
  width: 5.34vw;
  height: 2.66vw;
  border-radius: 0.42vw;
}

.new-product .new-product-box .new-product-list .new-product-list-content .new-product-list-row .new-product-list-img img {
  width: 100%;
}

.new-product .new-product-box .new-product-list .new-product-list-content .new-product-list-row .new-product-list-text {
  width: 100%;
  /* height: 51px; */
  height: 2.66vw;

  display: flex;
  /* font-size: 14px; */
  font-size: 0.73vw;

  font-weight: 400;
  /* line-height: 17px; */
  line-height: 0.89vw;

  align-items: center;
  justify-content: space-between;
  /* border-bottom: 1px solid transparent; */
  border-bottom: 0.05vw solid transparent;

}

.new-product .new-product-box .new-product-list .new-product-list-content .new-product-list-row .new-product-list-text img {
  /* width: 14px;
  height: 14px; */
  width: 0.73vw;
  height: 0.73vw;
  display: none;
}

.new-product .new-product-box .new-product-list .new-product-list-content .new-product-list-row:hover .new-product-list-text img {
  display: block;
}

.new-product .new-product-box .new-product-list .new-product-list-content .new-product-list-row:hover .new-product-list-text {
  
  /* border-bottom: 1px solid #fff; */

  border-bottom: 0.05vw solid #fff;


}

.comments-box {
  color: #fff;
}

.comments-box {
  /* margin-top: 168px;
  margin-bottom: 158px; */
  margin-top: 8.75vw;
  margin-bottom: 8.23vw;
}

.comments-box .comments-title {
  /* font-size: 42px; */
  font-weight: 700;
  /* line-height: 50px; */
  text-align: center;
  /* margin-bottom: 70px; */
  font-size: 2.19vw;
  line-height: 2.60vw;
  margin-bottom: 3.65vw;

}

.comments-list {
  /* height: 400px;
  gap: 55px; */
  height: 20.83vw;
  gap: 2.86vw;
  display: flex;
  /* margin-bottom: 158px; */
  margin-bottom: 8.23vw;

  flex-direction: column;
}

.comments-list .comments-item {
  /* width: 593px;
  height: 172px; */
  width: 30.89vw;
  height: 8.96vw;
  display: flex;
  position: absolute;
  align-items: center;
  /* border-radius: 13px;
  padding: 0 65px 0 45px; */
  border-radius: 0.68vw;
  padding: 0 3.39vw 0 2.34vw;
  background-color: #17191B;
  justify-content: space-between;
}

.comments-list .comments-line {
  width: 100%;
  /* height: 172px;
  gap: 50px; */
  height: 8.96vw;
  gap: 2.60vw;
  display: flex;
  overflow: hidden;
  position: relative;
}

.comments-list .comments-item .comments-head {
  /* width: 60px;
  height: 60px; */
  width: 3.13vw;
  height: 3.13vw;
  flex-shrink: 0;
}

.comments-list .comments-item .comments-head img {
  width: 100%;
}

.comments-list .comments-item .comments-content {
  /* width: 375px;
  height: 78px;
  gap: 12px; */
  width: 19.53vw;
  height: 4.06vw;
  gap: 0.63vw;
  display: flex;
  flex-direction: column;
}

.comments-list .comments-item .comments-content .comments-name {
  /* font-size: 19px; */
  font-weight: 600;
  /* line-height: 23px; */
  font-size: 0.99vw;
  line-height: 1.20vw;

}

.comments-list .comments-item .comments-content .comments-text {
  /* font-size: 14px; */
  font-weight: 400;
  /* line-height: 17px; */
  font-size: 0.73vw;
  line-height: 0.89vw;

}
.banner_title{
  position: absolute;
  top: 34%;
  right: 16%;
  color: #000;
}
.banner_title h1{
  font-size: 1.8vw;
  font-weight: 500;
 
  line-height: 2vw;
  font-family: Inter-Black;
}
.banner_title h2{
  font-weight: 600;
  font-family: Inter-Light;
  margin-top: 3%;
  font-size: 1.5vw;
}
.banner_title a{
  display: inline-block;
  margin-top: 11%;
  
  padding: 2% 10%;
  background-color: #000;
  color: #fff;
  font-family: Inter-Light;
  font-size: 1vw;
  font-weight: 560;
  border-radius: 4vw;
}
.banner_title a:hover{
  color: #fff !important;
  font-size: 1vw !important;
  font-weight: 560 !important;
}