@import "./active.css";

/* 版型 */
.w1240 {
  width: 1240px;
  margin: auto;
}
/* 主要背景 */
:root {
  --index-bg-color: #ffffff;
}
/* 使锚点链接跳转更平滑 */
html,
body {
  scroll-behavior: smooth;
}
/* ......................顶部主页................... */
.header {
  position: relative;
  width: 100%;
  height: 776px;
  color: #fff;
}
.header .video {
  width: 100%;
  height: 776px;
  overflow: hidden;
}
.header .video video {
  width: 100%;
}
.header .content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .content .info {
  width: 95%;
  max-width: 1200px;
}
.header .content .info .title {
  font-size: 60px;
  line-height: 72px;
  font-family: DOUYU;
}
.header .content .info .tis {
  font-size: 24px;
  white-space: nowrap;
  line-height: 1;
  font-weight: 300;
}
.header .content .info .line {
  width: 91px;
  height: 4px;
  background-color: #2c68f6;
  margin: 20px 0 25px;
}
.header .content .info .text {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 50px;
  letter-spacing: 1px;
  max-width: 75%;
}

.header .content .info .but {
  font-size: 18px;
  width: 238px;
  line-height: 48px;
  text-align: center;
  border-radius: 4px;
  background: #3369ff;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}

/* .......................菜单.................. */
.menu {
  font-size: 16px;
  width: 100%;
  position: sticky;
  top: 80px;
  z-index: 1;
  display: flex;
  justify-content: center;
  text-align: center;
  background: hsla(0, 0%, 100%, 1);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  box-sizing: border-box;
  box-shadow: 0 8px 32px rgba(28, 67, 125, 0.06);
}
.menu a {
  width: 206px;
  line-height: 60px;
}
.menu a:hover {
  color: #2c68f6;
  background: rgba(58, 137, 254, 0.05);
}

/* ...............................中间主体内容.......................... */

.main {
  background-image: url(https://easyv.assets.dtstack.com/homepage/common/assets/images/intelligent_water_content_bg.png);
  background-size: 100% 100%;
}

.main .title {
  margin-bottom: 40px;
  color: #161616;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  font-weight: 400;
}
#section1,
#section2,
#section3 {
  padding: 56px 0 72px;
}
/* ...... 行业背景#section1 ...... */
#section1 p {
  color: #8c96a5;
  font-size: 16px;
  line-height: 30px;
}
#section1 span {
  color: #3a89fe;
}
/* ...... 行业痛点#section2 ...... */
#section2 ul {
  display: flex;
  justify-content: space-between;
}
#section2 ul li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  width: 292px;
  height: 250px;
  padding: 32px 24px;
  background: linear-gradient(213.41deg, #f3f5f8 24.37%, #fff 80.13%), #fff;
  border-radius: 8px;
  box-shadow: 27px 11px 24px rgba(210, 218, 227, 0.2),
    0 24px 48px rgba(195, 203, 215, 0.14), -1px 1px 21px hsla(0, 0%, 100%, 0.9),
    inset -3px 3px 0 hsla(0, 0%, 100%, 0.94), inset 4px -2px 0 #fff;
  transition: all 0.2s linear;
}
#section2 ul li:hover {
  -ms-transform: scale(1.03);
  transform: scale(1.03);
}

#section2 ul li img {
  width: 64px;
  margin-bottom: 10px;
}
#section2 ul li div {
  margin-bottom: 8px;
  color: #161616;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
}
#section2 ul li p {
  color: #8c96a5;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

/* ...... 解决方案#section3 ...... */

#section3 {
  text-align: center;
}
#section3 .img {
  width: 1200px;
  margin-bottom: 60px;
}

#section3 ul {
  overflow-x: auto;
  width: 1100px;
  display: flex;
}

#section3 ul li {
  width: 1940px;
  height: 248px;
  /* background-size: 100% 100%; */
}
#section3 .tips {
  margin-bottom: 16px;
  color: #161616;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  text-align: left;
}

/* ...... 应用场景#section4 ...... */
#section4 ul {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  text-align: center;
}
#section4 li {
  width: 31%;
  box-shadow: 0px 0px 15px 0px rgba(11, 3, 6, 0.15);
  margin-bottom: 40px;
}
#section4 li img {
  width: 100%;
}
#section4 li div {
  font-size: 20px;
  line-height: 18px;
  color: #1f3147;
  text-align: center;
  font-weight: bold;
  margin: 22px 0px 27px 0px;
  height: 20px;
}
#section4 li p {
  font-size: 14px;
  line-height: 22px;
  color: #555555;
  padding: 0px 22px 20px;
  margin: auto;
}

