img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%
}

.characteristics1 {
  background: #F0F2F5;
  padding: 9.53125vw 5.72917vw 6.45833vw 5.72917vw;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.characteristics1 .right {
  width: 46.875vw;
  height: 27.96875vw;
  overflow: hidden
}

.characteristics1 .right .swiper-container {
  width: 100%;
  height: 100%
}

.characteristics1 .right .swiper-container .swiper-pagination {
  bottom: 1.66667vw;
  left: 1.875vw;
  z-index: 2;
  width: fit-content
}

.characteristics1 .right .swiper-container .swiper-pagination span {
  width: .52083vw;
  height: .52083vw;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1 !important;
  margin: 0 .83333vw 0 0 !important;
  transition: .3s ease
}

.characteristics1 .right .swiper-container .swiper-pagination span:last-child {
  margin: 0 !important
}

.characteristics1 .right .swiper-container .swiper-pagination span.swiper-pagination-bullet-active {
  background: #fff
}

.characteristics1 .right .swiper-container .swiper-slide {
  border-radius: .52083vw;
  overflow: hidden
}

.characteristics1 .right .swiper-container .swiper-slide:hover img {
  transform: scale(1.05)
}

.characteristics1 .right .swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  transition: 1s
}

.characteristics1 .left {
  width: 31.25vw;
  position: relative;
  z-index: 2
}

.characteristics1 .left .brand {
  display: flex;
  align-items: center;
  gap: .57292vw
}

.characteristics1 .left .brand a {
  color: #666;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.characteristics1 .left .brand svg {
  width: 1.14583vw;
  height: 1.14583vw;
  display: block;
  position: relative;
  top: .10417vw
}

.characteristics1 .left .yellow {
  height: 3.125vw;
  width: fit-content;
  padding: 0 1.04167vw;
  border-radius: .52083vw;
  background: #FF9600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.44792vw 0 0 0;
  color: #fff
}

.characteristics1 .left .p1 {
  color: #27265F;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  text-transform: capitalize;
  margin: 1.04167vw 0 2.60417vw;
  white-space: nowrap
}

.characteristics1 .left .p2 {
  color: #333;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.characteristics1 .left .more {
  display: flex;
  width: fit-content;
  height: 3.4375vw;
  padding: 1.5625vw 2.65625vw;
  justify-content: center;
  align-items: center;
  gap: .52083vw;
  border-radius: 520.78125vw;
  border: 1px solid #27265F;
  margin: 3.95833vw 0 0 0;
  transition: .6s ease
}

.characteristics1 .left .more:hover {
  background: #27265F
}

.characteristics1 .left .more:hover svg path {
  stroke: #fff
}

.characteristics1 .left .more:hover p {
  color: #fff
}

.characteristics1 .left .more svg {
  width: 1.5625vw;
  height: 1.5625vw
}

.characteristics1 .left .more svg path {
  transition: .6s ease
}

.characteristics1 .left .more p {
  color: #27265F;
  transition: .6s ease
}

.characteristics2 {
  overflow: hidden;
  background: #F0F2F5;
  padding: 0 0 4.6875vw
}

.characteristics2 .title {
  text-align: center;
  color: #27265F;
  font-style: normal;
  font-weight: 700;
  line-height: 120%
}

.characteristics2 .content {
  margin: 4.11458vw 0 0 0
}

.characteristics2 .content .swiper2 .swiper-slide .item {
  width: 100%;
  border-radius: 1.04167vw;
  background: #FFF;
  padding: 3.38542vw 1.5625vw 2.8125vw 1.5625vw;
  height: 27.0833vw;
}

.characteristics2 .content .swiper2 .swiper-slide .item .up {
  padding: 0 0 2.08333vw;
  border-bottom: 1px dashed rgba(255, 150, 0, 0.6)
}

.characteristics2 .content .swiper2 .swiper-slide .item .up .icon {
  width: 6.25vw;
  height: 6.25vw;
  border-radius: .52083vw;
  border: 1px solid #FF9600;
  background: #FF9600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto
}

.characteristics2 .content .swiper2 .swiper-slide .item .up .icon img {
  width: 3.64583vw;
  height: 3.64583vw;
  object-fit: contain
}

.characteristics2 .content .swiper2 .swiper-slide .item .text {
  margin: 1.5625vw 0 0 0
}

