

body {
  background-color: #000;
}

.about-us {
  display: flex;
  position: relative;
  margin-top: 1.56vw;
  padding-left: 3.13vw;
  background-size: cover;    
}
#about_back{
  position: absolute;width: 100%;
  top: 0;
  left: 0;
}
.about-us-list {
  /* width: 345px;
  height: 800px; */
  width: 17.97vw;
  height: 41.67vw;
  
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}
.abou_vapx{
  margin: 8% 10% !important;
  width: 80%;
  position: relative !important;
  display: block !important;
}
.abou_vapx_info_tit{
  padding-left: 5%;
  font-size: 1.2vw;
  color: #fff;
  font-weight: 500;
  padding-bottom: 3%;
}
.abou_vapx_info{
  padding: 5% 7%;
  background: #17191b;;
}
.abou_vapx_info h1{
  font-size: 1vw;
  line-height: 2;
}
.our_s{
  position: relative !important;
  display: block !important;
  margin: 5% 10% !important;
  padding: 6% 0;
  width: 80%;
}
.out_s_b{
  display: flex
;
    width: 100%;
    background: #17191b;
    height: 5vw;
    margin-bottom: 3%;
    text-align: center;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    cursor: pointer;
    transition:0.5s all ease-in-out;
    color: #fff;
}
.out_s_b:hover{
  background: #94fecf;
  color: #000;
}
.out_s_b h1{
  font-size: 1.3vw;
  font-family: Inter;
  font-weight: 500;
  padding-right: 3%;
}
.out_s_b h2{
  font-size: 1vw;
}
.about-us-list .about-us-swiper {
  height: 100%;
}

.about-us-list .about-us-container {
  /* gap: 250px; */
  gap: 13.02vw;

  display: flex;
  position: absolute;
  flex-direction: column;

}

.about-us-list .about-us-container .item-container {
  /* gap: 37px; */
  gap: 1.93vw;

  display: flex;
  flex-direction: column;
}




.about-us-list .about-us-list-item {
  /* width: 345px;
  height: 165px; */
  width: 17.97vw;
  height: 8.59vw;
  cursor: pointer;
  position: relative;
}

.about-us-list .about-us-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 0.7;
  background-color: #000;
}

.about-us-list .about-us-list-item:hover::before {
  opacity: 0;
}

.about-us-list .about-us-list-item.activate::before {

  opacity: 0;

}

.about-us-list .about-us-list-item.activate .about-us-list-item-text {
  display: none;
}


.about-us-list .about-us-list-item img {
  width: 100%;
  height: 100%;
  user-select: none;
}

.about-us-list .about-us-list-item .about-us-list-item-text {
  color: #fff;
  /* font-size: 18px; */
  font-size: 0.94vw;

  font-weight: 700;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  user-select: none;
}

.about-us-content {
  width: 100%;
  /* height: 800px; */
  height: 41.67vw;

  color: #fff;
  overflow: hidden;
  position: relative;
}

.about-us-content .content-title {
  /* font-size: 37px; */
  font-size: 1.93vw;

  font-weight: 700;
}

.about-us-content .secondary-title {
  /* font-size: 24px; */
  font-size: 1.25vw;

  font-weight: 700;
}

.about-us-content .brand-slogan,
.about-us-content .product-slogan,
.about-us-content .brand-story,
.about-us-content .innovators {

  width: 100%;
  height: 100%;
  position: relative;
  
}

/* .about-us-content .brand-slogan,
.about-us-content .product-slogan,
.about-us-content .brand-story,
.about-us-content .innovators {
  position: absolute;
  top: 0;
  left: 0;
} */

/* .about-us-content .brand-slogan, */
.about-us-content .product-slogan,
.about-us-content .brand-story,
.about-us-content .innovators {
  display: none;
  /* opacity: 0; */
}