/* ...... 方案优势#section5 ...... */
#section5 {
  background: linear-gradient(
      121.72deg,
      rgba(247, 248, 250, 0) 30.81%,
      rgba(233, 237, 240, 0.29) 55.6%
    ),
    linear-gradient(
      109.95deg,
      rgba(245, 246, 248, 0.85) 14.51%,
      rgba(240, 242, 245, 0.68) 63.31%
    );
}
#section5 .content {
  padding: 56px 0 72px;
}
#section5 ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#section5 ul li:hover {
  -ms-transform: scale(1.03);
  transform: scale(1.03);
}
#section5 ul li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  width: 600px;
  height: 158px;
  margin-bottom: 40px;
  padding: 40.5px 48px 40.5px 40px;
  background: radial-gradient(
      29.31% 101.63% at 72.5% -46.08%,
      rgba(253, 179, 255, 0.1) 12.47%,
      hsla(0, 0%, 100%, 0) 100%
    ),
    radial-gradient(
      31.01% 107.52% at 88.92% -48.37%,
      rgba(179, 237, 255, 0.12) 12.47%,
      hsla(0, 0%, 100%, 0) 100%
    ),
    linear-gradient(213.41deg, #f3f5f8 24.37%, #fff 80.13%), #fff;
  border-radius: 8px;
  box-shadow: 27px 11px 24px rgba(210, 218, 227, 0.24),
    0 14px 48px rgba(210, 218, 227, 0.24), -8px 0 31px hsla(0, 0%, 100%, 0.9),
    -1px 1px 21px hsla(0, 0%, 100%, 0.9),
    inset -3px 3px 0 hsla(0, 0%, 100%, 0.94), inset 4px -2px 0 #fff,
    inset 0 43px 44px rgba(237, 241, 245, 0.26);
  transition: all 0.2s linear;
}

#section5 ul li .small-title {
  margin-bottom: 8px;
  color: #161616;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
}
#section5 ul li p {
  color: #8c96a5;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
}

#section5 ul li img {
  width: 83px;
  margin-right: 32px;
}

/* ........ 客户案例 ........ */
#section6 {
  padding-bottom: 44px;
  background: linear-gradient(
      3.39deg,
      rgba(247, 248, 250, 0) 1.75%,
      rgba(233, 236, 240, 0.42) 28.88%,
      rgba(233, 236, 240, 0.38) 62.26%,
      #fff 95.64%
    ),
    #fff;
}
#section6 .content {
  padding: 56px 0 72px;
}
#section6 .title-info {
  color: #8c96a5;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 24px;
  text-align: center;
}

#section6 ul {
  width: 100%;
  display: flex;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
}

#section6 ul li {
  width: 320px;
  flex-shrink: 0;
  margin-right: 24px;
  box-shadow: 0 11px 50px 0 rgba(198, 205, 214, 0.4);
}
#section6 ul li .info {
  padding: 12px 16px 16px;
}
#section6 ul li img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}
#section6 ul li .info .small-title {
  width: 100%;
  margin-bottom: 2px;
  overflow: hidden;
  color: #161616;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#section6 ul li .info .text {
  display: -webkit-box;
  margin-bottom: 12px;
  overflow: hidden;
  color: #b4b7c1;
  font-size: 14px;
  line-height: 22px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
#section6 ul li .info .btn {
  display: inline-block;
  color: #3a89fe;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

/* ......................................底部......................................... */
/* .......... 背景图 ........... */
.footer .footer-bg {
  width: 100%;
  height: 240px;
  background-size: 100% auto;
  overflow: hidden;
}

.footer-bg .title {
  padding: 70px 0 20px;
  color: #262626;
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
}

.footer-bg .btn2,
.footer-bg .btn {
  margin-right: 24px;
  text-align: center;
  line-height: 48px;
  border-radius: 8px;
  width: 134px;
  transition: 0.2s;
  float: left;
  cursor: pointer;
  font-size: 14px;
}
.footer-bg .btn2:hover,
.footer-bg .btn:hover {
  opacity: 0.8;
}
.footer-bg .btn {
  color: #fff;
  background: linear-gradient(
      225deg,
      #3be7fe -11.69%,
      rgba(59, 184, 254, 0) 22.91%
    ),
    linear-gradient(42deg, #3be7fe -19.17%, rgba(59, 184, 254, 0) 27.1%),
    linear-gradient(312deg, #217aff 35%, #4434ff 104.66%);
  box-shadow: 0 12px 15px 0 rgba(28, 65, 149, 0.13);
}
.footer-bg .btn2 {
  width: 120px;
  border: 1px solid #3a89fe;
  box-sizing: border-box;
  background: linear-gradient(104deg, #3a89fe 58.65%, #4434ff 112.62%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}