.banner-box {
  width: 100%;
  height: 5.0633rem;
  background-image: url(/static/img/virtualhost-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.banner-box .wen {
  padding-top: 0.6329rem;
  max-width: 16.4557rem;
  margin: 0 auto;
}
.banner-box .wen h1 {
  padding: 0.6329rem 0;
  color: #fff;
  font-size: 0.4557rem;
  font-weight: normal;
}
.banner-box .wen h3 {
  font-weight: normal;
  max-width: 7.5949rem;
  color: #fff;
  font-size: 0.2278rem;
}
body {
  background-color: #f5f5f5;
}
.h-title {
  padding: 0.3797rem 0;
  padding-top: 0.7595rem;
  font-size: 0.3544rem;
  text-align: center;
}
.meal-box {
  max-width: 17.7215rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.6329rem 0;
  display: flex;
  justify-content: space-around;
}
.meal-box .meal-item {
  box-sizing: border-box;
  padding: 0 0.2532rem;
  width: 28%;
  height: 6.3291rem;
  border-radius: 0.0633rem;
  background-color: #fff;
  transition: all 0.5s;
}
.meal-box .meal-item:hover {
  transform: scale(1.05);
}
.meal-box .meal-item h2 {
  padding: 0.443rem 0;
  text-align: center;
  font-size: 0.2785rem;
}
.meal-box .meal-item .nei {
  width: 100%;
  height: 1.0127rem;
  border-top: 0.0127rem solid #eeeeee;
  border-bottom: 0.0127rem solid #eeeeee;
  padding: 0.0759rem 0;
  display: flex;
}
.meal-box .meal-item .nei .nei-item {
  flex: 1;
  text-align: center;
}
.meal-box .meal-item .nei .nei-item h3 {
  font-size: 0.2785rem;
}
.meal-box .meal-item .nei .nei-item span {
  font-size: 0.2532rem;
  color: #a49d9d;
}
.meal-box .meal-item .nei .nei-item:nth-child(2) {
  border-left: 0.0127rem solid #eeeeee;
  border-right: 0.0127rem solid #eeeeee;
}
.meal-box .meal-item .con-box {
  box-sizing: border-box;
  padding-left: 0.2532rem;
  width: 100%;
  height: 3.2911rem;
  padding-bottom: 0.2532rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.meal-box .meal-item .con-box .con-item {
  display: flex;
  font-size: 0.2278rem;
  color: #a49d9d;
}
.meal-box .meal-item .con-box .con-item .jiage {
  padding: 0 0.1266rem;
  margin-left: 0.1899rem;
  width: 1.8987rem;
  height: 0.3418rem;
  border: 0.0127rem solid #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meal-box .meal-item .con-box .con-item .jiage span {
  color: #000;
  font-size: 0.2025rem;
}
.meal-box .meal-item .con-box .con-item .jiage img {
  width: 0.1519rem;
  height: 0.1013rem;
  cursor: pointer;
}
.meal-box .meal-item .nav-box {
  display: flex;
  justify-content: space-around;
}
.meal-box .meal-item .nav-box .nav-item {
  border-radius: 0.0506rem;
  width: 1.2405rem;
  height: 0.3418rem;
  font-size: 0.1772rem;
  background: #4251b6;
  color: #fff;
  text-align: center;
  line-height: 0.3418rem;
  transition: all 0.5s;
}
.meal-box .meal-item .nav-box .nav-item:hover {
  background-color: #3645ae;
}
.meal-box .meal-item .nav-box .nav-item2 {
  border-radius: 0.0506rem;
  width: 1.2405rem;
  height: 0.3418rem;
  font-size: 0.1772rem;
  background: #f89e16;
  color: #fff;
  text-align: center;
  line-height: 0.3418rem;
  transition: all 0.5s;
}
.meal-box .meal-item .nav-box .nav-item2:hover {
  background-color: #ff6600;
}
.meal-box .meal-item .nav-box .nav-item3 {
  border-radius: 0.0506rem;
  width: 1.2405rem;
  height: 0.3418rem;
  font-size: 0.1772rem;
  border: 0.0127rem solid #4251b6;
  color: #4251b6;
  text-align: center;
  line-height: 0.3418rem;
  transition: all 0.5s;
}
.meal-box .meal-item .nav-box .nav-item3:hover {
  background: #4251b6;
  color: #fff;
}
.secure-box {
  width: 100%;
  height: 7.5949rem;
  background-color: #fff;
}
.secure-box .secure-con {
  max-width: 17.7215rem;
  margin: 0 auto;
}
.secure-box .secure-con h1 {
  padding-top: 0.6329rem;
  padding-bottom: 0.1266rem;
  font-size: 0.3544rem;
  text-align: center;
}
.secure-box .secure-con h3 {
  padding-bottom: 0.6329rem;
  text-align: center;
}
.secure-box .secure-con .secure-bottom {
  width: 100%;
  height: 5.0633rem;
  display: flex;
  align-items: center;
}
.secure-box .secure-con .secure-bottom .secure-item {
  width: 25%;
  height: 3.1646rem;
  padding: 0.5063rem;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.5s;
  overflow: hidden;
}
.secure-box .secure-con .secure-bottom .secure-item .secure-img {
  width: 0.3544rem;
  height: 0.3544rem;
  background-image: url(/static/img/icon_24_24_function_multiple.svg);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.secure-box .secure-con .secure-bottom .secure-item .secure-img2 {
  width: 0.3544rem;
  height: 0.3544rem;
  background-image: url(/static/img/icon_24_24_function_flexible.svg);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.secure-box .secure-con .secure-bottom .secure-item .secure-img3 {
  width: 0.3544rem;
  height: 0.3544rem;
  background-image: url(/static/img/icon_24_24_function_process.svg);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.secure-box .secure-con .secure-bottom .secure-item .secure-img4 {
  width: 0.3544rem;
  height: 0.3544rem;
  background-image: url(/static/img/icon_24_24_function_safe.svg);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.secure-box .secure-con .secure-bottom .secure-item h2 {
  padding: 0.2532rem 0;
  font-size: 0.3038rem;
  transition: all 0.3s;
}
.secure-box .secure-con .secure-bottom .secure-item p {
  font-size: 0.1772rem;
  transition: all 0.3s;
}
.secure-box .secure-con .secure-bottom .secure-item:nth-child(2n) {
  background-color: #f2f2f2;
}
.secure-box .secure-con .secure-bottom .secure-item:hover {
  height: 4.4304rem;
  background-color: #1664ff;
  background-image: url(/static/img/capacity_bg_35.png);
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0.038rem 0 0.1013rem #eee;
}
.secure-box .secure-con .secure-bottom .secure-item:hover h2 {
  color: #ffffff;
}
.secure-box .secure-con .secure-bottom .secure-item:hover p {
  color: #ffffff;
}
.secure-box .secure-con .secure-bottom .secure-item:hover .secure-img {
  background-image: url(/static/img/iconw_24_24_function_multiple.svg);
}
.secure-box .secure-con .secure-bottom .secure-item:hover .secure-img2 {
  background-image: url(/static/img/iconw_24_24_function_flexible.svg);
}
.secure-box .secure-con .secure-bottom .secure-item:hover .secure-img3 {
  background-image: url(/static/img/iconw_24_24_function_process.svg);
}
.secure-box .secure-con .secure-bottom .secure-item:hover .secure-img4 {
  background-image: url(/static/img/iconw_24_24_function_safe.svg);
}
.product-box {
  width: 100%;
  padding-bottom: 1.0127rem;
}
.product-box .product-con {
  max-width: 17.7215rem;
  height: 100%;
  margin: 0 auto;
}
.product-box .product-con .product-bottom {
  width: 100%;
  height: 5.8228rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
.product-box .product-con .product-bottom .product-item {
  width: 24.8%;
  height: 100%;
  background-color: #282828;
  padding: 0.4557rem;
  cursor: pointer;
  transition: all 0.5s;
}
.product-box .product-con .product-bottom .product-item .product-img {
  width: 1.2152rem;
  height: 1.2152rem;
  background-image: url(/static/img/ic_1.svg);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.product-box .product-con .product-bottom .product-item h2 {
  padding: 0.3797rem 0;
  font-size: 0.2532rem;
  color: #ffffff;
  transition: all 0.3s;
}
.product-box .product-con .product-bottom .product-item p {
  color: #ffffff;
  font-size: 0.1772rem;
  transition: all 0.3s;
}
.product-box .product-con .product-bottom .product-item:nth-child(2n) {
  background-color: #fff;
}
.product-box .product-con .product-bottom .product-item:nth-child(2n) h2 {
  color: #000;
}
.product-box .product-con .product-bottom .product-item:nth-child(2n) p {
  color: #000;
}
.product-box .product-con .product-bottom .product-item:hover {
  background-color: #1664ff;
}
.product-box .product-con .product-bottom .product-item:hover:nth-child(2n) h2 {
  color: #fff;
}
.product-box .product-con .product-bottom .product-item:hover:nth-child(2n) p {
  color: #fff;
}
.product-box .product-con h1 {
  padding-top: 0.6329rem;
  padding-bottom: 0.1266rem;
  font-size: 0.3544rem;
  text-align: center;
}
.product-box .product-con h3 {
  padding-bottom: 0.6329rem;
  text-align: center;
}