.article-item-wrap{position:relative;width:788px;height:160px;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}.article-item-wrap:hover .article-item__left{left:-20px}.article-item-wrap:hover .article-item__right{width:568px;background-color:#eaeaea}.article-item-wrap:hover .article-item__right__intro,.article-item-wrap:hover .article-item__right__status,.article-item-wrap:hover .article-item__right__title{letter-spacing:1.4px}.article-item-wrap:hover .userInfo-wrap{letter-spacing:1.4px;left:242px}.article-item-wrap .article-item{display:block;width:100%;height:100%;position:absolute;z-index:30;border-radius:4px;overflow:hidden;background-color:#f4f4f4}.article-item-wrap .article-item .icon-flag-wrap{width:30px;height:30px;position:absolute;left:12px;bottom:12px;border-radius:50%;-webkit-box-shadow:0 2px 6px 1px rgba(0,0,0,.1);box-shadow:0 2px 6px 1px rgba(0,0,0,.1);background:rgba(0,0,0,.1)}.article-item-wrap .article-item .icon-flag-wrap .icon-flag{font-size:30px;color:#fff;opacity:.95}.article-item-wrap .article-item__left{width:210px;height:100%;position:absolute;top:0;left:0;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}.article-item-wrap .article-item__left img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}@media screen and (min-width:0\0) and (min-resolution:+72dpi){.article-item-wrap .article-item__left img{width:auto;height:100%;overflow:hidden;position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto}}.article-item-wrap .article-item__right{position:absolute;right:0;top:0;width:544px;height:100%;background-color:#f4f4f4;padding:24px 18px 8px;letter-spacing:.7px}.article-item-wrap .article-item__right,.article-item-wrap .article-item__right__title{color:#000;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}.article-item-wrap .article-item__right__title{font-size:16px;line-height:24px;text-align:left;margin-bottom:12px}.article-item-wrap .article-item__right__intro{color:#999;max-height:48px;-webkit-line-clamp:2}.article-item-wrap .article-item__right__intro,.article-item-wrap .article-item__right__status{font-size:14px;line-height:24px;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}.article-item-wrap .article-item__right__status{width:95%;height:24px;color:#bfbfbf;position:absolute;bottom:48px;left:0}.article-item-wrap .article-item__right__status .num-hidden{opacity:0}.article-item-wrap .article-item__right__status .userInfo-wrap{position:relative;z-index:2}.article-item-wrap .article-item__right__status .icon-collect{margin-left:8px}.article-item-wrap .userInfo-wrap{-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in;position:absolute;z-index:2;left:262px;bottom:16px;z-index:32;font-size:14px;color:#27282d}.article-item-wrap .userInfo-wrap i.username{margin-right:4px}.article-item-wrap .userInfo-wrap i.username:hover{color:#378bd2}
.reader-talk-item{width:788px;border-radius:4px;overflow:hidden;border:3px solid #f4f4f4;padding:24px}.reader-talk-item .reader-info{color:#27282d;height:40px;display:inline-block}.reader-talk-item .reader-info__avatar{margin-right:16px}.reader-talk-item .reader-info__username{display:inline}.reader-talk-item .reader-info__username:hover{color:#378bd2}.reader-talk-item .reader-info__username i{margin-right:4px}.reader-talk-item .talk-content{padding-left:56px;font-size:14px;line-height:26px;color:#666}.reader-talk-item .article-title{padding-left:56px;float:right;margin-top:14px;font-size:16px;line-height:24px;color:#d1d1d1;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.reader-talk-item .article-title:hover{color:#27282d}
.detail-icons{cursor:pointer;width:50px;height:50px;padding:0;text-align:center;border-radius:50%;border:1px solid #fff;line-height:50px;color:#fff;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;position:relative}.detail-icons.grey-icon{border:1px solid #d1d1d1;color:#d1d1d1}.detail-icons.grey-icon:hover{color:#27282d}.detail-icons.gold-icon{border:1px solid #d2bb99;color:#d1d1d1}.detail-icons.gold-icon:hover{color:#d2bb99}.detail-icons:hover{color:#27282d;background-color:#fff}.detail-icons.icon-actived{color:#ff6060}.detail-icons.icon-actived .flip-wrap{-webkit-animation:icon-actived-data-v-11e21736 1s forwards;animation:icon-actived-data-v-11e21736 1s forwards}.detail-icons.vip-column-icon-actived{color:#d2bb99}.detail-icons.vip-column-icon-actived .flip-wrap{-webkit-animation:icon-actived-data-v-11e21736 1s forwards;animation:icon-actived-data-v-11e21736 1s forwards}.detail-icons.icon-hasNum{position:relative}.detail-icons.icon-hasNum .num{position:absolute;bottom:32px;left:30px;-webkit-box-shadow:0 10px 30px rgba(0,0,0,.07);box-shadow:0 10px 30px rgba(0,0,0,.07);font-style:normal;border-radius:20px;padding:6px;min-width:24px;background-color:#ff6060;color:#fff;font-size:12px;line-height:12px;text-align:center}.detail-icons.icon-hasNum .gold-num{background-color:#d2bb99}.detail-icons .icon-fontsize{font-size:16px}.detail-icons .text-fontsize{font-size:14px}@-webkit-keyframes icon-actived-data-v-11e21736{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.3);transform:scale(1.3)}46%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes icon-actived-data-v-11e21736{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.3);transform:scale(1.3)}46%{-webkit-transform:scale(1);transform:scale(1)}}i,span{font-weight:inherit}.flip-wrap{position:relative;display:block}.flip-wrap .flip-up{display:block;-webkit-transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);-o-transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1)}.flip-wrap .flip-down{position:absolute;top:0;left:0;display:block;width:100%;opacity:0;visibility:hidden;-webkit-transform:translateY(-35%);-ms-transform:translateY(-35%);transform:translateY(-35%);-webkit-transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);-o-transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1)}.flip-wrap .flip-up.active{opacity:0;-webkit-transform:translateY(35%);-ms-transform:translateY(35%);transform:translateY(35%);visibility:hidden;-webkit-transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);-o-transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1)}.flip-wrap .flip-down.active{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);visibility:inherit;-webkit-transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);-o-transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1)}
.detail-icons{cursor:pointer;width:50px;height:50px;padding:0;text-align:center;border-radius:50%;border:1px solid #fff;line-height:50px;color:#fff;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;position:relative}.detail-icons.grey-icon{border:1px solid #d1d1d1;color:#d1d1d1}.detail-icons.grey-icon:hover{color:#27282d}.detail-icons.gold-icon{border:1px solid #d2bb99;color:#d1d1d1}.detail-icons.gold-icon:hover{color:#d2bb99}.detail-icons:hover{color:#27282d;background-color:#fff}.detail-icons.icon-actived{color:#ff6060}.detail-icons.icon-actived .flip-wrap{-webkit-animation:icon-actived-data-v-588ede25 1s forwards;animation:icon-actived-data-v-588ede25 1s forwards}.detail-icons.vip-column-icon-actived{color:#d2bb99}.detail-icons.vip-column-icon-actived .flip-wrap{-webkit-animation:icon-actived-data-v-588ede25 1s forwards;animation:icon-actived-data-v-588ede25 1s forwards}.detail-icons.icon-hasNum{position:relative}.detail-icons.icon-hasNum .num{position:absolute;bottom:32px;left:30px;-webkit-box-shadow:0 10px 30px rgba(0,0,0,.07);box-shadow:0 10px 30px rgba(0,0,0,.07);font-style:normal;border-radius:20px;padding:6px;min-width:24px;background-color:#ff6060;color:#fff;font-size:12px;line-height:12px;text-align:center}.detail-icons.icon-hasNum .gold-num{background-color:#d2bb99}.detail-icons .icon-fontsize{font-size:16px}.detail-icons .text-fontsize{font-size:14px}@-webkit-keyframes icon-actived-data-v-588ede25{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.3);transform:scale(1.3)}46%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes icon-actived-data-v-588ede25{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.3);transform:scale(1.3)}46%{-webkit-transform:scale(1);transform:scale(1)}}i,span{font-weight:inherit}.flip-wrap{position:relative;display:block}.flip-wrap .flip-up{display:block;-webkit-transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);-o-transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1)}.flip-wrap .flip-down{position:absolute;top:0;left:0;display:block;width:100%;opacity:0;visibility:hidden;-webkit-transform:translateY(-35%);-ms-transform:translateY(-35%);transform:translateY(-35%);-webkit-transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);-o-transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .3s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1)}.flip-wrap .flip-up.active{opacity:0;-webkit-transform:translateY(35%);-ms-transform:translateY(35%);transform:translateY(35%);visibility:hidden;-webkit-transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);transition:visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);-o-transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s .4s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1)}.flip-wrap .flip-down.active{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);visibility:inherit;-webkit-transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);transition:visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1);-o-transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1);transition:transform .4s cubic-bezier(.77,0,.175,1),visibility 0s,opacity .4s cubic-bezier(.77,0,.175,1),-webkit-transform .4s cubic-bezier(.77,0,.175,1)}
.detail-wrapper{min-height:calc(100vh - 260px)}.detail-page{overflow:hidden}.detail-page__top-img{width:100%;height:100%;position:fixed;-webkit-filter:brightness(90%);filter:brightness(90%);left:0;top:0px}.detail-page__top-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(50px);filter:blur(50px)}.detail-page__wrap{width:788px;margin:100px auto 0;border-radius:6px 6px 0 0;overflow:hidden;position:relative;background-color:#fff;padding:30px 108px 80px}@media screen and (min-width:0\0) and (min-resolution:+72dpi){.detail-page__wrap{-webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.16);box-shadow:0 0 10px 2px rgba(0,0,0,.16)}}.mb24{margin-bottom:24px}.operation-icons{width:56px;position:fixed;bottom:40px;z-index:50}.operation-icons .icons-wrap{position:relative}.operation-icons .icons-wrap .icon-return-top{position:absolute;top:0;left:0;opacity:0}.operation-icons .icons-wrap .icon-return-top.returnTop{top:-80px;opacity:1}@media (max-width:1330px){.operation-icons{right:2%;margin-left:0}}@media (min-width:1331px){.operation-icons{left:50%;margin-left:600px}}.collection-detail .btn-load-more{width:117px;height:38px;border:1px solid #efefef;border-radius:19px;background-color:#fff;color:#999;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.collection-detail .btn-load-more:hover{border:1px solid #27282d;background-color:#27282d;color:#fff}.collection-detail .collection__status{display:inline-block;font-size:16px;line-height:30px;text-align:left;color:#d1d1d1}.collection-detail .collection__status .collection__update-time{margin-right:24px}.collection-detail .collection__title{font-size:32px;line-height:46px;text-align:left;color:#000;margin-bottom:16px}.collection-detail .collection__intro{font-size:16px;line-height:28px;color:#27282d;margin-bottom:60px}.collection-detail .collection__article-list{position:relative}.collection-detail .collection__article-list__item{margin-bottom:16px}.collection-detail .collection__article-list__btn{margin:30px 0;text-align:center}.collection-detail .collection__author-list{margin-top:46px}.collection-detail .collection__author-list__title{font-size:18px;line-height:36px;color:#27282d;margin-bottom:24px}.collection-detail .collection__author-list__item{margin-bottom:20px}.collection-detail .collection__author-list__btn{margin:30px 0;text-align:center}.collection-detail .collection__reader-talk{margin-top:46px}.collection-detail .collection__reader-talk__title{font-size:18px;line-height:36px;color:#27282d;margin-bottom:24px}.collection-detail .collection__reader-talk__none{color:#d1d1d1;font-size:18px;letter-spacing:2px;margin-bottom:16px}.collection-detail .collection__reader-talk__item{margin-bottom:16px}
.article-item-wrap .userInfo-wrap .username , .article-item-wrap .userInfo-wrap .user_icons{position: relative;left: -35px;}