.characteristics2 .content .swiper2 .swiper-slide .item .text .p1 {
  color: #333;
  height: 3em;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 1.35417vw
}

.characteristics2 .content .swiper2 .swiper-slide .item .text .p2 {
  color: #666;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 140%
}

.characteristics3 {
  padding: 0 5.72917vw 5.20833vw 5.72917vw;
  background: #F0F2F5
}

.characteristics3 .title {
  text-align: center;
  color: #27265F;
  font-style: normal;
  font-weight: 700;
  margin: 0 0 3.64583vw
}

.characteristics3 .content .table {
  border-radius: .52083vw;
  background: #FFF;
  padding: .83333vw 1.5625vw 1.25vw 1.5625vw
}

.characteristics3 .content .table table {
  width: 100%
}

.characteristics3 .content .table tr:first-child td {
  font-size: 1.5625vw;
  font-weight: bold
}

.characteristics3 .content .table tr:first-child td:after {
  display: none
}

.characteristics3 .content .table tr td {
  padding: 1.25vw 1.04167vw;
  position: relative;
  font-style: normal;
  font-weight: 400
}

.characteristics3 .content .table tr td:after {
  content: '';
  position: absolute;
  width: 95%;
  left: 0;
  bottom: 0;
  height: 1px;
  border-bottom: 1px dashed #ccc
}

.characteristics3 .content .table tr td:last-child:after {
  width: 100%
}

.characteristics4 {
  background: #F0F2F5;
  padding: 0 5.72917vw 7.44792vw 5.72917vw
}

.characteristics4 .title {
  text-align: center;
  color: #27265F;
  font-style: normal;
  font-weight: 700;
  text-transform: capitalize
}

.characteristics4 .content {
  margin: 3.64583vw 0 0 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4.42708vw
}

.characteristics4 .content .item {
  width: 100%;
  height: 8.85417vw;
  border-radius: 10px;
  border: 1px solid #FF9600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: .6s ease
}

.characteristics4 .content .item:hover {
  border: 1px solid transparent;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 4px 20px 0 rgba(39, 38, 95, 0.1)
}

.characteristics4 .content .item:hover .hide {
  opacity: 1
}

.characteristics4 .content .item img {
  width: 3.85417vw
}

.characteristics4 .content .item .hide {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -1.25vw);
  width: max-content;
  height: 3.125vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: .52083vw;
  background: #FFF;
  padding: 0 1.25vw;
  opacity: 0;
  pointer-events: none;
  transition: .6s ease
}

.characteristics4 .content .item .hide svg {
  width: 1.19792vw;
  height: 1.19792vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -.625vw
}

.characteristics5 {
  padding: 4.6875vw 5.72917vw 5.67708vw 5.72917vw;
  display: flex;
  background: #FAFAFA;
  align-items: center;
  justify-content: space-between
}

.characteristics5 .left {
  width: 35.41667vw;
  height: 42.1875vw;
  border-radius: .52083vw;
  overflow: hidden
}

.characteristics5 .left .swiper3 {
  width: 100%;
  height: 100%
}

.characteristics5 .left .swiper3 .swiper-slide {
  border-radius: .52083vw;
  overflow: hidden
}

.characteristics5 .left .swiper3 .swiper-slide img {
  width: 100%;
  height: 100%
}

.characteristics5 .right {
  width: 44.79167vw
}

.characteristics5 .right .item {
  border-bottom: 1px solid #CCC
}

.characteristics5 .right .item.on .show .add img:first-child {
  opacity: 0
}

.characteristics5 .right .item.on .show .add img:last-child {
  opacity: 1
}

.characteristics5 .right .item:first-child {
  border-top: 1px solid #CCC
}

.characteristics5 .right .item .show {
  height: 6.25vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer
}

.characteristics5 .right .item .show p {
  color: #333;
  font-style: normal;
  font-weight: 700
}

.characteristics5 .right .item .show .add {
  width: 2.08333vw;
  height: 2.08333vw;
  position: relative
}

.characteristics5 .right .item .show .add img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: .6s ease
}

.characteristics5 .right .item .show .add img:nth-child(2) {
  opacity: 0
}

.characteristics5 .right .item .hide {
  overflow: hidden;
  display: none
}

.characteristics5 .right .item .hide>div {
  margin: 0 0 1.5625vw 0
}

