.introduceSection {
  width: 1480px;
  justify-content: space-between;
  margin-left: -70px;
  flex-wrap: nowrap;
}

.introduceSection>div:last-child {
  background: url(./../images/title_index.png) no-repeat center / 600px 600px;
}

.introduceSection .h1,
.introduceSection .inline {
  white-space: nowrap;
}

.introduceSection .sub {
  font-weight: bold;
  font-size: 30px;
  color: var(--color-hover);
}

.introduceSection p {
  font-weight: bold;
}

.introduceSection2 h2.h2 {
  margin: 0 0 32px 0;
}

.introduceSection2 {
  text-align: center;
  color: var(--color-normal);
}
.introduceSection2 p{
  font-size: var(--base-font-lg-size);
}

.introduceSection2 .buttonWrap {
  margin: 28px 0 36px 0;
}

.introduceSection2 .skillWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.introduceSection2 .skillWrap li {
  flex: 0 0 387px;
  box-shadow: 1px 0px 8px #1A234E1A;
  border-radius: 12px;
  border-top-left-radius: 38px;
  border-top-right-radius: 38px;
}

.introduceSection2 .skillWrap li img {
  width: 100%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.introduceSection2 .skillWrap .title {
  font-size: 24px;
  color: var(--color-normal);
  font-weight: bold;
  margin: 32px 0 16px 0;
}

.introduceSection2 .skillWrap .description {
  font-size: var(--base-font-size);
  color: var(--color-normal);
  margin: 0 48px 48px;
  text-align: left;
}

.introduceSection3 {
  padding: 40px 24px;
  display: flex;
  align-items: center;
  background: linear-gradient(99deg, #fff 0%, #fff 0%, #f0f6fe 36%, #f6f9fe 91%, #fff 100%) 0% 0% no-repeat padding-box;
}

.introduceSection3 .flexImg>img {
  max-width: 500px;
  width: 100%;
  margin-right: 32px;
}

.introduceSection3 p {
  color: var(--color-normal);
  font-size: var(--base-font-lg-size);
  margin-bottom: 28px;
  max-width: 700px;
}

.introduceSection4 {
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.introduceSection4 p {
  color: var(--color-normal);
  font-size: var(--base-font-lg-size);
  max-width: 700px;
}

.introduceSection4 .h2 {
  margin-bottom: 0;
}

.introduceSection4 .flexImg>img {
  max-width: 500px;
  width: 100%;
  margin-left: 32px;
}

.introduceSection4 .subtitle {
  font-weight: bold;
  font-size: 28px;
  margin-top: 0;
}

.introduceSection4 .subtitle .icomoon {
  font-size: 47px;
  vertical-align: middle;
}

.introduceSection4 .description {
  margin: 32px 0 28px 0;
}

.introduceSection5 {
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(99deg, #fff 0%, #fff 0%, #f0f6fe 36%, #f6f9fe 91%, #fff 100%) 0% 0% no-repeat padding-box;
  margin-bottom: 128px;
}

.introduceSection5 .h2 {
  margin-bottom: 36px;
}

.introduceSection5 .flexImg img {
  max-width: 500px;
}

h2.h2 {
  margin-bottom: 32px;
}

.inline{
  display: inline-block;
}

@media screen and (max-width: 1480px) {
  .introduceSection {
    width: auto;
    margin-left: 15px;
    justify-content: center;
  }

  .introduceSection .h1 {
    white-space: initial;
  }
}

@media screen and (max-width: 1280px) {
  .introduceSection {
    flex-wrap: wrap;
  }

  .introduceSection>div:last-child {
    background: none;
  }

  .introduceSection>div:last-child::after {
    background: url(./../images/title_index.png) no-repeat center / cover;

  }

  .introduceSection2 .skillWrap li {
    flex: 0 0 100%;
    margin-bottom: 15px;
  }

  .introduceSection3 .flexImg>img,
  .introduceSection4 .flexImg>img {
    margin: 0;
  }

  .introduceSection3 p,
  .introduceSection4 p {
    max-width: 900px;
  }

  .introduceSection3 {
    flex-direction: column;
  }

  .introduceSection4 {
    flex-direction: column;
  }

  .introduceSection5 {
    display: block;
    text-align: center;
  }

  .introduceSection5 .h2 {
    text-align: center;
  }

  .introduceSection5 img {
    box-sizing: border-box;
    width: 100%;
  }
}

@media screen and (max-width: 819px) {
  .introduceSection5 .h2 {
    text-align: left;
  }
}

@media screen and (max-width: 480px) {
  .introduceSection .sub {
    font-size: 20px;
  }
}