/* 
    CSS Document 
    author xuyan 2025-02-14
*/
/* 光影长廊 */
.inner-media{ background: #dad5d1 url(../img/inner_media.jpg) center top no-repeat; background-size: 19.2rem auto;}
.media-top{ display: flex; justify-content: space-between; overflow: hidden; padding-bottom: .3rem; width: 14.52rem; margin: 0 auto; }
.search-main{ display: block; width: 2.22rem; float: right; height: .41rem; position: relative; }
.search-input{ width: 1.58rem; height: .39rem; line-height: .39rem; border: .01rem solid #a38e5b; background: rgba(210, 188, 141, .36); padding: 0 .3rem; color: #786f5e; font-size: .18rem; border-radius: .06rem; }
.search-input:-moz-placeholder{ color: #ad986b;}
.search-input::-moz-placeholder{ color: #ad986b;}
.search-input:-ms-input-placeholder{ color: #ad986b;}
.search-input::-webkit-input-placeholder{ color: #ad986b;}
.search-btn{ position: absolute; right: 0; top: 0; width: .41rem; height: .41rem; background-position: -1.35rem -1.12rem; font-size: 0; }
.media{ overflow: hidden; width: 14.94rem; margin: 0 auto; padding: .2rem .05rem; }
.media li{ width: 4.56rem; height: 2.71rem; float: left; margin: 0 .21rem .5rem; background: #fff; border-radius: .1rem .1rem 0 0; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); cursor: pointer; }
.media li a{ display: block; height: 100%; }
.media-img{ height: 1.84rem; border-radius: .1rem; overflow: hidden; position: relative; box-sizing: border-box; }
.media-img em{ width: .37rem; height: .37rem; background-position: -1.48rem -2.22rem; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.185rem 0 0 -.185rem; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); transform:scale(1.5); }
.media-name{ margin: 0 .17rem; height: .46rem; line-height: .46rem; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; font-size: .22rem; color: #404040; border-bottom: .01rem solid #f2f2f2; }
.media-name span{ display: inline-block; color: #fffbf1; font-size: .18rem; text-shadow: -.01rem -.01rem 0 #b39450, .01rem -.01rem 0 #b39450, -.01rem  .01rem 0 #b39450, .01rem  .01rem 0 #b39450; vertical-align: middle; margin: -.05rem .15rem 0 0; width: .74rem; height: .21rem; line-height: .22rem; text-align: center; background-position: -1.52rem -1.73rem; overflow: hidden; }
.media-next{ display: flex; align-items: center; justify-content: space-between; font-size: .18rem; color: #808080; padding: 0 .2rem; height: .4rem; line-height: .4rem; }
.media-next em{ width: .15rem; height: .15rem; background-position: -1.54rem -2.02rem; vertical-align: middle; margin: -.03rem .05rem 0 0; }
.media li:hover .media-img{ border: .03rem solid #d2bb8c;}
.media li:hover .media-img::after{ display: block; content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .5); }
.media li:hover .media-img em{ opacity:1; filter:alpha(opacity=100); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
.media li.imgs .media-next em{ background-position: -1.75rem -2.02rem;}
.media li.imgs .media-img em{ background-position: -1.88rem -2.22rem;}

/* 社区精选 */
.inner-club{ background: #dad5d1 url(../img/inner_club.jpg) center top no-repeat; background-size: 19.2rem auto;}
.club-tab{ display: flex; justify-content: space-between; overflow: hidden; padding-bottom: .3rem; width: 14.12rem; margin: 0 auto; }
.club-main{ padding: .2rem .05rem; width: 14.28rem; margin: 0 auto; }
.club{ overflow: hidden; width: 4.56rem; float: left; padding: .05rem .1rem; }
.club li{ width: 4.56rem; min-height: 2.72rem; margin-bottom: .16rem; background: #fff; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); box-sizing: border-box; position: relative; border: .02rem solid #fff; }
.club li a{ display: block; height: 100%; box-sizing: border-box; padding: .16rem .2rem .92rem; }
.club-top{ padding-left: .7rem; position: relative; height: .66rem; }
.avatar{ position: absolute; left: .05rem; top: 0; width: .56rem; height: .56rem; border-radius: 50%; overflow: hidden; }
.avatar img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.user-name{ font-size: .22rem; color: #404040; height: .26rem; overflow: hidden; padding-top: .02rem; }
.user-info{ display: flex; align-items: center; justify-content: space-between; font-size: .18rem; color: #808080; }
.club-name{ font-size: .18rem; color: #404040; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; padding-top: .15rem; border-top: .01rem solid #f0ebe6; }
.club-name.long{ border: 0; padding-top: .12rem; }
.club-info{ color: #999; font-size: .18rem; line-height: .28rem; margin-top: .08rem; position: relative; }
.club-info::after{ display: ''; content: '全文'; position: absolute; top: .28rem; right: 0; font-size: .18rem; color: #cc1818; line-height: .28rem; }
.club-next{ display: flex; align-items: center; justify-content: space-between; font-size: .18rem; color: #808080; position: absolute; left: .2rem; right: .2rem; bottom: .18rem; }
.club-tag{ height: .24rem; line-height: .24rem; background: #ede9e2; border-radius: .12rem; font-size: .16rem; color: #82562a; padding: 0 .1rem; }
.club-more{ display: flex; align-items: center; }
.club-more span{ display: flex; align-items: center; margin-left: .12rem; }
.club-more span em{ width: .23rem; height: .2rem; background-position: 0 -2.6rem; margin-right: .02rem; }
.club-more span em.reply-icon{ width: .19rem; background-position: -.27rem -2.6rem; }
.club-more span em.like-icon{ width: .19rem; background-position: -.52rem -2.6rem; }
.club-img{ height: 1.3rem; border-radius: .05rem; overflow: hidden; }
.club-img.long{ height: 4.3rem;}
.club-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.club li:hover{ border-color: #d2bb8c;}