.about-us-content .brand-slogan .content-title,
.about-us-content .product-slogan .content-title,
.about-us-content .brand-story .content-title,
.about-us-content .innovators .secondary-title {
  /* padding-top: 19px;
  padding-left: 92px; */
  padding-top: 0.99vw;
  padding-left: 4.79vw;
}

.about-us-content .brand-slogan .secondary-title,
.about-us-content .product-slogan .secondary-title {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-us-content .brand-story .brand-story-list {
  display: flex;
  /* padding-top: 73px;
  margin-left: 105px; */
  padding-top: 3.80vw;
  margin-left: 5.47vw;
  flex-direction: column;
}

.about-us-content .brand-story .brand-story-list .list-item-row {
  /* width: 1100px;
  height: 87px; */
  width: 57.29vw;
  height: 4.53vw;
  display: flex;
  position: relative;
  /* padding-left: 100px; */
  padding-left: 5.21vw;

  align-items: center;
}

.about-us-content .brand-story .brand-story-list .list-item-row::before {
  /* width: 9px;
  height: 9px; */
  width: 0.47vw;
  height: 0.47vw;
  content: "";
  border-radius: 50%;
  background-color: #86FFCF;
  position: absolute;
  /* left: 70px; */
  left: 3.65vw;

  opacity: 0;
  transition: all 0.5s ease;
}

.about-us-content .brand-story .brand-story-list .list-item-row:hover::before {
  opacity: 1;
}

.about-us-content .brand-story .brand-story-list .list-item-row:hover {

  background-color: #17191B;

}

.about-us-content .brand-story .brand-story-list .list-item-row .secondary-title {
  /* width: 187px; */
  width: 9.74vw;

  flex: 0 0 auto;
  /* font-size: 16px; */
  font-size: 0.83vw;

  font-weight: 400;
}

.about-us-content .brand-story .brand-story-list .list-item-row .secondary-text {
  /* width: 615px;
  font-size: 16px; */
  width: 32.03vw;
  font-size: 0.83vw;

  font-weight: 400;
  /* margin-left: 90px; */
  margin-left: 4.69vw;

}

.about-us-content .brand-story .brand-story-list .list-item-row .list-item-row-img {
  /* width: 175.5px;
  height: 110px; */
  width: 9.14vw;
  height: 5.73vw;
  position: absolute;
  /* top: 28px;
  right: -86.5px; */
  top: 1.46vw;
  right: -4.51vw;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease;
}

.about-us-content .brand-story .brand-story-list .list-item-row:hover .list-item-row-img {
  opacity: 1;
}

.about-us-content .brand-story .brand-story-list .list-item-row .list-item-row-img img {
  width: 100%;
  height: 100%;
}

.about-us-content .innovators .secondary-title {
  /* font-size: 37px; */
  font-size: 1.93vw;

}

.about-us-content .innovators .bottom-row {
  width: 100%;
  /* padding-left: 92px;
  padding-right: 42.5px; */
  padding-left: 4.79vw;
  padding-right: 2.21vw;
  position: absolute;
  bottom: 0;
  /* gap: 645px; */
  gap: 33.59vw;

  display: flex;
}

.about-us-content .innovators .bottom-row .left-logo {
  /* width: 240px;
  gap: 20px; */
  width: 12.50vw;
  gap: 1.04vw;
  display: flex;
  flex: 0 0 auto;
  /* margin-bottom: 65px; */
  margin-bottom: 65px;

  flex-direction: column;
}

.about-us-content .innovators .bottom-row .left-logo .left-text {
  /* font-size: 17px; */
  font-size: 0.89vw;
  font-weight: 700;
}

.about-us-content .innovators .bottom-row .left-logo .logo-img {
  /* width: 50px; */
  width: 2.60vw;

}

.about-us-content .innovators .bottom-row .left-logo .logo-img img {
  width: 100%;
}

.about-us-content .innovators .bottom-row .right-text {
  /* font-size: 14px; */
  font-size: 0.73vw;

  font-weight: 400;
  /* line-height: 22px; */
  line-height: 1.15vw;

}

