.sub_banner_wrapper {
  background: url("../images/banner/banner_bg_doc.jpg") center top no-repeat;
  background-size: auto 90%;
}

.product_doc_box {
  margin: 0 -15px;
}

.product_doc_item {
  padding: 15px;
  width: 16.6%;
  float: left;
}

.product_doc_item_box {
  height: 160px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  background: #E8F0FF;
  padding: 24px 26px;
  border: 2px solid transparent;
}

.product_doc_item_box .title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 16px;
  color: #1F2329;
}

.product_doc_item_box span {
  font-size: 12px;
  display: none;
  margin-top: 8px;
}

.product_doc_item_box .sub_title {
  font-size: 12px;
  color: #646A73;
  margin-top: 8px;
}

.product_doc_item_box:hover span {
  display: inline-block;
}

.product_doc_item_box:hover .sub_title {
  display: none;
}

.bg1002 {
  background: #FFF3F1;
}

.bg1008,
.bg1005 {
  background: #F8F9FF;
}

.bg1003 {
  background: #FBF3FF;
}

.bg1004 {
  background: #F5FFF5;
}

.bg1007 {
  background: #F2FDFF;
}

.bg1018 {
  background: #E7EEFF;
}

.product_doc_item_box:hover {
  border: 2px solid #3D5FFF;
}

.bg1002:hover {
  border: 2px solid #FFA1A1;
}

.bg1008:hover {
  border: 2px solid #2491EC;
}

.bg1003:hover {
  border: 2px solid #F74F9E;
}

.bg1004:hover {
  border: 2px solid #A8D494;
}

.bg1005:hover {
  border: 2px solid #979797;
}

.bg1007:hover {
  border: 2px solid #6DE6FF;
}

.bg1018:hover {
  border: 2px solid #ADC5FF;
}

.doc_model_box {
  height: 1280px;
  background: linear-gradient(360deg, #ECF5FF 0%, rgba(238, 244, 255, 0.74) 52%, #FFFFFF 100%);
  margin-top: 80px;
}

.tool_box {
  font-size: 24px;
  text-align: center;
  margin-top: 60px;
}

.tool_box>img {
  margin-right: 42px;
}

.tool_step {
  margin-right: 42px;
  cursor: pointer;
  font-family: "PingFangSC-Medium";
}

.tool_step.cur {
  color: #336DF4;
}

.tool_step.cur>span {
  background: #336DF4;
  color: #fff;
}

.tool_step:last-child {
  margin-right: 0;
}

.tool_step>span {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  line-height: 32px;
  display: inline-block;
  box-shadow: 0px 4px 4px 0px rgba(192, 199, 218, 0.3);
  border-radius: 50%;
  text-align: center;
}

.step_box {
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
}

.step_item {
  width: 430px;
  height: 492px;
  background: #fff;
  border-radius: 25px;
  font-size: 18px;
  line-height: 28px;
  padding: 30px 42px 0 42px;
  position: relative;
}

.step_item>img {
  display: block;
  margin: auto;
  margin-top: 50px;
}

.tools_row {
  display: none;
  justify-content: space-between;
  display: none;
}

.tools_row.cur {
  display: flex;
}

.tools_item {
  width: 412px;
  height: 152px;
  background: #fff;
  box-shadow: 0px 16px 24px 0px rgba(227, 234, 252, 0.3);
  border-radius: 10px;
  padding: 32px 40px;
  display: inline-block;
  text-align: left;
}

.tools_item .label {
  line-height: 32px;
  background: #CCD8FC;
  border-radius: 6px;
  color: #4372FF;
  font-size: 14px;
  display: inline-block;
  padding: 0 12px;
  margin-left: 30px;
}

.tools_item .label.resource {
  background: #CCFAFC;
  color: #43C0FF;
}

.tools_item .label.info {
  background: #E1D8FF;
  color: #8B1EB8;
}

.tools_item .label.tool {
  background: #FCECCC;
  color: #C8AB78;
}

.tools_item .label.operation {
  background: #D0FCCC;
  color: #2A9A2E;
}

.tools_item .label.red {
  background: #FFBABA;
  color: #B93737;
}

.tools_item .f_18 {
  font-family: "PingFangSC-Medium";
}

@media screen and (max-width:1360px) {
  .step_item {
    width: 400px;
  }
}