.characteristics5 .right .item .hide>div .list {
  display: flex;
  gap: .67708vw
}

.characteristics5 .right .item .hide>div .list:not(:last-child) {
  margin: 0 0 1.14583vw
}

.characteristics5 .right .item .hide>div .list span {
  width: .625vw;
  height: .625vw;
  background: #FF9600;
  margin: .46875vw 0 0 0
}

.characteristics5 .right .item .hide>div .list .text .p1 {
  color: #27265F;
  font-style: normal;
  font-weight: 500;
  /* text-transform: capitalize; */
  margin: 0 0 .52083vw;
  line-height: 100%
}

.characteristics5 .right .item .hide>div .list .text .p2 {
  color: #333;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize
}

.characteristics6 {
  padding: 0 5.72917vw 5.20833vw 5.72917vw;
  background: #FAFAFA;
  overflow: hidden
}

.characteristics6 .content {
  border-radius: .52083vw;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.66667vw 1.66667vw 1.66667vw 5.20833vw
}

.characteristics6 .content .left .p1 {
  color: #333;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 6.25vw
}

.characteristics6 .content .left .flex {
  width: 27.39583vw;
  height: 10.10417vw;
  overflow: hidden;
  overflow-y: auto
}

.characteristics6 .content .left .flex::-webkit-scrollbar {
  width: .15625vw;
  display: block;
  border-radius: .52083vw
}

.characteristics6 .content .left .flex::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: .52083vw
}

.characteristics6 .content .left .flex::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: .52083vw
}

.characteristics6 .content .left .flex .item {
  width: 23.4375vw;
  padding: 1.66667vw 0;
  border-bottom: 1px dashed #ccc;
  display: flex;
  align-items: center;
  gap: .67708vw
}

.characteristics6 .content .left .flex .item p {
  color: #27265F;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.characteristics6 .content .left .flex .item svg {
  width: .72917vw;
  height: 1.09375vw
}

.characteristics6 .content .right {
  width: 46.875vw;
  height: 25.26042vw;
  border-radius: .52083vw;
  overflow: hidden
}

.characteristics6 .content .right:hover img {
  transform: scale(1.05)
}

.characteristics6 .content .right img {
  width: 100%;
  height: 100%;
  transition: 1s
}

.characteristics7 {
  background: #F0F2F5;
  padding: 5.20833vw 5.72917vw
}

.characteristics7 .title {
  color: #27265F;
  font-style: normal;
  font-weight: 700;
  text-transform: capitalize
}

.characteristics7 .content {
  margin: 4.16667vw 0 0 0
}

.characteristics7 .content .item {
  border-radius: 10px;
  background: #FAFAFA;
  padding: 1.5625vw;
  position: relative;
  display: flex;
  overflow: hidden
}

.characteristics7 .content .item:not(:last-child) {
  margin-bottom: 2.34375vw
}

.characteristics7 .content .item .pic {
  width: 33.54167vw;
  height: 20.3125vw;
  border-radius: 10px;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.characteristics7 .content .item .pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: all 600ms
}

.characteristics7 .content .item .info {
  width: 38.95833vw;
  margin-left: 4.16667vw
}

.characteristics7 .content .item .info .tag {
  color: #333;
  line-height: 1.2;
  border-radius: 100px;
  background: #EEE;
  display: inline-block;
  padding: .46875vw .83333vw;
  transition: all 600ms
}

.characteristics7 .content .item .info .p1 {
  color: #333;
  font-weight: 500;
  margin: .72917vw 0 .83333vw 0;
  line-height: 1;
  transition: all 600ms
}

.characteristics7 .content .item .info .des {
  color: #666
}

.characteristics7 .content .item .info .pt {
  margin: 1.82292vw 0 1.04167vw 0;
  color: #333;
  font-weight: 500
}

.characteristics7 .content .item .info .aList {
  display: flex;
  gap: 1.5625vw
}

.characteristics7 .content .item .info .aList .aItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3125vw
}

.characteristics7 .content .item .info .aList .aItem .icon {
  width: 4.58333vw;
  height: 2.91667vw;
  border-radius: 10px;
  border: 1px solid #FF9600;
  display: flex;
  align-items: center;
  justify-content: center
}

.characteristics7 .content .item .info .aList .aItem .icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.characteristics7 .content .item .info .aList .aItem p {
  color: #666;
  width: 5.72917vw;
  text-transform: capitalize
}

