.news .m { display: none; } .news-list { display: flex; flex-wrap: wrap; width: 76.9791666667vw; margin: 2.9166666667vw auto 0 auto; } .news-list li { width: 23.4375vw; height: 27.0833333333vw; box-sizing: border-box; border: 1px solid #e6e6e6; border-radius: 1.3020833333vw 0 1.3020833333vw 0; background-color: #fff; transition: all 0.3s ease-in-out; margin-right: 3.3333333333vw; margin-bottom: 3.3333333333vw; overflow: hidden; } .news-list li:nth-child(3n) { margin-right: 0; } .news-list li a { display: flex; flex-direction: column; height: 100%; } .news-list li a .thumb { width: 100%; height: 15.625vw; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; background-image: url("../images/news_thumb.jpg"); } .news-list li a .art-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 0; flex-grow: 1; padding: 1.0416666667vw 1.3541666667vw; box-sizing: border-box; text-align: left; } .news-list li a .art-info .cates { line-height: 1.875vw; font-size: 0.8333333333vw; color: #999; } .news-list li a .art-info .title { margin-top: 0.5208333333vw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.5625vw; height: 3.125vw; font-size: 1.1458333333vw; color: #333; transition: all 0.3s ease-in-out; } .news-list li a .art-info .date { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 1.3541666667vw; height: 2.3958333333vw; font-size: 0.8333333333vw; color: #999; } .news-list li a .art-info .date::after { content: "\e64c"; font-family: "iconfont"; font-size: 1.3020833333vw; color: #dbdbdb; transition: all 0.3s ease-in-out; } .news-list li:hover { border-color: transparent; box-shadow: 0 0 5.2083333333vw rgba(0, 0, 0, 0.1); } .news-list li:hover .art-info .title, .news-list li:hover .art-info .date::after { color: #00479d; } .detail { width: 62.5vw; margin: 0 auto; } .detail h2 { line-height: 2.8125vw; text-align: center; font-size: 1.5625vw; color: #333; } .detail .news-date { text-align: center; line-height: 2.6041666667vw; font-size: 0.7291666667vw; color: #999; padding-bottom: 1.5625vw; } .detail .desc { padding: 1.5625vw 0; line-height: 1.5625vw; font-size: 0.8333333333vw; color: #333; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; } .detail .desc p { margin-bottom: 0.5208333333vw; } .detail .desc img { max-width: 100%; } .detail .detail-menu { display: flex; height: 5.2083333333vw; justify-content: space-between; align-items: center; } .detail .detail-menu .rows { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.875vw; } .detail .detail-menu .rows a { font-size: 0.78125vw; color: #999; transition: all 0.3s ease-in-out; } .detail .detail-menu .rows a:hover { color: #00479d; } .detail .detail-menu .go-back { display: flex; justify-content: center; align-items: center; width: 7.8125vw; height: 2.6041666667vw; border: 1px solid #e4e4e4; border-radius: 0.2604166667vw; font-size: 0.78125vw; color: #999; transition: all 0.3s ease-in-out; } .detail .detail-menu .go-back::after { content: "\e6ba"; font-family: "iconfont"; font-size: 1.0416666667vw; } .detail .detail-menu .go-back:hover { color: #00479d; border-color: #00479d; } @media screen and (min-width: 769px) and (max-width: 1024px) { .detail { width: 94%; } } @media screen and (max-width: 768px) { .news-list { width: 100%; flex-direction: column; margin-top: 0; } .news-list li { width: 100%; margin-right: 0; margin-bottom: 2.6666666667vw; border-radius: 3.3333333333vw 0 3.3333333333vw 0; } .news-list li a { flex-direction: row; } .news-list li a .thumb { width: 42.6666666667vw; height: 28.5333333333vw; } .news-list li a .thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .news-list li a .art-info { width: 0; height: auto; padding: 1.6vw 2.6666666667vw; } .news-list li a .art-info .cates { display: block; line-height: 4vw; font-size: 3.2vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-list li a .art-info .title { -webkit-line-clamp: 2; height: 11.7333333333vw; line-height: 5.3333333333vw; font-size: 3.4666666667vw; margin: 0; } .news-list li a .art-info .date { height: auto; line-height: 4.5333333333vw; font-size: 3.2vw; margin-top: 0; } .news-list li a .art-info .date::after { font-size: 3.7333333333vw; } .news .pc { display: none; } .news .m { display: block; } .detail { width: 100%; padding: 4.6666666667vw 8vw; box-sizing: border-box; } .detail h2 { line-height: 7.2vw; font-size: 4.5333333333vw; } .detail .news-date { line-height: 7.2vw; font-size: 2.6666666667vw; padding-bottom: 3.4666666667vw; } .detail .desc { padding: 3.4666666667vw 0; line-height: 5.8666666667vw; font-size: 3.2vw; } .detail .desc p { margin-bottom: 1.3333333333vw; } .detail .detail-menu { height: auto; } .detail .detail-menu .rows { padding: 1.3333333333vw 0; line-height: 4.8vw; } .detail .detail-menu .rows a { font-size: 2.6666666667vw; } .detail .detail-menu .go-back { display: none; } }/*# sourceMappingURL=artlist.css.map */