.teach-article { padding-top: .36rem;}
.teach-article .article-head { display: -ms-flexbox; display: flex; justify-content: space-between; background: #f8f8f8; margin: 0 0 .4rem; padding: .2rem .3rem .25rem .42rem;}
.teach-article .article-head .img-box { position: relative; z-index: 1; width: 1.7rem;}
.teach-article .article-head .img-box::after { position: absolute; top:auto; right: -.08rem; bottom: -.07rem; left: auto; z-index: -1; content: ""; width: 100%; height: 100%; background: linear-gradient(50deg, #09b586, #3479ef);}
.teach-article .article-head .img-box .img-zoom { box-shadow: 0 0 0.12rem 0 rgba(0, 0, 0, 0.25);}
.teach-article .article-head .img-box .img { padding: 130% 0 0; background: no-repeat 50% 10%; background-size: cover;}
.teach-article .article-head .text { width: calc(100% - 2.4rem); padding: .1rem 0 0; font-size: 0.18rem; font-weight: 500; line-height: 200%; color: #333; text-align: left;}
.teach-article .article-title { margin: .4rem 0 .2rem; border-bottom: 1px solid #1e85d0;}
.teach-article .article-head .text .name { font-size: .18rem;
    font-weight: 500;
    color: #316cca;
    margin: 0 0 .2rem;}
.teach-article .article-head .text .name span { font-size: .23rem;
    color: #333;
    font-weight: 700;
    margin-right: .3rem;}
    @media screen and (max-width: 768px) {
.teach-article .article-head { flex-wrap: wrap; justify-content: center; padding: .2rem .1rem;}
.teach-article .article-head .text { width: 100%; order: 1;}
.teach-article .article-head .text .name { text-align: center; margin: .1rem 0 0;}
 }