.bobo_case {
  background: #fff;
  display: -webkit-flex;
  display: flex;
}

.bobo_case .list {
  flex: 1;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-justify-content: flex-end;
  justify-content: flex-end
}

.bobo_case .list .box {
  padding: 0 67px;
  box-sizing: border-box
}

.bobo_case .list .tit em {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase
}

.bobo_case .list .tit h3 {
  margin: 20px 0 0;
     color: #212121;
    font-size: 40px;
    line-height: 52px;
    font-weight: 500;
}

.bobo_case .list ul {
  margin: 40px 0 0;
  border-top: 1px solid rgb(74 74 74 / 50%);
}

.bobo_case .list ul li {
  cursor: pointer;
  padding: 30px 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(74 74 74 / 50%);
  position: relative
}

.bobo_case .list ul li h5 a {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  color: #666;
  font-family: var(--font-family);
}

.bobo_case .list ul li h5 a:hover {
  color: #000;
  text-decoration: underline
}

.bobo_case .pic {
  /* flex: 1; */
  width: 40%;
}

.bobo_case .pic ul {
  margin: 0
}

.bobo_case .pic ul li {
  display: none;
}

.bobo_case .pic ul li img{
  /* height: 590px; */
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.bobo_case .pic ul li.active {
  display: block
}


@media screen and (max-width: 1500px) {

  .bobo_case .list ul li h5 a{
    font-size: 14px;
  }
  .bobo_case .pic ul li img{
    /* height: 549px; */
    width: 100%;
  }
}

@media screen and (max-width: 1280px) {

.bobo_case .list{
   flex: 1;
}
.bobo_case .pic {
   flex: 1;
   /* width: 100%; */
}
  .bobo_case .list .box {
    width: 485px;
    padding: 0 40px;
  }
}

@media screen and (max-width: 1200px) {


  .bobo_case .list .box {
    padding: 0 30px;
  }
}

@media screen and (max-width: 992px) {
  .bobo_case {
    /* flex-direction: column-reverse; */
  }

  .bobo_case .pic ul li img {
    height: unset;
    /* aspect-ratio: 992 / 530; */
    width: 100%;
  }

  .bobo_case .list .box {
    width: 100%;
    padding: 30px 35px;
  }
  .bobo_case .list ul li{
    padding:10px;
  }
  .bobo_case .list ul{
    margin:10px 0 0;
  }
}

@media screen and (max-width: 768px) {
  .bobo_case .pic ul li img {
    /* aspect-ratio: 768 / 272; */
  }
  .bobo_case .list .box {
    padding: 40px 35px;
  }
  .bobo_case .pic {
  
   width: 100%;  
}
  .bobo_case .pic ul{
  }
   .bobo_case {
     flex-direction: column-reverse; 
  }
}

@media screen and (max-width: 576px) {
  .bobo_case .pic ul li img {
    /* aspect-ratio: 576 / 265; */
    /* width: 100%; */
  }
  .bobo_case .list .box {
    padding: 10px 35px 40px;
  }
}





@media screen and (max-width: 1440px) {
  .bobo_case .list .tit h3 {font-size: 36px;}
}
@media screen and (max-width: 1281px) {
  .bobo_case .list .tit h3 {font-size: 34px;}
}
@media screen and (max-width: 1171px) {
  .bobo_case .list .tit h3 {font-size: 30px;}
}
@media screen and (max-width: 992px) {
  .bobo_case .list .tit h3 {font-size: 26px;}
}
@media screen and (max-width: 768px) {
  .bobo_case .list .tit h3 {font-size: 24px;}
  .bobo_case .list ul li{
    padding:10px;
  }
  .bobo_case .list ul{
    margin: 0px 0 0;
  }
}
@media screen and (max-width: 480px) {
  .bobo_case .list .tit h3 {font-size: 22px;}
  
}