@media only screen and (min-width: 769px) {
  .three-article-wrap {
  }
}

/* 应用于移动端设备（例如平板和手机） */
@media only screen and (max-width: 1023px) {
  .three-article-wrap {
    margin: 0 10px 10px !important;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  .three-article-item:not(:first-child) {
    margin-top: 40px;
  }
  .three-article-item {
    width: 100% !important;
  }
  .three-article-title {
    
  }
}

@media only screen and (min-width: 1024px) {
  .three-article-wrap {
    width: 1004px;
  }
}

/* 应用于桌面端设备 */
@media only screen and (min-width: 1200px) {
  .three-article-wrap {
  }
}

.three-article-wrap{
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-color: #FFF;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  padding: 28px 0;
  margin: 0  auto 16px;
}

.three-article-item {
  width: 33.333%;
  padding: 0 24px;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-right: 1PX solid #f5f5f5 ;
}

.three-article-title {
  color: #16181f;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  margin-bottom: 20px;
}

.article-item {
  position: relative;
  margin: 10px 0 0;
  padding: 0 0 0 47px
}

.article-item > a{
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
}

.article-item:nth-child(1) .title-tag {
  text-indent: -999em;
  background-image: url('https://personal-act.wpscdn.cn/operations-fe/bbs-client/img/ic-hot-1.8d6c898.png');
}

.article-item:nth-child(2) .title-tag {
  text-indent: -999em;
  background-image: url('https://personal-act.wpscdn.cn/operations-fe/bbs-client/img/ic-hot-2.d547062.png');
}

.article-item:nth-child(3) .title-tag {
  text-indent: -999em;
  background-image: url('https://personal-act.wpscdn.cn/operations-fe/bbs-client/img/ic-hot-3.3179e1c.png');
}

.article-item:nth-child(4) .title-tag {
  top: 5px;
  left: 6px;
  width: 29px;
  height: 16px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAgCAYAAABD9mvVAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGuSURBVHgB3ZjNTcNAEIXfrCNOSEAFmApIjgiByDkSZDsIHdBCKiB0QAcbAVGOlsKBa0owFeCzZXvw+Af/AAV4voPHu/bl6Vkzz0v4B7cJxsjMggzdAeRjKDD2IN5znC6tnYb1Nv31rnvbPRDRI4ZNxCnf29vrtSx+CXUvuzl55KAEhpnY2eXe9B/QCEN3sgNRVujpOOpegxsyowDK4Dg56zpK3hga8bxxTyj70AhR1BXK5EMjxnSF5iPlFBqJ47DfdX0oJA8OjaPOBcd5OYY6OJRr4+gIKjsuA59SG6HsKXQTojSS0ggl1jlDmfdSWkJJp9B8hkr5EUqgI2gkQyil5ajOZtRxVO9oyUmSUErp6IHOoCDUpwyl0NTzoZIyLAimuvpQSB0WhFKo1t+zKiwIhVBicw6NcP/TJaUdlyisb+s5qnOGVmFBMG4b+NBKFRYEA81UYUEojjvXm/cv6EtG0Xx2dVIvCkc5y56gDlq3V+Wnm2SrdocaPhRy7C3bO4VQOTxi8qY6xOYiQdbai7Cz21647YcPTufIskV+9DmoEMHgPO7RM+LDlbWTqP/8G38bgZOkLHvfAAAAAElFTkSuQmCC');
}

.article-item:nth-child(5) .title-tag {
  top: 5px;
  left: 6px;
  width: 29px;
  height: 16px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAgCAYAAABD9mvVAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGuSURBVHgB3ZjNTcNAEIXfrCNOSEAFmApIjgiByDkSZDsIHdBCKiB0QAcbAVGOlsKBa0owFeCzZXvw+Af/AAV4voPHu/bl6Vkzz0v4B7cJxsjMggzdAeRjKDD2IN5znC6tnYb1Nv31rnvbPRDRI4ZNxCnf29vrtSx+CXUvuzl55KAEhpnY2eXe9B/QCEN3sgNRVujpOOpegxsyowDK4Dg56zpK3hga8bxxTyj70AhR1BXK5EMjxnSF5iPlFBqJ47DfdX0oJA8OjaPOBcd5OYY6OJRr4+gIKjsuA59SG6HsKXQTojSS0ggl1jlDmfdSWkJJp9B8hkr5EUqgI2gkQyil5ajOZtRxVO9oyUmSUErp6IHOoCDUpwyl0NTzoZIyLAimuvpQSB0WhFKo1t+zKiwIhVBicw6NcP/TJaUdlyisb+s5qnOGVmFBMG4b+NBKFRYEA81UYUEojjvXm/cv6EtG0Xx2dVIvCkc5y56gDlq3V+Wnm2SrdocaPhRy7C3bO4VQOTxi8qY6xOYiQdbai7Cz21647YcPTufIskV+9DmoEMHgPO7RM+LDlbWTqP/8G38bgZOkLHvfAAAAAElFTkSuQmCC');
}

.article-item:nth-child(n+5) .title-tag {
  top: 5px;
  left: 6px;
  width: 29px;
  height: 16px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAgCAYAAABD9mvVAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGuSURBVHgB3ZjNTcNAEIXfrCNOSEAFmApIjgiByDkSZDsIHdBCKiB0QAcbAVGOlsKBa0owFeCzZXvw+Af/AAV4voPHu/bl6Vkzz0v4B7cJxsjMggzdAeRjKDD2IN5znC6tnYb1Nv31rnvbPRDRI4ZNxCnf29vrtSx+CXUvuzl55KAEhpnY2eXe9B/QCEN3sgNRVujpOOpegxsyowDK4Dg56zpK3hga8bxxTyj70AhR1BXK5EMjxnSF5iPlFBqJ47DfdX0oJA8OjaPOBcd5OYY6OJRr4+gIKjsuA59SG6HsKXQTojSS0ggl1jlDmfdSWkJJp9B8hkr5EUqgI2gkQyil5ajOZtRxVO9oyUmSUErp6IHOoCDUpwyl0NTzoZIyLAimuvpQSB0WhFKo1t+zKiwIhVBicw6NcP/TJaUdlyisb+s5qnOGVmFBMG4b+NBKFRYEA81UYUEojjvXm/cv6EtG0Xx2dVIvCkc5y56gDlq3V+Wnm2SrdocaPhRy7C3bO4VQOTxi8qY6xOYiQdbai7Cz21647YcPTufIskV+9DmoEMHgPO7RM+LDlbWTqP/8G38bgZOkLHvfAAAAAElFTkSuQmCC');
}

.title-tag {
  content: '';
  width: 35px;
  height: 27px;
  background-position: center;
  -o-background-size: 100% 100%;
     background-size: 100% 100%;
  background-repeat: no-repeat;

  left: 0;
  top: -2px;
  width: 35px;
  height: 27px;

  position: absolute;
  display: block;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background-size: 100% 100%;
  border-radius: 4px;
  overflow: hidden;
}