body { background: #fff; }

.detail-group-top { font-size: .3rem; transform: translate3d(0, 0, 0); color: #000; height: .88rem; width: 7.5rem; box-sizing: border-box; margin: 0 auto 0; text-align: center; line-height: .88rem; position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 10; }

.detail-group-top .btn-left-icon { background: url(../image/btn-left-icon.png) no-repeat center top; background-size: 100%; width: .48rem; height: .48rem; position: absolute; top: .2rem; left: .32rem; }

.detail-group-top .top-right { position: absolute; top: .2rem; right: .32rem; }

.detail-group-top .btn-edit-icon { background: url(../image/btn-edit-icon.png) no-repeat center top; background-size: 100%; width: .48rem; height: .48rem; display: inline-block; vertical-align: top; margin-right: .32rem; }

.detail-group-top .btn-transpond-icon { background: url(../image/btn-transpond-icon.png) no-repeat center top; background-size: 100%; width: .48rem; height: .48rem; display: inline-block; vertical-align: top; }

.detail-group-top span { font-size: .32rem; color: #242526; font-weight: 500; text-align: center; }

.container-box { margin-top: 1.04rem; }

.detail-box { width: 6.86rem; margin: 0 auto 0; }

.bottom-input-box { border-top: .01rem solid #F0F2F5; position: fixed; bottom: 0; right: 0; left: 0; margin: 0 auto 0; height: 1.75rem; background: #fff; display: flex; justify-content: space-between; padding: .16rem .32rem; box-sizing: border-box; }

.bottom-input-box input { border: none; outline: none; border-radius: 2rem; width: 5.92rem; background-color: #f6f8fa; font-size: .28rem; color: #8D98B2; padding: 0 .32rem; height: .74rem; line-height: .74rem; box-sizing: border-box; }

.bottom-input-box input::placeholder { color: #8D98B2; }

.bottom-input-box .right { width: .62rem; text-align: center; }

.bottom-input-box .right a { display: inline-block; text-align: center; }

.bottom-input-box .right a i { background: url(../image/icon-msg.png) no-repeat center top; background-size: 100%; width: .4rem; height: .4rem; display: block; }

.bottom-input-box .right a .num { display: block; color: #8D98B2; font-size: .2rem; }

.user-box { display: flex; justify-content: space-between; margin: .16rem auto 0; }

.user-box .btn-box { display: flex; }

.user-box .btn-box .icon-more { background: url(../image/icon-more.png) no-repeat center top; background-size: 100%; font-size: 0; width: .32rem; height: .32rem; }

.avatar-box { display: flex; align-items: center; }

.avatar-box .avatar-left { overflow: visible; width: .8rem; height: .8rem; flex-shrink: 0; position: relative; }

.avatar-box .avatar-left img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

.avatar-box .avatar-left .sex-box { position: absolute; top: .48rem; right: 0; }

.avatar-box .avatar-left .sex-box img { width: .32rem; height: .32rem; border-radius: 50%; }

.avatar-box .avatar-right { margin-left: .16rem; }

.avatar-box .avatar-right p { font-size: .24rem; color: #8D98B2; line-height: .36rem; }

.avatar-box .user-right-top { display: flex; align-items: center; }

.avatar-box .user-right-top span { font-size: .28rem; color: #242526; line-height: .42rem; }

.avatar-box .user-right-top .img-userLevel { margin-left: .08rem; width: .84rem; height: .35rem; object-fit: contain; display: inline-block; }

.info-box { padding: .24rem; margin: .32rem auto 0; background: #F6F8FA; border-radius: .16rem; width: 6.86rem; box-sizing: border-box; position: relative; }

.info-box::after { content: ''; position: absolute; top: 0; right: 0; background: url(../image/label-bg.png) no-repeat center top; background-size: 100%; width: 6.86rem; height: .96rem; }

.info-box ul { font-size: 0; position: relative; z-index: 2; display: flex; align-items: center; }

.info-box ul li { display: flex; justify-content: center; align-items: center; background-color: #fff; color: #8D98B2; border-radius: .08rem; margin-right: .16rem; font-size: .24rem; padding: 0 .08rem; height: .36rem; }

.info-box .group-text { margin-top: .1rem; font-size: .28rem; color: #242526; line-height: .42rem; position: relative; z-index: 2; }

.join-btn-box { margin-top: .16rem; }

.join-btn-box a { display: flex; justify-content: center; align-items: center; width: 6.86rem; height: .8rem; color: #C4943D; text-align: center; font-size: .32rem; border-radius: .16rem; margin: 0 auto; background-color: #FBF7F0; font-weight: 500; }

.join-btn-box a .btn-join-icon { background: url(../image/btn-join-icon.png) no-repeat center top; background-size: 100%; width: .14rem; height: .24rem; display: inline-block; vertical-align: middle; margin-left: .08rem; margin-top: 0.04rem; }

.time-box { font-size: .22rem; color: #8D98B2; margin-top: .32rem; }

.time-box .icon-dot { width: .02rem; height: .02rem; border-radius: 100%; background: #8D98B2; display: inline-block; vertical-align: middle; margin: 0 .04rem; }

.gap-box { width: 7.5rem; height: .16rem; background-color: #F2F4F7; margin: .16rem auto 0; }

.commtent-box { margin: 0 auto 2.24rem; box-sizing: border-box; padding-top: .16rem; }

.commtent-box .comment-header { display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 .32rem; }

.commtent-box .comment-header p span { font-size: .32rem; line-height: .48rem; color: #C4943D; position: relative; }

.commtent-box .comment-header p span::after { content: ''; position: absolute; bottom: -.2rem; left: 0; background: url(../image/icon-comment.png) no-repeat center top; background-size: 100%; width: .64rem; height: .16rem; }

.commtent-box .comment-header p em { font-size: .24rem; color: #C4943D; line-height: .36rem; }

.commtent-box .comment-header .sort-text { font-size: .24rem; color: #8D98B2; line-height: .36rem; font-weight: 500; }

.commtent-box .comment-header .sort-text .icon-sort { background: url(../image/icon-sort.png) no-repeat center top; background-size: 100%; width: .32rem; height: .32rem; display: inline-block; vertical-align: text-top; margin-top: .02rem; margin-left: -.08rem; }

.commtent-box .comment-container { margin-top: .2rem; }

.commtent-box .comment-item { display: flex; justify-content: space-between; box-sizing: border-box; padding-top: .32rem; padding-left: .32rem; }

.commtent-box .item-left { overflow: visible; width: .64rem; height: .64rem; flex-shrink: 0; position: relative; }

.commtent-box .item-left img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

.commtent-box .item-left .sex-box { position: absolute; top: .4rem; right: 0; border-radius: 50%; }

.commtent-box .item-left .sex-box img { width: .24rem; height: .24rem; }

.commtent-box .item-right { flex: 1; box-sizing: border-box; margin-left: .16rem; border-bottom: .01rem solid #F0F2F5; padding-right: .32rem; padding-bottom: .24rem; }

.commtent-box .item-right .comment-more { display: block; font-size: .24rem; color: #c4943d; margin-top: .16rem; margin-left: .5rem; }

.commtent-box .comment-first .user-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: .8rem; margin-top: -0.06rem; }

.commtent-box .comment-top { display: flex; justify-content: space-between; }

.commtent-box .comment-top .name { font-size: 0; display: flex; align-items: center; }

.commtent-box .comment-top .name span { font-size: .28rem; color: #242526; font-weight: 400; line-height: .42rem; }

.commtent-box .comment-top .name .img-level { width: .84rem; height: .35rem; object-fit: contain; margin-left: 0.08rem; margin-right: .20rem; }

.commtent-box .comment-top .name em { font-size: .2rem; color: #8D98B2; text-align: center; font-weight: 400; line-height: .3rem; background-color: #F0F2F5; padding: 0 .08rem; font-weight: normal; border-radius: .08rem; flex-shrink: 0; }

.commtent-box .comment-top .info { font-size: .24rem; color: #8D98B2; line-height: .36rem; }

.commtent-box .comment-top .icon-more { background: url(../image/icon-more.png) no-repeat center top; background-size: 100%; font-size: 0; width: .32rem; height: .32rem; }

.commtent-box .comment-text { font-size: .28rem; color: #242526; margin-top: .08rem; line-height: .42rem; }

.commtent-box .comment-text .recover-box { font-size: .28rem; color: #242526; }

.commtent-box .comment-text .recover-box .img-level { display: inline-block; vertical-align: middle; width: .84rem; height: .35rem; object-fit: contain; margin: 0.02rem 0 0; }

.commtent-box .comment-text .recover-box span { color: #1F74E0; }

.commtent-box .comment-text .recover-box i { font-style: normal; }

.commtent-box .comment-time { display: flex; justify-content: space-between; font-size: .22rem; color: #8D98B2; margin-top: .08rem; line-height: .33rem; }

.commtent-box .comment-time .right { display: flex; align-items: center; }

.commtent-box .comment-time .right a { margin-right: .08rem; }

.commtent-box .comment-time .right .icon-like { background: url(../image/icon-like.png) no-repeat center top; background-size: 100%; width: .24rem; height: .24rem; display: block; }

.commtent-box .comment-time .right .icon-like.on { background: url(../image/icon-like-on.png) no-repeat center top; background-size: 100%; width: .24rem; height: .24rem; }

.commtent-box .comment-second { display: flex; justify-content: space-between; margin-top: .3rem; }

.commtent-box .comment-second .comment-top .name span { color: #8D98B2; }

.commtent-box .comment-second .avatar-box { overflow: visible; width: .4rem; height: .4rem; flex-shrink: 0; }

.commtent-box .comment-second .avatar-box img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

.commtent-box .second-right { flex: 1; margin-left: .16rem; }

.commtent-box .end-tips { margin: .56rem auto; font-size: .24rem; color: #8D98B2; text-align: center; }

.pop-wx .dia-con { padding-bottom: .04rem; }

.pop-wx .dia-title { font-size: .32rem; line-height: .48rem; font-weight: 500; text-align: center; }

.pop-wx .img-box { margin: .24rem auto 0; }

.pop-wx .img-box img { display: block; margin: 0 auto 0; width: 2.4rem; height: 2.4rem; object-fit: contain; }

.pop-wx .btn-box { display: block; margin: .4rem auto 0; width: 6.86rem; height: .96rem; text-align: center; border-radius: .16rem; line-height: .96rem; background-color: #FCD78D; }

.pop-wx .btn-box a { font-size: .32rem; color: #242526; }

.pop-controls .dia-con { padding-top: 0; }

.pop-controls .controls-list a { display: flex; justify-content: center; align-items: center; width: 7.5rem; height: 1.04rem; font-size: .32rem; font-weight: 500; color: #242526; text-align: center; }

.pop-controls .controls-list a.btn-report { color: #F44E4E; }

.pop-controls .btn-canle { display: flex; justify-content: center; align-items: center; font-size: .32rem; height: 1rem; color: #8D98B2; text-align: center; font-weight: 500; }

.pop-comment .dia-con { padding-top: .16rem; }

.pop-comment .dia-con .gap-box { margin-top: 0; }

.pop-comment .dia-con .all-text { font-size: .28rem; color: #242526; height: .8rem; line-height: .8rem; box-sizing: border-box; padding: 0 .32rem; }

.pop-comment .dia-con .comment-container { height: 11.2rem; overflow-y: scroll; box-sizing: border-box; padding-bottom: 1.75rem; }

.pop-comment .dia-con .input-box { width: 7.5rem; height: 1.75rem; background: #FFFFFF; position: fixed; bottom: 0; left: 0; }

.pop-comment .dia-con .input-box input { border: none; outline: none; border-radius: 2rem; width: 6.86rem; background-color: #f6f8fa; font-size: .28rem; color: #8D98B2; padding: 0 .32rem; height: .74rem; line-height: .74rem; box-sizing: border-box; display: block; margin: .16rem auto 0; }

.pop-comment .dia-con .input-box input::placeholder { color: #8D98B2; }

.pop-comment .comment-item, .pop-comment .second-comment-item { display: flex; justify-content: space-between; box-sizing: border-box; padding-top: .32rem; padding-left: .32rem; }

.pop-comment .second-comment-item .item-right { border-bottom: 0.01rem solid #F0F2F5; }

.pop-comment .item-left { overflow: visible; width: .64rem; height: .64rem; flex-shrink: 0; position: relative; }

.pop-comment .item-left img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

.pop-comment .item-left .sex-box { position: absolute; top: .4rem; right: 0; border-radius: 50%; }

.pop-comment .item-left .sex-box img { width: .24rem; height: .24rem; }

.pop-comment .item-right { flex: 1; box-sizing: border-box; margin-left: .16rem; padding-right: .32rem; padding-bottom: .24rem; }

.pop-comment .comment-top { display: flex; justify-content: space-between; }

.pop-comment .comment-top .user-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: .8rem; margin-top: -0.06rem; }

.pop-comment .comment-top .name { font-size: 0; display: flex; align-items: center; }

.pop-comment .comment-top .name span { font-size: .28rem; color: #242526; font-weight: 400; line-height: .42rem; }

.pop-comment .comment-top .name .img-level { width: .84rem; height: .35rem; object-fit: contain; margin-left: 0.08rem; margin-right: .20rem; }

.pop-comment .comment-top .name em { font-size: .2rem; color: #8D98B2; text-align: center; font-weight: 400; line-height: .3rem; background-color: #F0F2F5; padding: 0 .08rem; font-weight: normal; border-radius: .08rem; flex-shrink: 0; }

.pop-comment .comment-top .info { font-size: .24rem; color: #8D98B2; line-height: .36rem; }

.pop-comment .comment-top .icon-more { background: url(../image/icon-more.png) no-repeat center top; background-size: 100%; font-size: 0; width: .32rem; height: .32rem; }

.pop-comment .comment-text { font-size: .28rem; color: #242526; margin-top: .08rem; line-height: .42rem; }

.pop-comment .comment-text .recover-box { font-size: .28rem; color: #242526; }

.pop-comment .comment-text .recover-box .img-level { display: inline-block; vertical-align: middle; width: .84rem; height: .35rem; object-fit: contain; margin: 0.02rem 0 0; }

.pop-comment .comment-text .recover-box span { color: #1F74E0; }

.pop-comment .comment-text .recover-box i { font-style: normal; }

.pop-comment .comment-time { display: flex; justify-content: space-between; font-size: .22rem; color: #8D98B2; margin-top: .08rem; line-height: .33rem; }

.pop-comment .comment-time .right { display: flex; align-items: center; }

.pop-comment .comment-time .right a { margin-right: .08rem; }

.pop-comment .comment-time .right .icon-like { background: url(../image/icon-like.png) no-repeat center top; background-size: 100%; width: .24rem; height: .24rem; display: block; }

.pop-comment .comment-time .right .icon-like.on { background: url(../image/icon-like-on.png) no-repeat center top; background-size: 100%; width: .24rem; height: .24rem; }

.input-pop { outline: none; border: none; display: none; top: auto !important; margin-top: 0 !important; bottom: 0 !important; position: fixed !important; z-index: 9999; }

.input-pop.on { display: block; animation: fadeIn 0.2s ease both; -webkit-animation: fadeIn 0.2s ease both; }

.input-pop .dia-con { width: 7.5rem; border-top-left-radius: .24rem; border-top-right-radius: .24rem; box-sizing: border-box; position: relative; }

.input-pop .input-box { width: 7.5rem; padding: .28rem 0; background: #FFFFFF; }

.input-pop .input-box input { border: none; outline: none; border-radius: 2rem; width: 6.86rem; background-color: #f6f8fa; font-size: .28rem; color: #8D98B2; padding: 0 .32rem; height: .74rem; line-height: .74rem; box-sizing: border-box; display: block; margin: 0 auto 0; }

.input-pop .input-box input::placeholder { color: #8D98B2; }

.input-mask, .input-mask2 { background-color: black; border-top: 1px solid transparent; position: fixed; height: 100%; z-index: 555; width: 100%; left: 0px; top: 0px; opacity: 0.2; display: none; }

.input-mask.on, .input-mask2.on { display: block; }

.input-mask2 { z-index: 666; }