/* index -- swiper */
.swiper {
  width: 100%;
}

.swiper-slide {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
  height: auto;
}

/* 修改导航按钮颜色 */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  /* 修改箭头颜色为红色 */
}

/* 悬停状态 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #f38816;
  /* 悬停时颜色变深 */
}

/* 修改分页器小圆点颜色 */
.swiper-pagination-bullet {
  background: transparent;
  /* 未激活状态颜色 */
  opacity: 1;
  width: 12px;
  height: 12px;
  margin: 0 6px !important;
  border: 1px solid #fff;
  border-radius: 50%;
}

/* 修改激活状态的小圆点 */
.swiper-pagination-bullet-active {
  background: #fff;
  /* 激活状态颜色 */
}

/* index -- about */
.about-box {
  width: 100%;
  background-color: #fff;
  padding: 40px 0 20px;
}

.about-box .about-title {
  margin-bottom: 15px;
  color: #222;
  width: 100%;
  text-align: center;
}

.about-box .about-list {
  width: 100%;
  display: flex;
}

.about-box .about-list .about-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  flex: 1;
}

.about-box .about-list .about-left .about-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 15px;
}

.about-box .about-text {
  margin-bottom: 20px;
}

.about-box .about-list .about-left .about-content .about-text p {
  font-size: 18px;
  color: #414141;
  font-weight: 600;
  line-height: 30px;
}

.about-box .about-list .about-left .about-content .about-text .about-content-text {
  font-size: 16px;
  color: #414141;
}

.about-box .about-button {
  display: inline-block;
  padding: 15px 45px;
  font-size: 14px;
  color: #fff;
  background-color: #ED1C28;
  cursor: pointer;
  transition: all 03 ease;
}

.about-box .about-button:hover {
  background-color: #222;
}

.about-box .about-right {
  width: 45%;
  flex: 1;
}

/* index -- profile */
.profile {
  width: 100%;
  background-color: #000000;
  padding: 10px 0 30px;
}

.profile .profile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.profile .profile-top .profile-img {
  flex: 1;
  padding: 0 10px;
}

.profile .profile-top .profile-img:hover {
  animation: mymove 3s linear infinite alternate;
}

@keyframes mymove {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(1.1);
  }

  66% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

.profile .profile-top .profile-img img {
  max-width: 100%;
  height: auto;
}

.profile .profile-top .profile-content {
  flex: 1;
  display: flex;
  height: 545px;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding-left: 60px;
}

.profile .profile-top .profile-content .profile-text {
  padding: 10px;
}

.profile .profile-top .profile-content .profile-text .profile-text-title {
  font-size: 70px;
  line-height: 80px;
  color: #EEE;
}

.profile .profile-top .profile-content .profile-text .profile-content-text {
  font-size: 16px;
  color: #EEE;
}

.profile .profile-top .profile-content .profile-text .profile-content-text p {
  max-width: 100%;
}

.profile .profile-top .profile-content .profile-button {
  display: inline-block;
  padding: 15px 45px;
  color: #fff;
  background-color: #ED1C28;
  text-transform: uppercase;
  cursor: pointer;
}

.profile .profile-top .profile-content .profile-button:hover {
  background-color: #222;
}

.profile .profile-bottom {
  padding: 60px 0;
  width: 100%;
}

.profile .profile-bottom .profile-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile .profile-bottom .profile-list .profile-item {
  position: relative;
  width: 400px;
  overflow: hidden;
}

.profile .profile-bottom .profile-list .profile-item img {
  width: 400px;
  height: 400px;
  transition: all 0.9s ease;
}

.profile .profile-bottom .profile-list .profile-item img:hover {
  transform: scale(1.1);
}

.profile .profile-bottom .profile-list .profile-bottom-text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  width: 100%;
}

.profile .profile-bottom .profile-list .profile-bottom-text h3 {
  font-size: 30px;
  color: #fff;
  margin-bottom: 10px;
  line-height: 30px;
}

.profile .profile-bottom .profile-list .profile-bottom-text p {
  font-size: 16px;
  color: #fff;
}

/* index -- products */
.product {
  width: 100%;
  background-color: #fff;
  padding: 60px 0;
}

.product .product-top {
  text-align: center;
  font-size: 36px;
  color: #222;
  font-weight: 600;
  text-transform: uppercase;
}

