.content-box {
  padding: 30px;
  width: 100%;
  box-shadow: 0px 4px 20px 0 rgba(7, 42, 101, 0.15);
  background-color: #fff;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.content-box .avter {
  display: block;
  margin: 50px auto 0 auto;
  width: 240px;
  height: auto;
}
.content-box .name {
  margin-top: 37px;
  font-size: 20px;
  font-weight: bold;
  color: #286ace;
  text-align: center;
}
.content-box .jobs {
  display: block;
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #333;
}
.content-box .info-box {
  margin: 40px auto 45px auto;
  padding: 38px 80px 50px 125px;
  width: calc(100% - 220px);
  box-sizing: border-box;
  background-color: #f5f7fa;
}
.content-box .info-box .info-item {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.content-box .info-box .info-item:nth-child(1) {
  margin-bottom: 50px;
}
.content-box .info-box .info-item .item-title {
  display: block;
  width: 100px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: bold;
  color: #286ace;
}
.content-box .info-box .info-item .item-con {
  flex: 1;
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
.content-box .code-box .code {
  display: block;
  margin: 0 auto 30px auto;
  width: 126px;
  height: 126px;
}
.content-box .code-box p {
  text-align: center;
}

.u-title-box {
  position: relative;
  width: 100%;
  border-bottom: solid 1px #ebebeb;
  box-sizing: border-box;
}
.u-title-box span {
  display: inline-block;
  height: 48px;
  font-size: 24px;
  font-weight: bold;
  color: #286ace;
}
.u-title-box i {
  display: block;
  width: 95px;
  height: 5px;
  background-color: #286ace;
}

.position-box {
  margin-bottom: 25px;
  width: 100%;
  font-size: 16px;
  line-height: 1.3;
  color: #333;
}
.position-box a {
  font-size: 16px !important;
  color: #333;
}
.position-box a:hover {
  color: #286ace;
}
.position-box span {
  display: inline-block;
  margin: 0 10px;
}

@media screen and (min-width: 993px) and (max-width: 1360px) {
  .content-box {
    padding: 1.5625vw;
    box-shadow: 0 0.20833vw 1.04167vw 0 rgba(7, 42, 101, 0.15);
    border-top-left-radius: 0.52083vw;
    border-top-right-radius: 0.52083vw;
  }
  .content-box .avter {
    margin: 2.60417vw auto 0 auto;
    width: 12.5vw;
  }
  .content-box .name {
    margin-top: 1.92708vw;
    font-size: 18px;
    font-size: 1.0416666667vw;
  }
  .content-box .jobs {
    margin-top: 0.78125vw;
    font-size: 16.2px;
    font-size: 0.9375vw;
  }
  .content-box .info-box {
    margin: 2.08333vw auto 2.34375vw auto;
    padding: 1.97917vw 4.16667vw 2.60417vw 6.51042vw;
    width: calc(100% - 11.45833vw);
  }
  .content-box .info-box .info-item:nth-child(1) {
    margin-bottom: 2.60417vw;
  }
  .content-box .info-box .info-item .item-title {
    width: 5.20833vw;
    font-size: 14.4px;
    font-size: 0.8333333333vw;
  }
  .content-box .info-box .info-item .item-con {
    font-size: 14.4px;
    font-size: 0.8333333333vw;
  }
  .content-box .code-box .code {
    margin: 0 auto 1.5625vw auto;
    width: 6.5625vw;
    height: 6.5625vw;
  }
  .u-title-box span {
    height: 2.5vw;
    font-size: 21.6px;
    font-size: 1.25vw;
  }
  .u-title-box i {
    width: 4.94792vw;
    height: 0.26042vw;
  }
  .position-box {
    margin-bottom: 1.30208vw;
    font-size: 14.4px;
    font-size: 0.8333333333vw;
  }
  .position-box a {
    font-size: 0.83333vw !important;
  }
  .position-box span {
    margin: 0 0.52083vw;
  }
}
@media screen and (max-width: 992px) {
  .content-box {
    padding: 10px;
    box-shadow: 0px 4px 10px 0 rgba(7, 42, 101, 0.15);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .content-box .avter {
    margin: 30px auto 0 auto;
    width: 50%;
  }
  .content-box .name {
    margin-top: 20px;
  }
  .content-box .jobs {
    margin-top: 15px;
  }
  .content-box .info-box {
    margin: 30px auto 30px auto;
    padding: 18px 15px 30px 15px;
    width: 100%;
  }
  .content-box .info-box .info-item {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .content-box .info-box .info-item:nth-child(1) {
    margin-bottom: 30px;
  }
  .content-box .info-box .info-item .item-title {
    width: 85px;
  }
  .content-box .code-box .code {
    display: block;
    margin: 0 auto 30px auto;
    width: 126px;
    height: 126px;
  }
  .u-title-box {
    position: relative;
    width: 100%;
  }
  .u-title-box span {
    font-size: 24px;
  }
  .u-title-box i {
    height: 3px;
  }
  .position-box {
    margin-bottom: 25px;
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
  }
  .position-box span {
    margin: 0 5px;
  }
}