.article-mod__list li a, .article-item a { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.ad-img { height: 204px; }

.banner { position: relative; width: 500px; height: 342px; overflow: hidden; border-radius: 30px; }

.banner .banner-hd { position: absolute; bottom: 0; right: 0; left: 0; z-index: 1; height: 40px; }

.banner .banner-hd ul { position: absolute; top: 50%; right: 20px; margin-top: -4px; }

.banner .banner-hd ul li { float: left; width: 8px; height: 8px; border-radius: 50%; margin-left: 7px; background: #fff; cursor: pointer; }

.banner .banner-hd ul li:first-child { margin-left: 0; }

.banner .banner-hd ul li.on { background: #4d9ccd; }

.banner .banner-bd li { position: relative; vertical-align: middle; }

.banner .banner-bd li img { width: 500px; height: 342px; object-fit: cover; }

.banner-tle { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; line-height: 40px; padding: 0 106px 0 10px; background: url(../images/opa-5.png); background: rgba(0, 0, 0, 0.5); }

.banner-tle h3 { font-size: 13px; color: #fff; }

.banner-btn { position: absolute; top: 50%; display: block; width: 36px; height: 36px; text-align: center; border-radius: 50%; line-height: 36px; margin-top: -18px; background: rgba(0, 0, 0, 0.3); }

.banner-btn:hover { background: rgba(0, 0, 0, 0.5); }

.banner-btn-prev { left: 10px; }

.banner-btn-next { right: 10px; }

.banner-btn-next .icon { margin-right: -3px; }

.article-mod__hd { position: relative; height: 45px; padding-left: 30px; background: url("../images/tle-bg.jpg") repeat-x; border-radius: 30px; }
.article-mod__hd:before { position: absolute; top: 0; left: 64px; width: 114px; height: 45px; background: url("../images/tle-bg1.jpg") no-repeat; content: ""; }
.article-mod__hd:after { position: absolute; bottom: -7px; left: 53px; width: 0; height: 0; border-right: 10px solid transparent; border-top: 7px solid #cc0000; content: ""; }
.article-mod__tle { position: relative; z-index: 1; font-size: 15px; font-weight: 700; line-height: 45px; color: #fff; }
.article-mod__more { position: absolute; top: 10px; right: 40px; z-index: 2; font-size: 13px; color: #fff; }
.article-mod__bd { height: 277px; padding: 37px 20px 0; background: url("../images/art-bg.jpg") repeat-x; border-radius: 30px; overflow: hidden; margin-top: -12px; }
.article-mod__list li a { display: block; font-size: 14px; color: #555; }
.article-mod__list li + li { margin-top: 13px; }
.article-mod--style2 .article-mod__hd { background: url("../images/tle-bg2.jpg") repeat-x; }
.article-mod--style2 .article-mod__hd:before { background: url("../images/tle-bg3.jpg") no-repeat; }
.article-mod--style2 .article-mod__hd:after { border-top: 7px solid #ff0000; }
.article-mod--list .article-mod__bd { padding: 63px 67px 40px; border-radius: 0; margin-top: -23px; height: auto; }

.card { display: block; width: 450px; height: 256px; margin: 0 auto; transition: .3s; }
.card:hover { opacity: .9; }

.article-item { position: relative; line-height: 42px; padding-left: 20px; border-bottom: 1px dashed #a4a4a4; }
.article-item:before { position: absolute; top: 50%; left: 8px; width: 6px; height: 6px; border-radius: 50%; background: #333; margin-top: -3px; content: ""; }
.article-item a { color: #333; display: inline-block; max-width: 90%; vertical-align: middle; }
.article-item__time { position: absolute; top: 2px; right: 5px; color: #a0a0a0; }

.paging { line-height: 50px; background: #eee4e6; color: #333; text-align: center; }
.paging a { color: #333; }

.article-detail__tle { padding: 20px 0; font-size: 18px; text-align: center; }
.article-detail__meta { line-height: 60px; color: #545454; text-align: center; border-top: 1px dashed #a4a4a4; border-bottom: 1px dashed #a4a4a4; background: url("../images/line.jpg") repeat-x; }
.article-detail__bd { padding: 40px 0; }
.article-detail__bd p { text-indent: 2em; line-height: 2; }
.article-detail__bd p + p { margin: 16px 0 0; }

.filter { padding: 5px 10px; border: 1px solid #ccc; background: #ffffe8; }
.filter-item + .filter-item { margin: 5px 0 0; }
.filter-item__tle { font-weight: 700; font-size: 15px; }
.filter-item__list { overflow: hidden; }
.filter-item__list li { float: left; margin: 0 15px 0 0; }
.filter-item__list li a { position: relative; display: block; line-height: 30px; padding-left: 26px; font-size: 14px; }
.filter-item__list li a:hover { text-decoration: none; color: #f84800; }
.filter-item__list li a:before { position: absolute; top: 50%; left: 10px; width: 10px; height: 10px; background: url("../images/icon-arrow.jpg") no-repeat; content: ""; margin-top: -5px; }