.product .product-list {
  margin-top: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product .product-list .product-item {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.product .product-list .product-item .product-item-img img {
  height: 300px;
  transition: all 0.4s ease;
  cursor: pointer;
  max-width: 100%;
}

.product .product-list .product-item img:hover {
  transform: scale(1.1);
}

.product .product-list .product-item .product-brand {
  text-align: left;
  font-size: 24px;
  margin-bottom: 20px;
  width: 100%;
  color: #222;
  margin-top: 10px;
}


.product .product-list .product-item .product-brand-news {
  text-align: left;
  font-size: 14px;
  color: #6c6c6c;
  margin-top: 20px;
}

.product .product-list .product-item .product-title {
  font-size: 30px;
  color: #222;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s ease;
  display: -webkit-box;
  text-overflow: clip;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 30px;
}

.product .product-list .product-item .product-title:hover {
  color: #ED1C28;
}

.product .product-more {
  margin-top: 30px;
  text-align: center;
}

.product .product-more .product-button {
  display: inline-block;
  padding: 15px 45px;
  background-color: #ED1C28;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s ease;
  display: inline-block;
}

.product .product-more .product-button:hover {
  background-color: #222;
}

/* index -- classify */
.classify {
  width: 100%;
  padding: 60px 0;
  background-color: #000000;
}

.classify .classify-top {
  text-align: center;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
}

.classify .classify-list {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.classify .classify-list img {
  width: 230px;
  height: 230px;
}

.classify .classify-list .classify-item {
  width: 100%;
  background-color: #e0e0e0;
  padding: 10px 0 20px;
}

.classify .classify-list .classify-item .classify-title {
  color: #222;
  font-size: 22px;
  margin-bottom: 20px;
  text-align: center;
}

.classify .classify-list .classify-item .classify-brand {
  font-size: 12px;
  text-align: center;
  color: #707070;
}

.classify .swiper-button-next {
  color: #ED1C28;
  background-color: #fff;
  width: 30px;
  height: 30px;
}

.classify .swiper-button-prev {
  color: #ED1C28;
  background-color: #fff;
  width: 30px;
  height: 30px;
}

.classify .swiper-button-next::after {
  font-size: 16px !important;
  color: #ED1C28;
  font-weight: 600;
}
.classify .swiper-button-prev::after {
  font-size: 16px !important;
  color: #ED1C28;
  font-weight: 600;
}
.classify .swiper-button-prev:hover{
  background-color: #ED1C28;
}
.classify .swiper-button-prev:hover:after {
  color: #fff;
}
.classify .swiper-button-next:hover {
  background-color: #ED1C28;
}
.classify .swiper-button-next:hover::after{
  color: #fff;
}

/* index -- news */
.news {
  background-color: #fff;
  padding: 10px 0 60px;
}

.news .news-border {
  margin-bottom: 50px;
  padding: 15px 0;
  border-bottom: 4px double #e5e5e5;
}

.news .news-top {
  font-size: 36px;
  color: #222;
  text-align: center;
}

.news .mySwiper3 {
  margin-top: 50px;
}

.news .news-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 20px;
  cursor: pointer;
}

.news .news-list img {
  width: 100%;
  height: 300px;
}

.news .news-list .news-item {
  background-color: #f0f0f0;
  padding: 30px 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #222;
}

.news .news-list .news-item .news-title a:hover {
  color: #ED1C28;
}

.news .swiper-button-next {
  color: #ED1C28;
  background-color: #f0f0f0;
  width: 45px;
  height: 45px;
}

.news .swiper-button-prev {
  color: #ED1C28;
  background-color: #f0f0f0;
  width: 45px;
  height: 45px;
}

.news .swiper-button-prev::after {
  font-size: 18px !important;
  color: #ED1C28;
  font-weight: 600;
}
.news .swiper-button-next::after {
  font-size: 18px !important;
  color: #ED1C28;
  font-weight: 600;
}

.news .swiper-button-next:hover {
  background-color: #ED1C28;
}
.news .swiper-button-prev:hover {
  background-color: #ED1C28;
}

.news .swiper-button-next:hover::after {
  color: #fff;
}
.news .swiper-button-prev:hover::after {
  color: #fff;
}

/* index -- our */
.our {
  padding: 60px 0;
  background-color: #000000;
  width: 100%;
}

.our .our-top {
  font-size: 36px;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

.our .our-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.our .our-list .our-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.our .our-list .our-item .our-item-img{
  overflow: hidden;
}
.our .our-list .our-item .our-item-img img {
  max-width: 100%;
  height: auto;
  transition: all 0.4s ease-in-out;
}
.our .our-list .our-item .our-item-img img:hover{
  transform: scale(1.1);
}

.our .our-list .our-item .our-title {
  font-size: 16px;
  color: #fff;
  margin-top: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: centerc;
}

.download{
    background-color: #666666;
    padding: 60px 0;
}
.download-top{
    font-size: 36px;
    color: #fff;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
.download .download-btn{
    width: 100%;
    text-align: center;
}
.download .download-btn .download-btn-btn{
    font-size: 15px;
    padding: 15px 40px;
    background-color: #ed1c28;
    color: #fff;
    cursor: pointer;
    display: inline-block;
}
.download .download-btn .download-btn-btn:hover{
    background-color: #000000;
}


/* index -- parter */
.partner {
  padding: 40px 0;
  background: url('/static/image/parter-bg.jpg');
  background-color: #000;
}

.partner-top{
    font-size: 36px;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}

.partner .partner-list img {
  width: 100%;
  height: 100%;
}

@media (max-width:920px) {
  .about-box .about-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .profile .profile-top {
    flex-direction: column;
  }

  .profile .profile-top .profile-content {
    padding: 0 !important;
    height: auto;
  }

  .profile .profile-top .profile-content .profile-button {
    margin-left: 10px;
  }

  .product .product-list {
    gap: 0px;
  }

  .product .product-list .product-item .product-brand {
    font-size: 21px;
  }

  .product .product-list .product-item .product-title {
    font-size: 20px;
  }

  .our .our-list {
    padding: 0 40px;
    grid-template-columns: repeat(2, 1fr);
  }

  .mySwiper .swiper-button-next {
    display: none;
  }

  .mySwiper .swiper-button-prev {
    display: none;
  }

  .about-box .about-right {
    width: auto;
    padding: 10px;
  }

  /* .mySwiper2 .swiper-button-prev,.swiper-button-next{
    display: block;
  } */
}

@media (max-width:768px) {
  .profile .profile-bottom {
    padding: 40px 0;
  }

  .profile .profile-bottom .profile-list {
    flex-direction: column;
  }

  .profile .profile-bottom .profile-list .profile-item {
    width: auto;
    padding: 10px;
  }

  .profile .profile-bottom .profile-list .profile-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .product .product-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  .our .our-list {
    grid-template-columns: repeat(1, 1fr);
  }

  .our .our-list .our-item img {
    height: 400px !important;
    width: 290px;
  }
}