.characteristics7 .content .item a {
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/yy.png) no-repeat;
  background-size: 100% 100%;
  width: 8.54167vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(100%);
  transition: all 600ms
}

.characteristics7 .content .item a img {
  display: block
}

.characteristics7 .content .item a .jt {
  width: .78125vw
}

.characteristics7 .content .item a p {
  margin: .26042vw 0 1.30208vw 0;
  color: #FFF;
  text-transform: uppercase;
  font-weight: 500
}

.characteristics7 .content .item a .hand {
  width: 2.08333vw
}

.characteristics7 .content .item:hover .pic img {
  transform: scale(1.05)
}

.characteristics7 .content .item:hover .info .tag {
  background: #27265F;
  color: #fff
}

.characteristics7 .content .item:hover .info .p1 {
  color: #27265F
}

.characteristics7 .content .item:hover a {
  opacity: 1;
  transform: translateX(0)
}

.characteristics8 {
  background: #F0F2F5;
  padding: 0 5.72917vw 4.11458vw 5.72917vw
}

@media screen and (max-width: 768px) {
  .characteristics1 {
    padding: 85px 5% 0 5%;
    flex-direction: column
  }

  .characteristics1 .right {
    width: 100%;
    height: auto;
    margin: 30px 0 0 0
  }

  .characteristics1 .right .swiper-container .swiper-slide {
    border-radius: 10px
  }

  .characteristics1 .right .swiper-container .swiper-pagination {
    left: 5%;
    bottom: 10px
  }

  .characteristics1 .right .swiper-container .swiper-pagination span {
    width: 10px;
    height: 10px;
    margin: 0 7px 0 0 !important
  }

  .characteristics1 .right .swiper-container .swiper-pagination span:last-child {
    margin: 0 !important
  }

  .characteristics1 .left {
    width: 100%
  }

  .characteristics1 .left .brand {
    gap: 7px;
    font-size: 16px
  }

  .characteristics1 .left .brand svg {
    width: 20px;
    height: 20px;
    top: 2px
  }

  .characteristics1 .left .brand a {
    font-size: 14px
  }

  .characteristics1 .left .yellow {
    height: auto;
    padding: 10px;
    border-radius: 4px;
    margin: 20px 0 0 0
  }

  .characteristics1 .left .p1 {
    margin: 15px 0 20px
  }

  .characteristics1 .left .p2 {
    font-size: 16px
  }

  .characteristics1 .left .more {
    height: auto;
    padding: 10px 20px;
    border-radius: 30px;
    gap: 10px;
    margin: 20px 0 0 0
  }

  .characteristics1 .left .more p {
    font-size: 16px
  }

  .characteristics1 .left .more svg {
    width: 16px;
    height: 16px
  }

  .characteristics2 {
    padding: 30px 5% 0 5%;
    overflow: hidden
  }

  .characteristics2 .content {
    width: 95vw;
    margin: 30px 0 0 0
  }

  .characteristics2 .content .swiper2 .swiper-slide .item {
    padding: 20px;
    border-radius: 10px;
    height: 300px;
  }

  .characteristics2 .content .swiper2 .swiper-slide .item .up {
    padding: 0 0 30px
  }

  .characteristics2 .content .swiper2 .swiper-slide .item .up .icon {
    width: 70px;
    height: 70px
  }

  .characteristics2 .content .swiper2 .swiper-slide .item .up .icon img {
    width: 40px;
    height: 40px
  }

  .characteristics2 .content .swiper2 .swiper-slide .item .text {
    margin: 20px 0 0 0
  }

  .characteristics2 .content .swiper2 .swiper-slide .item .text .p1 {
    height: auto;
    margin: 0 0 14px
  }

  .characteristics2 .content .swiper2 .swiper-slide .item .text .p2 {
    font-size: 16px
  }

  .characteristics3 {
    padding: 30px 5%
  }

  .characteristics3 .content .table {
    padding: 10px;
    border-radius: 10px
  }

  .characteristics3 .content .table tr td {
    padding: 10px 0;
    font-size: 11px !important
  }

  .characteristics4 {
    padding: 30px 5%
  }

  .characteristics4 .content {
    margin: 30px 0 0 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
  }

  .characteristics4 .content .item {
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0
  }

  .characteristics4 .content .item img {
    width: 30px
  }

  .characteristics4 .content .item .hide {
    height: auto;
    transform: none;
    border-radius: 10px;
    padding: 0 15px;
    position: static;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    white-space: unset;
    width: 100%;
    font-size: 14px;
    text-align: center
  }

  .characteristics4 .content .item .hide svg {
    display: none
  }

  .characteristics5 {
    padding: 30px 5%;
    flex-direction: column
  }

  .characteristics5 .left {
    border-radius: 10px;
    width: 100%;
    height: auto
  }

  .characteristics5 .right {
    width: 100%;
    height: auto;
    margin: 30px 0 0 0
  }

  .characteristics5 .right .item .show {
    padding: 15px 0;
    height: auto
  }

  .characteristics5 .right .item .show p {
    font-size: 16px
  }

  .characteristics5 .right .item .show .add {
    width: 30px;
    height: 30px
  }

  .characteristics5 .right .item .hide>div {
    margin: 0 0 20px
  }

  .characteristics5 .right .item .hide>div .list {
    gap: 10px
  }

  .characteristics5 .right .item .hide>div .list:not(:last-child) {
    margin: 0 0 20px
  }

  .characteristics5 .right .item .hide>div .list span {
    width: 7px;
    height: 7px;
    margin: 6px 0 0 0
  }

  .characteristics5 .right .item .hide>div .list .text {
    flex: 1
  }

  .characteristics5 .right .item .hide>div .list .text .p1 {
    margin: 0 0 7px;
    font-size: 16px
  }

  .characteristics5 .right .item .hide>div .list .text .p2 {
    font-size: 14px
  }

  .characteristics6 {
    padding: 30px 5%
  }

  .characteristics6 .content {
    padding: 15px;
    flex-direction: column;
    align-items: unset;
    border-radius: 10px
  }

  .characteristics6 .content .left .p1 {
    margin: 0 0 10px
  }

  .characteristics6 .content .left .flex {
    width: 100%;
    height: auto
  }

  .characteristics6 .content .left .flex .item {
    width: 100%;
    padding: 20px 0;
    gap: 7px;
    justify-content: space-between
  }

  .characteristics6 .content .left .flex .item p {
    font-size: 13px
  }

  .characteristics6 .content .left .flex .item svg {
    width: 14px;
    height: 14px
  }

  .characteristics6 .content .right {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0 0 0
  }

  .characteristics7 {
    padding: 30px 5%
  }

  .characteristics7 .content {
    margin: 25px 0 0 0
  }

  .characteristics7 .content .item {
    padding: 15px;
    flex-direction: column;
    overflow: visible
  }

  .characteristics7 .content .item:not(:last-child) {
    margin-bottom: 20px
  }

  .characteristics7 .content .item .pic {
    width: 100%;
    height: auto
  }

  .characteristics7 .content .item .pic img {
    max-width: 100%;
    max-height: 100%
  }

  .characteristics7 .content .item .info {
    width: 100%;
    margin-left: 0;
    margin-top: 20px
  }

  .characteristics7 .content .item .info .tag {
    padding: 8px 12px;
    font-size: 14px
  }

  .characteristics7 .content .item .info .p1 {
    margin: 12px 0 14px;
    font-size: 18px
  }

  .characteristics7 .content .item .info .des {
    font-size: 14px
  }

  .characteristics7 .content .item .info .pt {
    margin: 25px 0 16px;
    font-size: 16px
  }

  .characteristics7 .content .item .info .aList {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center
  }

  .characteristics7 .content .item .info .aList .aItem {
    gap: 5px
  }

  .characteristics7 .content .item .info .aList .aItem .icon {
    width: 120px;
    height: 60px
  }

  .characteristics7 .content .item .info .aList .aItem p {
    width: 120px;
    font-size: 14px
  }

  .characteristics7 .content .item a {
    position: static;
    width: 100%;
    height: 80px;
    margin-top: 20px;
    opacity: 1;
    transform: translateX(0);
    border-radius: 10px;
    background: none
  }

  .characteristics7 .content .item a .jt {
    width: 12px;
    display: none
  }

  .characteristics7 .content .item a p {
    margin: 5px 0 15px;
    font-size: 14px;
    color: #27265F
  }

  .characteristics7 .content .item a .hand {
    width: 30px
  }

  .characteristics8 {
    padding: 30px 5%
  }
}