#container {
  background: #f2f4f7;
}
/* 主体 */
/* banner============================================================================================== */
#container .banner {
  width: 100%;
  height: 411px;
  background: url(../img/productserver/banner.png) no-repeat;
  background-size: cover;
}
#container .banner .container {
  height: 100%;
}
#container .banner .container h2 {
  font-size: 32px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 20px;
}

#container .banner .container .tips {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}

/* modal1============================================================================================== */
#container .modal1 {
  padding-top: 150px;
}
#container .modal1 h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  margin-bottom: 20px;
}
#container .modal1 .tips {
  font-size: 20px;
  font-weight: 400;
  color: #666666;
  text-indent: 2em;
  line-height: 33px;
  margin-bottom: 36px;
}
#container .modal1 .modal1-content {
  width: 100%;
  /* height: 351px; */
  /* background: #ffffff; */
  box-sizing: border-box;
  /* box-shadow: 0px 11px 15px 0px rgba(211, 218, 228, 0.26); */
}
#container .modal1 .modal1-content img {
  width: 102%;
  height: 100%;
}
/* modal2============================================================================================== */
#container .modal2 {
  padding-top: 150px;
}
#container .modal2 h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  margin-bottom: 40px;
}
#container .modal2 .modal2-content .items {
  width: 360px;
  height: 210px;
  text-align: left;
  background: #ffffff;
  box-sizing: border-box;
  box-shadow: 0px 11px 15px 0px rgba(211, 218, 228, 0.26);
  padding: 30px;
  margin-bottom: 30px;
  cursor: pointer;
}
#container .modal2 .modal2-content .items h4 {
  font-size: 19px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10px;
}
#container .modal2 .modal2-content .items .line {
  width: 56px;
  height: 4px;
  background: #0060eb;
  margin-bottom: 10px;
}
#container .modal2 .modal2-content .items p {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
#container .modal2 .modal2-content .items.active,
#container .modal2 .modal2-content .items:hover {
  background: #0060eb;
}
#container .modal2 .modal2-content .items.active h4,
#container .modal2 .modal2-content .items:hover h4,
#container .modal2 .modal2-content .items.active p,
#container .modal2 .modal2-content .items:hover p {
  color: #ffffff;
}
#container .modal2 .modal2-content .items.active .line,
#container .modal2 .modal2-content .items:hover .line {
  background: #ffffff;
}
/* modal2============================================================================================== */

#container .customer-case {
  padding-top: 100px;
  padding-bottom: 100px;
}
#container .customer-case h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  margin-bottom: 40px;
}
#container .customer-case .customer-case-content .customer-case-items {
  padding: 20px;
  background: #ffffff;
  margin-bottom: 24px;
  box-shadow: 0px 11px 15px 0px rgba(211, 218, 228, 1);
  width: 262px;
  border-radius: 4px;
}
#container .customer-case .customer-case-content .customer-case-items img {
  /* margin-bottom: 25px; */
  width: 100%;
}
#container .customer-case .customer-case-content .customer-case-items p {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #cbcbcb;
  font-size: 14px;
  color: #333;
  font-weight: 400;
}
#container .customer-case .customer-case-content .customer-case-items:hover {
  box-shadow: 0px 11px 15px 0px rgba(211, 218, 228, 1);
}