/* 内容介绍 */
.showcases {

  max-width: unset;
  padding: 0;
  margin-top: 10%;
  margin-bottom: 1%;
}
.aichatp1 {
  color: white;
}

.pro{
  display: flex;
  justify-content: space-between;
}
.swd{
  margin-bottom: 10%;
}
.filter-btns {
  margin-top: 54px;
  margin-bottom: 38px;
}

.filter-btn {
  margin: 0 7px;
  border: 0;
  background-color: var(--secondary-color);
  color: var(--text-color-dark-gray);
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.4s;
}

.filter-btn:focus,
.filter-btn:active {
  outline: none;
}

.filter-btn.active,
.filter-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

.showcases .cases {
  width: 50vw;
}

.showcases .case-item {
  width: 40vw;
  height: 42vw;
  overflow: hidden;
  margin-left: 15%;
}
.showcases .case-itemMj {
  width: 50vw;
  height: 42vw;
  overflow: hidden;
}
 .showcases .scence {
   margin-left: 8%;
 }
.showcases .chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50vw;
}
.showcases .chat h1{
  font-size: 41px;
  margin-bottom: 35px
}

.showcases .chat p1 {
  font-size: 17px;
  margin-bottom: 15px;
  color: #8b8b8b;
}

.showcases .chat ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.showcases .chat li {
  font-size: 16px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 29px;
}
.showcases .chat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  background-image: url('images/qizhi.png');
  background-size: cover;
}
.showcases .qr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 25%;
}
.showcases .qr h1{
  font-size: 41px;
  margin-bottom: 35px
}

.showcases .qr p1 {
  font-size: 17px;
  margin-bottom: 15px;
  color: #8b8b8b;
}

.showcases .qr ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.showcases .qr li {
  font-size: 16px;
  margin-bottom: 10px;
  position: relative;
}


@media (max-width: 1100px) {

}

@media (max-width: 992px) {
  .pro{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .showcases .cases {
    width: 100vw;
  }

  .showcases .case-item {
    width: 99vw;
    height: 72vw;
    overflow: hidden;
  }

  .showcases .case-itemMj {
    width: 99vw;
    height: 62vw;
    overflow: hidden;
  }
  .showcases .chat  {
    display: flex;
    flex-direction: column;
  }
  .chatBottom{
    margin-top: -11%;
    margin-bottom: -41%;
  }
  .case-item img{
    width: auto;
    max-height: 100%;
  }
  .showcases .qr {
    margin-left: 10%;
    margin-bottom: -11%;
  }
  .showcases .chat {
    margin-left: 10%;
  }

  .showcases.swd{
    margin-top: -30%;
    margin-bottom: 15%;
  }
}

@media (max-width: 768px) {
  .pro{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .showcases .case-item {
    width: calc(100vw / 2);
    height: 75vw;
  }
  .showcases .case-item {
    width: 96vw;
    height: 90vw;
  }
  .showcases .qr {
    margin-left: 10%;
  }
  .showcases .chat {
    margin-left: 10%;
  }
}

@media (max-width: 576px) {

  .showcases .case-item {
    width: auto;
    height: 77vw;
  }
  .showcases  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 6%;
    margin-bottom: 1%;
  }
  .showcases .qr {
    margin-left: 10%;
    margin-bottom: 1%;
  }
  .showcases .chat {
    margin-left: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  .swd{
    margin-bottom: 20%;
  }
  .showcases.swd{
     margin-top: 0%;
   }
  .chatBottom{
    margin-top: 1%;
    margin-bottom: 1%;
  }

.case-itemMj{
  width: auto; max-height: 100%;
}

}