
/* 案例 */
.md34821.md-case-1 { padding-top: 1.23rem; padding-bottom: .62rem; }

.md34821.md-case-1 .layout { margin-left: auto; margin-right: auto; width: 14.4rem; max-width: 90%; }

.md34821.md-case-1 .m-title { line-height: 1.40385; }

.md34821.md-case-1 .cate { margin-top: .08rem; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.md34821.md-case-1 .cate::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #eee; }

.md34821.md-case-1 .cate .li { width: auto; max-width: 100%; margin-right: .5rem; }

.md34821.md-case-1 .cate .li:last-of-type { margin-right: 0; }

.md34821.md-case-1 .cate .li.on { color: var(--theme); }

.md34821.md-case-1 .cate .li.on a { position: relative; }

.md34821.md-case-1 .cate .li.on a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--theme); }

.md34821.md-case-1 .cate .li a { display: block; line-height: 1.2; padding: .22rem 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.md34821.md-case-1 .cate .li a:hover { color: var(--theme); }

.md34821.md-case-1 .list { margin-top: .4rem; }

.md34821.md-case-1 .list .li { width: calc(695 / 1440 * 100%); margin-bottom: .2rem; }

.md34821.md-case-1 .list .li:hover .media img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.md34821.md-case-1 .list .li:hover .tit { color: var(--theme); }

.md34821.md-case-1 .list .media { overflow: hidden; }

.md34821.md-case-1 .list .media img { aspect-ratio: 695 / 440; -o-object-fit: cover; object-fit: cover; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.md34821.md-case-1 .list .text { min-height: .92rem; padding-top: .25rem; }

/* 分页 start */
.m-pages { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; --size: .5rem; }

.m-pages .item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: var(--size); height: var(--size); line-height: var(--size); padding: 0 .2em; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; margin-right: .2rem; border: 1px solid #eee; background-color: #fff; }

.m-pages .item:last-child { margin-right: 0; }

.m-pages .item:hover { color: #333; border-color: #333; }

.m-pages .item.on { color: #fff; background: #333; }

.m-pages .item.disabled { pointer-events: none; }

.m-pages .a::before { content: ''; display: block; margin: auto; width: .1rem; height: 1px; background: #666; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; margin-bottom: -1px; }

.m-pages .a::after { content: ''; display: block; margin: auto; width: .1rem; height: 1px; background: #666; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.m-pages .prev { margin-right: .4rem; }

.m-pages .next { margin-left: .2rem; }

.m-pages .next .a::before { -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.m-pages .next .a::after { -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

@media (max-width: 900px) { .m-pages { --size: 30px; }
  .m-pages .prev { margin-right: 0.2rem; }
  .m-pages .next { margin-left: 0; } }

/* 分页 end */
