body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
fieldset,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}
#app {
  height: 100vh;
  width: 100%;
  position: relative;
}
#bcimg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 590px;
  background-image: url(img/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  display: flex;
  align-items: center;
}
#bcimg .text {
  margin: auto;
  text-align: center;
}
#bcimg .text h1 {
  font-size: 70px;
  font-family: "Microsoft YaHei";
  color: #ffffff;
}
#bcimg .text h2 {
  font-size: 24px;
  font-family: "Microsoft YaHei";
  color: #ffffff;
}
.flex_box {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-gap: 40px;
  width: 80%;
  margin: auto;
  margin-top: 22%;
  padding-bottom: 20px;
}
.flex_box .item_btn {
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  flex-direction: column;
  display: flex;
  align-items: center;
  min-width: 280px;
  max-width: 318px;
  margin: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.flex_box .item_btn .img_box {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 4px 4px 0 0;
  height: 366px;
  max-height: 366px;
  padding: 20px;
}
.flex_box .item_btn .img_box span {
  font-family: SourceHanSansCN-Bold;
  font-size: 31px;
  color: #ffffff;
}
.flex_box .item_btn .img_box img {
  width: 269px;
  height: 211px;
}
.flex_box .item_btn .img_box.jk {
  background-image: linear-gradient(-30deg, #0b97bf 0%, #15b2d2 33%, #1ecce4 66%);
}
.flex_box .item_btn .img_box.pw {
  background-image: linear-gradient(-30deg, #3889fe 0%, #7bb0fe 66%);
}
.flex_box .item_btn .img_box.dd {
  background-image: linear-gradient(-30deg, #ff6738 0%, #ff957b 66%);
}
.flex_box .item_btn .img_box.wz {
  background-image: linear-gradient(-30deg, #fead38 0%, #ffca7c 66%);
}
.flex_box .item_btn .img_box.user {
  background-image: linear-gradient(-30deg, #666cfd 0%, #a498fd 66%);
}
.flex_box .item_btn .img_box.set {
  background-image: linear-gradient(-30deg, #e7315b 0%, #ec6497 66%);
}
.flex_box .item_btn .img_box.yj {
  background-image: linear-gradient(-30deg, #ff6738 0%, #ff957b 66%);
}
.flex_box .item_btn .img_box.ts {
  background-image: linear-gradient(-30deg, #0b97bf 0%, #15b2d2 33%, #1fcce4 66%);
}
.flex_box .item_btn img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.flex_box p {
  color: #888888;
  font-family: SourceHanSansCN-Regular;
  font-size: 16px;
  padding: 10px 20px;
}