.maintop,
.fetred,
.resind {
  max-width: 1200px;
  margin: 0 auto;
}

.maintop {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.maintop dl {
  width: 24%;
  position: relative;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
}
.maintop dl dt {
  height: 280px;
  position: relative;
}
.maintop dl dd {
  position: absolute;
  bottom: 0;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 100) 100%
  );
}

.how {
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.dieber {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 18px;
  margin-top: 8px;
  text-align: center;
}
.maintop dl dd p {
 text-align: center;
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  line-height: 18px;
  background: #c62828;
  padding: 8px 12px;
      margin-top: 12px;
}
.maintop dl dt img {
  width: 100%;
  height: 100%;
}

.h1 {
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  margin-top: 24px;
  padding: 8px 0px;
}
.h1 span {
  border: 1px solid #3cbde5;
  flex: 1;
  height: 2px;
  margin-left: 20px;
}
.le {
  background: #3587bd;
  padding: 8px 12px;
}

.mainconle {
  display: flex;
  gap: 24px;
      margin-top: 24px;
}

.thlrit {
  width: 76%;
}

.heale {
  width: 24%;
}

.pormin {
  display: flex;
  gap: 24px;
}

.thlrittttt {
  width: 50%;
      display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.howm {
  width: 50%;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.thlrittttt dl dt {
     height: 360px;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
}

.thlrittttt dl dd p {
      font-family: Arial, Arial;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    margin: 12px 0;
    background: #c62828;
    padding: 8px 12px;
}
.thlrittttt dl dt img {
  height: 100%;
}

.howho {
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin-bottom: 12px;
}
.hoath {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.howm dl {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
}

.howm dl dt {
  width: 50%;
  height: 146px;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
}
.howm dl dt img {
  width: 100%;
  height: 100%;
}

.howm dl dd {
  width: 50%;
}
.howm dl dd p {
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  line-height: 18px;
      text-align: center;
    background: #c62828;
    padding: 8px 12px;
}

.hoeww {
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 20px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.maitopp {
  width: 100%;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.maitopp dl {
  position: relative;
}

.maitopp dl dt {
  height: 182px;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
}
.maitopp dl dt img {
  width: 100%;
  height: 100%;
}

.maitopp dl dt p {
     position: absolute;
    left: 0px;
    width: 100%;
    bottom: 30px;
    text-align: center;
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    line-height: 18px;
    background: #c62828;
    display: inline-block;
    padding: 8px 12px;
}

.naiindtr {
  background: #f7f7f7;
}
.simaintop {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.simaintop dl {
  width: 18.4%;
}
.simaintop dl dt {
  height: 146px;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
}
.simaintop dl dt img {
  width: 100%;
  height: 100%;
}
.simaintop dl dd p {
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  line-height: 18px;
  background: #87bd35;
  display: inline-block;
  padding: 8px 12px;
  margin-top: 8px;
}
.errfg {
  margin-top: 0px;
}
.resind {
  padding: 24px 0;
  margin: 24px auto;
  margin-bottom: 0px;
}

.erale {
  background: #87bd35;
}

.errfg span {
  border: 1px solid #87bd35;
}

.maitopp .howm {
  width: 100%;
}

.maitopp .howm dl dt {
  height: 116px;
}

.trtsimain {
  width: 50%;
}
.trtsimain dl {
  width: 47%;
}
.trtsimain dl dd p {
  color: #3587bd;
  background: none;
  padding: 0;
}
.por {
  width: 100%;
}
.por dd {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 100) 100%
  );
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
  width: 100%;
}
.por .hoeww {
  color: #fff;
}
.por .dieber {
  color: #ccc;
}
.zlepor dl dt {
  height: 340px;
}
.zlepor {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.inddd {
  margin-top: 0;
}
.topm_in dl{
    width: 32%;
    margin-top: 24px;
}







@media (max-width: 1220px) {
  .maintop,
  .fetred,
  .resind {
    width: 95%;
  }
}
@media (max-width: 1070px) {
  .simaintop {
    gap: 16px;
  }
  .mainconle {
    gap: 20px;
  }
}
@media (max-width: 970px) {
  .maintop dl {
    width: 49%;
  }
  .thlrit {
    width: 100%;
  }
  .heale {
    width: 100%;
  }
  .mainconle {
    flex-direction: column;
  }
  .fetred {
    margin-top: 0px;
  }

  .h1 {
    padding: 8px 0px;
    margin-bottom: 12px;
    margin-top: 12px;
  }
  .mainconle {
    gap: 0px;
  }

  .maitopp dl {
    width: 49%;
  }

  .resind {
    padding: 1px 0;

    margin-bottom: 0;
  }
  .simaintop dl {
    width: 32%;
  }
  .trtsimain dl {
    width: 48%;
  }
  .maitopp dl dt {
    height: 240px;
  }
  .howm {
    gap: 12px;
  }
  .thlrittttt dl dt {
    height: 340px;
  }
  .maitopp {
    gap: 12px;
  }
  .pormin {
    gap: 12px;
  }
  .simaintop {
    gap: 12px;
    padding-bottom: 12px;
  }
  .maitopp .por {
    width: 100%;
    display: flex;
    gap: 24px;
    align-items: center;
  }
  .maitopp .por dt {
    height: 180px;
    width: 50%;
  }
  .trtsimain {
    padding-bottom: 0;
  }
  .zlepor {
    gap: 12px;
  }

  .por dd {
    position: static;
    padding: 0px;
    background: none;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    width: 100%;
  }
  .por .hoeww {
    color: #000;
  }
}

@media (max-width: 765px) {
  .maintop dl {
    width: 48%;
  }
  .mainconle {
    
    margin-top: 12px;
}
  .topm_in dl {
   
    margin-top: 10px;
}
  .heale{
    margin-top: 12px;
  }
  .maintop dl dt {
 height: 160px;
  }
  .maintop dl dt p {
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
  }
  .how {
    font-size: 14px;
    line-height: 18px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .dieber {
    font-size: 12px;
    line-height: 16px;
    margin-top: 4px;
  }
  .h1 {
    font-size: 16px;
    line-height: 20px;
    padding: 4px 0px;
    margin-bottom: 8px;
    margin-top: 8px;
  }
  .le {
    padding: 4px 8px;
  }
  .thlrittttt {
    width: 100%;
  }
  .howm {
    width: 100%;
  }
  .pormin {
    flex-wrap: wrap;
  }
  .thlrittttt dl dd p {
    margin: 8px 0;
  }
  .howho {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 4px;
  }
  .hoath {
    font-size: 14px;
    line-height: 18px;
    -webkit-line-clamp: 2;
  }
  .howm dl dd p {
    font-size: 12px;
    line-height: 16px;
  }
  .hoeww {
    font-size: 14px;
    line-height: 18px;
  }
  .maitopp dl {
    width: 48%;
  }
  .maitopp dl dt {
    height: 114px;
  }
  .resind {
    padding: 2px 0;
    margin: 12px auto;
    margin-bottom: 0;
  }
  .simaintop dl {
    width: 48%;
  }
  .simaintop dl dd p {
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
    margin-top: 4px;
  }

  .trtsimain {
    width: 100%;
  }

  .thlrittttt dl dt {
    height: 234px;
  }
  .maitopp .por dt {
    height: 240px;
  }

  .maitopp .howwwww {
    width: 100%;
  }

  .maitopp .por {
    flex-wrap: wrap;
  }
  .maitopp .por dt {
    width: 100%;
  }
  .por dd {
    position: absolute;
    padding: 12px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 100) 100%
    );
  }
  .por .hoeww {
    color: #fff;
  }
}