.main {
  background: #111315;
   background-image: url(../image/pc/Background1.svg);
  background-repeat: repeat-x; /* 横向平铺 */
     background-size: contain;
}

.maintop,
.lot,
.clss,
.be,
.adven,
.screwsc {
  max-width: 1040px;
  margin: 0px auto;
  justify-content: space-between;
  padding: 24px 0;
}
.mainzuo {
  width: 34%;
  gap: 24px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: -16px 16px 34px 0px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 0px 0px;
  border: 2px solid rgba(255, 255, 255, 0.07);
}
.maintop {
  display: flex;
}
.mainyou {
  width: 64%;
}
.mainzuo dl {
  padding: 24px;
}
.mainzuo dl dt {
  height: 216px;
}
.mainzuo dl dt img {
  width: 100%;
  height: 100%;
}
.mainzuo dl dd {
  padding-top: 12px;
}
.mainzuo dl dd p,
.mainshang dl dd p {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 16px;
  color: #bef970;
  line-height: 20px;
  display: flex;
  align-items: center;
}
.mainzuo dl dd p img,
.mainshang dl dd p img {
  width: 15px;
  margin-right: 8px;
}

.mainzuo dl dd h6 {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  line-height: 24px;
  padding: 12px 0 0px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.mainshang dl dd h6 {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  line-height: 24px;
  padding: 12px 0 0px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.mainzuo dl dd h5 {
  margin-top: 24px;
  max-width: 190px;
  height: 44px;
}

.mainzuo dl dd h5 img,
.mainshang dl dd h5 img {
  width: 100%;
  height: 100%;
}
.mainyou {
  display: flex;
  gap: 24px;

  justify-content: space-between;
  flex-direction: column;
}
.mainshang {
  height: 55%;
}
.mainshang dl {
  display: flex;
  gap: 24px;

  padding: 24px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: -16px 16px 34px 0px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 0px 0px;
  border: 2px solid rgba(255, 255, 255, 0.07);
}
.mainshang dl dt {
  height: 184px;
  width: 30%;
  position: relative;
}
.mainshang dl dt img {
  width: 100%;
  height: 100%;
}
.mainshang dl dd {
  width: 60%;
}
.mainshang dl dd p {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 16px;
  color: #bef970;
  line-height: 20px;
}

.mainxia {
  height: 37%;
  display: flex;
  justify-content: space-between;
}
.mainshang dl dd h5 {
  max-width: 190px;
  margin-top: 24px;
  height: 44px;
}
.mainxia dl {
  width: 48%;
  display: flex;
  padding: 24px;
  gap: 24px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: -16px 16px 34px 0px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 0px 0px;
  border: 2px solid rgba(255, 255, 255, 0.07);
  align-items: center;
}
.mainxia dl dt {
  width: 96px;
  height: 96px;
}
.mainxia dl dt img {
  width: 100%;
  height: 100%;
}

.mainxia dl dd {
  max-width: 144px;
}

.mainxia dd h6 {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.bo {
  width: 32px !important;
  height: 32px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bo img {
  width: 100%;
}
.lot {
  display: flex;
  gap: 24px;
  align-items: center;
}
.lotest {
  display: flex;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  line-height: 24px;
  align-items: center;
  width: 19%;
}
.lotest img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.ulLat {
  display: flex;
  width: 78%;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}
.ulLat li {
  width: 14%;
  height: 114px;
  background-color: #b94a0b;

  position: relative;
}
.ulLat li img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -4px;
  right: -4px;
}
.clss {
  display: flex;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  line-height: 24px;
  align-items: center;
  justify-content: flex-start;
}
.clss img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.be dl {
  width: 15%;
}
.be dl dt {
  height: 150px;
}
.be dl dt img {
  width: 100%;
  height: 100%;
}
.be dl dd {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  line-height: 20px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.be {
  gap: 20px;
  padding: 0 0 24px 0;
  display: flex;
  flex-wrap: wrap;
}

.adven {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0px 0 24px 0;
}

.st {
  width: 23%;
  height: 120px;
  padding: 12px;
  position: relative;

  clip-path: polygon(0 0, calc(0%) 18%, 100% 0px, 100% 100%, 0% 100%);
}

.st:nth-child(1) {
  background: #bef970;
}

.st:nth-child(2) {
  background: #34bc61;
}
.st:nth-child(3) {
  background: #f4fee5;
}

.st:nth-child(4) {
  background: #69af37;
}

.st:nth-child(5) {
  background: #7cab0d;
}
.st:nth-child(6) {
  background: #e1f5c1;
}

.st:nth-child(7) {
  background: #4ccca6;
}
.st:nth-child(8) {
  background: #8bc52e;
}

.bb {
  display: none;
}

.st h6 {
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 20px;
  color: #333333;
  line-height: 24px;
  margin-top: 40px;
}

.st p {
  font-family: Poppins, Poppins;
  font-weight: 400;
  font-size: 16px;
  color: #384626;
  line-height: 20px;
}
.dialdian {
  font-size: 24px;
  background: #ffffff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  width: 32px;
  position: absolute;
  right: 12px;
  background: rgba(255, 255, 255, 0.6);
  bottom: 32px;
  text-align: center;
  line-height: 32px;
  height: 32px;
}

.screw {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.popopo {
  width: 60%;
  height: 100%;
}
.esct {
  flex-direction: column;
  height: 100%;
  gap: 20px;
  width: 37%;
}
.esct dl {
  width: 100%;
}
.popopo dl dt {
  height: 264px;
  width: 45%;
  position: relative;
}
.popopo dl dd {
  width: 51%;
}
.bf {
  width: 32px;
  height: 32px;
}

.esct dl dd {
  display: flex;
  align-items: center;
  max-width: 210px;

}
.esct dl dd h6 {
  margin-right: 24px;
}
.popopo dl {
  align-items: center;
}
.mainshang dl dd h5 {
  margin-left: 150px;
  margin-top: 48px;
}
.popopo dl dd h5 {
  margin-left: 100px;
 
}
.screwsc {
  padding: 0 0 24px 0;
}

.beeee dl {
  width: 15%;
  border-bottom: 4px solid #99ee2d;
}
.beeee dl dd {
  margin-bottom: 12px;
}
@media (max-width: 900px) {
    .ul_lhome {
      display: none;
    }
}
@media (max-width: 1100px) {
  .maintop,
  .lot,
  .clss,
  .be,
  .adven,
  .screwsc {
    width: 95%;
    padding: 12px 0;
  }
}

@media (max-width: 1050px) {
 
  .be dl {
    width: 14%;
  }
  .lotest {
    width: 22%;
  }
  .maintop {
    flex-direction: column-reverse;
  }

  .mainzuo {
    width: 100%;
    margin-top: 24px;
  }
  .mainyou {
    width: 100%;
  }
  .mainzuo dl {
    display: flex;
    justify-content: space-between;
  }

  .mainzuo dl dt {
    height: 184px;
    width: 25%;
  }

  .mainzuo dl dd {
    width: 70%;
  }
  .ulLat {
    flex-wrap: wrap;
  }

  .ulLat li {
    width: 30%;
  }

  .be dl {
    width: 23%;
  }

  .screw {
    flex-direction: column;
  }
  .popopo {
    width: 100%;
  }

  .esct {
    width: 100%;
  }
  .esct dl {
    width: 48%;
  }

  .esct {
    flex-direction: row;
  }
  .esct dl dd {
    max-width: 180px;
  }

  .mainxia dl {
    gap: 20px;
  }
}
@media (max-width: 800px) {
  .be {
    gap: 18px;
  }
  .mainzuo dl dt {
    width: 30%;
  }

  .mainzuo dl dd {
    width: 66%;
  }
  .lotest {
    width: 30%;
  }
  .st {
    width: 31%;
  }
}
@media (max-width: 750px) {

  .maintop {
    flex-direction: column;
  }

  .mainxia {
    flex-direction: column;
  }
  .mainzuo dl {
    padding: 12px;
    flex-direction: column;
  }

  .mainzuo dl dt {
    width: 100%;
  }
  .mainzuo dl dd h5 {
    margin-top: 8px;
  }
  .mainzuo dl dd p,
  .mainshang dl dd p {
    font-size: 12px;

    line-height: 18px;
  }
  .mainzuo dl dd p img,
  .mainshang dl dd p img {
    width: 12px;
  }
  .mainzuo dl dd h6 {
    font-size: 14px;
    line-height: 18px;

    padding: 8px 0 0px 0;
  }

  .mainshang dl {
    gap: 12px;
    padding: 12px;
    flex-direction: column;
  }

  .mainshang dl dt {
    width: 100%;
  }
  .mainshang dl dd h6 {
    font-size: 14px;
    line-height: 18px;
    padding: 8px 0 0px 0;
  }
  .mainshang dl dd h5 {
    margin-left: 0px;
    margin-top: 12px;
  }
  .mainshang dl dd {
    width: 100%;
  }
  .mainzuo dl dd {
    width: 100%;
  }

  .mainyou {
    gap: 12px;
    margin-top: 12px;
  }
  .mainxia dl {
    width: 100%;
    padding: 12px;
    gap: 12px;
  }
  .mainxia {
    gap: 12px;
  }

  .lot {
    gap: 12px;

    flex-direction: column;
  }

  .lotest {
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
  }

  .ulLat {
    width: 100%;
    gap: 12px;
  }

  .lotest img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
  .maintop,
  .lot,
  .clss,
  .be,
  .adven,
  .screwsc {
    font-size: 16px;
    line-height: 20px;
    padding: 8px 0;
  }
  .be {
    gap: 8px;
  }
  .be dl dt {
    height: 84px;
  }
  .be dl dd {
    font-size: 14px;
    line-height: 18px;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .st {
    width: 48%;
    height: 70px;
    padding: 8px;
  }

  .adven {
    gap: 12px;
    padding: 0px 0 12px 0;
  }

  .clss img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  .beeee dl dd {
    margin-bottom: 8px;
  }
  .st h6 {
    margin-top: 10px;
    font-size: 14px;

    line-height: 18px;
  }

  .st p {
    font-size: 12px;
    line-height: 16px;
  }

  .dialdian {
    width: 24px;

    right: 12px;
    bottom: 12px;

    line-height: 24px;
    height: 24px;
  }
  .icon-right2:before {
    font-size: 12px;
  }
  .mainxia dd h6 {
    font-size: 14px;
    line-height: 18px;
  }

  .bb {
    display: block;
    width: 32px;
    height: 32px;
    margin-left: 4px;
  }

  .mainxia dl dd {
    display: flex;
    justify-content: space-between;
    align-items: center;
   width: 200px;
    max-width: 200px;
  }
  .popopo dl {
  
   flex-direction: row;
}
  
  .popopo dl dt {
    height: 120px;
   
}
  .popopo dl dd h5 {
    max-width: 190px;
    margin-top: 24px;
    height: 34px;
}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}