@media screen and (min-width: 768px) { .main { padding-top: 50px; } .main .title { font-size: 28px; } .main .date { font-size: 18px; color: #b2b2b2; margin-top: 16px; } .main .line { width: 100%; margin: 40px 0 70px; position: relative; height: 1px; background-color: #d8d8d8; } .main .line::after { content: ""; display: block; width: 24px; height: 2px; background: #0688d2; } .main .detail p { line-height: 34px; margin: 32px 0; } } @media screen and (max-width: 768px) { .main { padding: 0.8rem 0.32rem; } .main .title { font-size: 0.34rem; } .main .date { font-size: 0.24rem; color: #b2b2b2; margin-top: 0.16rem; } .main .line { width: 100%; margin: 0.34rem 0 0.5rem; position: relative; height: 0.01rem; background-color: #d8d8d8; } .main .line::after { content: ""; display: block; width: 0.4rem; height: 0.03rem; background: #0688d2; } .main .detail p { line-height: 0.48rem; margin: 0.32rem 0; font-size: 0.26rem; color: #404040; } .main .detail img { max-width: 100%; } }