.dlpho {
  width: 100%;
  max-width: 1430px;
  margin: auto;
  padding: 80px 40px;
}
.dlphotitle {
  font-size: 32px;
  color: #0b0c1b;
  text-align: center;
  font-weight: 600;
}
.dlphoremake {
  font-size: 17px;
  color: #5a5c76;
  line-height: 30px;
  margin-top: 20px;
  text-align: center;
  margin-bottom: 64px;
}
.dlphocontitle {
  font-size: 20px;
  color: #0b0c1b;
  font-weight: 600;
}
.dlphocon {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
}
.dlphoconitem {
  padding: 32px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dlphoconitem:last-child {
  border-bottom: none;
}
.dlphoconremake {
  font-size: 15px;
  color: #5a5c76;
  line-height: 30px;
  margin-top: 12px;
}
.dlphocontext {
  width: 48%;
}
.dlphoconimg {
  width: 45%;
  flex-shrink: 0;
}
.dlphoconimg img {
  width: 100%;
}
.dlphoconmore {
  display: flex;
  align-items: center;
  margin-top: 24px;
  cursor: pointer;
}
.dlphoconmoretext {
  font-size: 16px;
  color: #007dfc;
}
.dlphoconmoreimg img {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  margin-bottom: 3px;
  transition: all 0.3s; /* 通过名字链接，名字，时间*/
  transition-timing-function: linear; /* 匀速执行 */
}
.dlphoconmore:hover .dlphoconmoreimg img {
  margin-left: 10px;
}

/* ?-------------------------------------------------------------- */
.ubaphobox {
  background-color: #121826;
}
.ubapho {
  width: 100%;
  max-width: 1430px;
  margin: auto;
  padding: 80px 40px;
}
.ubaphotitle {
  font-size: 32px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}
.ubaphoremake {
  font-size: 17px;
  color: #939db8;
  line-height: 30px;
  margin-top: 20px;
  text-align: center;
  margin-bottom: 64px;
}
.ubaphocontitle {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}
.ubaphoconitem {
  background-color: #1a202f;
  border-radius: 10px;
  padding: 32px;
  border: 1px solid #ffffff1f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  overflow: hidden;
}
.ubaphoconremake {
  font-size: 15px;
  color: #939db8;
  line-height: 30px;
  margin-top: 12px;
}
.ubaphocontext {
  width: 48%;
}
.ubaphoconimg {
  width: 45%;
  flex-shrink: 0;
}
.ubaphoconimg img {
  width: 100%;
  border-radius: 4px;
}

/* !------------------------------------------------------------------------------------------- */
.nacphobox {
  overflow: hidden;
  background-color: #121826;
}
.nacpho {
  width: 100%;
  max-width: 1430px;
  margin: auto;
  padding: 80px 50px;
  padding-right: 0px;
  padding-bottom: 80px;
}
.nacphotitle {
  font-size: 32px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding-right: 50px;
}
.nacphoremake {
  font-size: 17px;
  color: #939db8;
  line-height: 30px;
  margin-top: 20px;
  padding-right: 50px;
  text-align: center;
  margin-bottom: 64px;
}
.nacphoconimg {
  position: relative;
  text-align: center;
}
/* .nacphoconimg::after {
  content: "";
  position: absolute;
  width: 110%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    to bottom,
    #ffffff00 0%,
    #121826 93%,
    #121826 100%
  );
} */
.nacphoconimg img {
  width: 110%;
  border-top-left-radius: 10px;
}
.nacpho .soluphomorebox {
  padding-right: 50px;
}
.nacphocon {
  padding-right: 50px;
  position: relative;
  margin-top: -80px;
  background-color: #121826;
  padding-top: 40px;
}
.nacphocon::after {
  content: "";
  position: absolute;
  width: 110%;
  height: 1px;
  top: 0px;
  left: -10%;
  background-color: #ffffff1f;
}
.nacphoconitem {
  margin-top: 40px;
}
.nacphoconitem:first-child {
  margin-top: 0;
}
.nacphoconitemimg img {
  width: 40px;
}
.nacphoconitemtitle {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  margin-top: 20px;
}
.nacphoconitemremake {
  font-size: 15px;
  color: #939db8;
  line-height: 30px;
  margin-top: 8px;
}
/* !------------------------------------------------------------------------------------------- */
.solupho {
  width: 100%;
  max-width: 1430px;
  margin: auto;
  padding: 80px 40px;
}
.soluphotitle {
  font-size: 32px;
  color: #0b0c1b;
  text-align: center;
  font-weight: 600;
}
.soluphoremake {
  font-size: 17px;
  color: #5a5c76;
  line-height: 30px;
  margin-top: 20px;
  text-align: center;
  margin-bottom: 32px;
}
.soluphomorebox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 64px;
}
.soluphomore {
  display: flex;
  cursor: pointer;
  width: 132px;
  flex-shrink: 0;
  white-space: nowrap;
  text-align: center;
  border-radius: 48px;
  padding: 8px 12px 8px 16px;
  background-image: linear-gradient(to right, #0b0c1b, #0b0c1b);
}
.soluphomoretext {
  font-size: 13px;
  margin-left: 5px;
  line-height: 20.8px;
  font-weight: 400;
  color: #fff;
}
.soluphomoreimg {
  display: flex;
  align-items: center;
}
.soluphomoreline {
  width: 0px;
  margin-left: 5px;
  height: 16px;
  transition: all 0.3s;
  transition-timing-function: linear;
}
.soluphomorearrow {
  margin-left: -5px;
  width: 16px;
  height: 16px;
  transition: all 0.3s;
  transition-timing-function: linear;
}
.soluphomore:hover .soluphomoreline {
  width: 16px;
}
.soluphomore:hover .soluphomorearrow {
  margin-left: -16px;
}
.soluphocontentbox {
  display: flex;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;
  height: 443px;
  gap: 20px; /* 新增：滑块间距 */
}
.soluphocontent {
  width: 100%;
  flex-shrink: 0;
  padding: 64px;
  min-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url(../image/home/solution/sol1.webp);
  transform: translateX(0%);
  background-size: cover;
  border-radius: 20px;
  height: 443px;
  border: 10px solid #fff;
  position: absolute;
}
.soluphocontentitem {
  width: 100%;
  border-radius: 20px;
  height: 443px;
}
.soluphocontent:nth-child(2) {
  background: linear-gradient(to right, #080a19 0%, #12182600 70%),
    url(../image/home/solution/sol1.webp) no-repeat center;
  background-size: cover;
}
.soluphocontent:nth-child(3) {
  background: linear-gradient(to right, #03172d 0%, #12182600 70%),
    url(../image/home/solution/sol2.jpg) no-repeat center;
  background-size: cover;
}
.soluphocontent:nth-child(1) {
  background: linear-gradient(to right, #1e2026 0%, #12182600 70%),
    url(../image/home/solution/sol3.jpg) no-repeat center;
  background-size: cover;
}
.soluphocontent:nth-child(4) {
  background: linear-gradient(to right, #0b5671 0%, #12182600 70%),
    url(../image/home/solution/sol4.jpg) no-repeat center;
  background-size: cover;
}
.soluphocontent:nth-child(5) {
  background: linear-gradient(to right, #16433c 0%, #12182600 70%),
    url(../image/home/solution/sol5.webp) no-repeat center;
  background-size: cover;
}
.soluphocontent:nth-child(6) {
  background: linear-gradient(to right, #012f46 0%, #12182600 70%),
    url(../image/home/solution/sol6-2.webp) no-repeat center;
  background-size: cover;
  margin-right: 0;
}
.solucontitle {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}
.soluconremake {
  font-size: 15px;
  color: #fff;
  line-height: 30px;
  width: 60%;
  margin-top: 20px;
}
.soluphotabbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.soluphotab {
  width: 60px;
  height: 4px;
  background-color: #e6e6e6;
  border-radius: 1px;
  margin: 40px 24px 0;
}
.soluphotabactive {
  background-color: #007dfc;
}
/* ?-------------------------------------------------------------- */
.lastbox {
  background-color: #121826;
}
.last {
  width: 100%;
  max-width: 1430px;
  margin: auto;
  padding: 80px 40px;
}

.lasttitle {
  font-size: 32px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}
.lastremake {
  font-size: 17px;
  color: #939db8;
  line-height: 30px;
  margin-top: 20px;
  text-align: center;
  margin-bottom: 64px;
}
.lastbtnbox {
  display: flex;
  justify-content: center;
}
.lastbtn {
  width: 126px;
  line-height: 40px;
  height: 40px;
  border-radius: 40px;
  color: #0b0c1b;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  margin-bottom: 12px;
  /* max-width: 350px; */
}
.lastlire {
  text-align: center;
  font-size: 15px;
  color: #939db8;
  margin-top: 12px;
}
.lastlire span {
  color: #007dfc;
  cursor: pointer;
}
.lastbtn img {
  width: 16px;
  margin-bottom: 2px;
  margin-right: 8px;
}
/* !------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 576px) {
  .solupho {
    padding: 60px 10px;
    max-width: 420px;
    width: 100%;
    margin: auto;
  }
  .soluphoremake {
    padding: 10px;
    margin-bottom: 24px;
  }
  .soluphomorebox {
    margin-bottom: 40px;
  }
  .soluphotitle {
    font-size: 26px;
  }
  .soluphocontent {
    padding: 24px;
  }
  .soluphotab {
    width: 20px;
  }
  .soluconremake {
    width: 100%;
  }
  .soluphotab {
    margin: 32px 8px 0;
  }
  .soluphocontent:nth-child(2) {
    background: linear-gradient(
        to bottom,
        #080a19 0%,
        /* #080a19 20%, */ #12182600 70%
      ),
      url(../image/home/solution/sol1.webp) no-repeat center;
    background-size: cover;
  }
  .soluphocontent:nth-child(3) {
    background: linear-gradient(
        to bottom,
        #03172d 0%,
        /* #03172d 20%, */ #12182600 70%
      ),
      url(../image/home/solution/sol2.jpg) no-repeat center;
    background-size: cover;
  }
  .soluphocontent:nth-child(1) {
    background: linear-gradient(
        to bottom,
        #1e2026 0%,
        /* #1e2026 20%, */ #12182600 70%
      ),
      url(../image/home/solution/sol3.jpg) no-repeat center;
    background-size: cover;
  }
  .soluphocontent:nth-child(4) {
    background: linear-gradient(to bottom, #0b5671 0%, #12182600 70%),
      url(../image/home/solution/sol4.jpg) no-repeat center;
    background-size: cover;
  }
  .soluphocontent:nth-child(5) {
    background: linear-gradient(
        to bottom,
        #16433c 0%,
        /* #16433c 20%, */ #12182600 70%
      ),
      url(../image/home/solution/sol5.webp) no-repeat center;
    background-size: cover;
  }
  .soluphocontent:nth-child(6) {
    background: linear-gradient(
        to bottom,
        #012f46 0%,
        /* #012f46 20%, */ #12182600 70%
      ),
      url(../image/home/solution/sol6-2.webp) no-repeat center;
    background-size: cover;
    margin-right: 0;
  }
  .dlpho {
    padding: 60px 20px;
    padding-top: 30px;
    max-width: 420px;
    width: 100%;
    margin: auto;
  }
  .dlphotitle {
    font-size: 26px;
  }
  .dlphoconitem {
    display: block;
    padding: 24px;
  }
  .dlphocontext {
    width: 100%;
    margin-bottom: 24px;
  }
  .dlphoconimg {
    width: 100%;
  }
  .dlphoconmore {
    margin-top: 12px;
    margin-bottom: 32px;
  }
  .ubapho {
    padding: 60px 20px;
    max-width: 420px;
    width: 100%;
    margin: auto;
  }
  .ubaphotitle {
    font-size: 26px;
  }
  .ubaphoconitem {
    display: block;
    padding: 24px;
  }
  .ubaphocontext {
    width: 100%;
    margin-bottom: 22px;
  }
  .ubaphoconimg {
    width: 100%;
  }
  .nacpho {
    padding: 60px 20px;
    padding-right: 0px;
    padding-bottom: 60px;
    max-width: 420px;
    width: 100%;
    margin: auto;
  }
  .nacphotitle {
    padding-right: 20px;
    font-size: 26px;
  }
  .nacphoremake {
    padding-right: 20px;
    margin-bottom: 32px;
  }
  .nacpho .soluphomorebox {
    padding-right: 20px;
  }
  .nacphocon {
    padding-right: 20px;
  }
  .last {
    padding: 80px 20px;
    max-width: 420px;
    width: 100%;
    margin: auto;
  }
  .lastremake br {
    display: none;
  }
  .lastremake {
    margin-bottom: 40px;
    font-size: 16px;
  }
  .lasttitle {
    font-size: 26px;
  }
  .lastlire {
    font-size: 14px;
  }
  .lastbox {
    border-bottom: 1px solid #7878781f;
  }
}
