.main{max-width:1365px;margin:0 auto;padding:20px 0 50px 320px;min-height:500px;position:relative;box-sizing: border-box;}
.main .left{width:280px;position:absolute;left:0;top:20px;}

.main .section .item{display:block;position:relative;height:48px;line-height:48px;font-size:16px;font-weight:600;color:#333;padding:0 0 0 55px;margin-bottom:8px;border-radius:50px;}
.main .section .item .iconfont{position:absolute;font-size:23px;left:20px;}
.main .section .item:hover,.main .section .active,.main .section .active:hover{background:#f0f0f0;}
.main .section .btn,.main .section .btn:hover{background:#000;color:#fff;text-align:center;padding:0;margin-top:20px;}

.main .my{height:52px;padding:12px 2% 0;display:none;}
.main .my .item{float:left;height:40px;line-height:40px;padding:0 18px;color:#333;font-weight:300;border-radius:60px;margin:0 5px 0 0;}
.main .my .active{background:#f5f5f5;}
.main .my .right{float:right;padding:0 10px;}
.main .my .right i{font-size:24px;line-height:40px;}

.main .trendNum{padding:0 5px;color:#f00;}

.mid .nav{height:60px;;}
.mid .nav .row{float:left;padding:0 20px;height:40px;line-height:40px;font-size:16px;border-radius:20px;}
.mid .nav .row:hover,.mid .nav .active{background:#f8f8f8;font-weight:600;color:#333;}
.mid .nav .row:hover{font-weight:400;color:#666;}
.mid .nav .active:hover{font-weight:600;color:#333;}

.mid .item{float:left;width:23%;margin:0 2% 4% 0;position:relative;background:#fff;border-radius:15px;}
.mid .item .pic{position:relative;padding-bottom:133%;overflow:hidden;}
.mid .item .pic img{width:100%;border-radius:15px;position:absolute;top:0;left:0;transition:all .5s;}
.mid .item .pic:hover img{-webkit-filter:brightness(80%);}
.mid .item .title{height:42px;line-height:21px;margin:10px;overflow:hidden;display:flex;align-items: center;justify-content:left;}
.mid .item .title p{overflow:hidden;max-height:42px;max-width:100%;}
.mid .item .icon-shenhezhong,.mid .item .icon-yijujue{position:absolute;font-size:20px;z-index:5;color:#000;top:5px;left:5px;}
.mid .item .icon-yijujue{color:#f00;font-size:50px;}

.mid .item .user{height:20px;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;}
.mid .item .user p{font-size:12px;line-height:16px;height:20px;}
.mid .item .user .nickname{overflow:hidden;}
.mid .item .user .space{flex:1;}
.mid .item .user .avatar{width:38px;}
.mid .item .user .avatar>img{width:18px;height:18px;border-radius:50px;}
.mid .item .user .icon{font-size:16px;width:18px;}
.mid .item .user .num{font-size:12px;}

/*发布*/
.send{padding:0 12px 12px;}
.send-main{border:1px #eee solid;min-height:400px;border-radius:10px;padding:30px;;}
.send-main .common-input{margin:0;border-color:#dedede;}
.send-main .send-name{padding:20px 0 8px;font-weight:900;font-size:15px;}
.send-main .upload-img{border:1px #eee solid;border-radius:5px;width:100px;text-align:center;height:100px;line-height:100px;cursor:pointer;position:relative;transition:all .3s;}
.send-main .upload-img{display:block;}
.send-main .upload-img:hover{background:#f5f5f5;opacity:.8;}
.send-main .upload-img .iconfont{font-size:30px;position:absolute;top:50%;left:50%;margin:-15px 0 0 -15px;line-height:30px;}
.send-main .upload-img .file{width:100px;height:100px;opacity:0;top:0;left:0;}

.send-main .upload-item{padding:15px 0 0;}
.send-main .upload-item li{position:relative;float:left;width:100px;height:100px;border:1px #eee solid;border-radius:5px;box-sizing: border-box;margin:0 10px 10px 0;}
.send-main .upload-item li img{position:absolute;width:100%;height:100%;border-radius:5px;}
.send-main .upload-item li .iconfont{position:absolute;width:33%;height:30px;line-height:30px;font-size:18px;text-align:center;cursor:pointer;bottom:0;color:#ddd;transition:all .4s;}
.send-main .upload-item li .iconfont:hover{color:#f24;}
.send-main .upload-item li .icon-left2{left:0;}
.send-main .upload-item li .icon-x{left:33%;}
.send-main .upload-item li .icon-i-right{left:66%;}
.send-main .send-textarea{border:1px #dedede solid;font-size:14px;line-height:21px;padding:10px;width:100%;box-sizing: border-box;border-radius:5px;min-height:150px;outline:none;}
.send-main .submit{padding:20px 0 0;}
.send-main .submit .zh-button{padding:5px 50px;font-size:18px;font-weight:bold;border-radius:100px;letter-spacing:5px;}

.send-mark-componse-bg,.send-mark-componse{position:fixed;width:100%;height:100%;z-index:99;display:none;}
.send-mark-componse-bg{background:#000;opacity:.5;top:0;left:0;}
.send-mark-componse{z-index:100;background:#fff;width:800px;height:80%;top:10%;left:50%;margin-left:-400px;box-sizing: border-box;padding:20px;border-radius:10px;}
.send-mark-componse{overflow-y:scroll;}
.send-mark-componse::-moz-placeholder{widows:0;}
.send-mark-componse .title{font-size:18px;font-weight:900;}
.send-mark-componse .items{padding:10px 0;}
.send-mark-componse .items a{float:left;padding:0 15px;height:35px;line-height:35px;border-radius:5px;margin:0 10px 10px 0; }
.send-mark-componse .items a:hover{background:#f0f0f0;}
.send-mark-componse .items .active,.send-mark-componse .items .active:hover{background:#f24;color:#fff;}


/*详情*/
.detail{width:1000px;margin:0 auto;border:1px #eee solid;border-radius:20px;border-radius:20px;}
.detail .album{float:left;width:540px;height:710px;box-sizing: border-box;}
.detail .album .swiper{height:710px;}
.detail .album .swiper .swiper-lazy-loaded{border-radius:20px 0 0 20px;}
.detail .comment{float:left;width:460px;border-left:1px #eee solid;box-sizing: border-box;}
.swiper{
    --swiper-theme-color:#eee;/* 设置Swiper风格 */
    --swiper-navigation-color: #eee;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 20px;/* 设置按钮大小 */
}
.detail .user{height:75px;position:relative;border-bottom:1px #f5f5f5 solid;}
.detail .user .avatar{width:35px;height:35px;border-radius:999px;position:absolute;top:20px;left:20px;}
.detail .user .share{position:absolute;background:#f24;color:#fff;padding:0 20px;border-radius:100px;right:20px;top:20px;line-height:35px;cursor:pointer;}
.detail .user .nickname{position:absolute;line-height:35px;top:20px;left:70px;font-size:16px;font-weight:300;}
.detail .comment{position:relative;height:710px;}
.detail .comment .fix{position:absolute;height:140px;width:460px;bottom:0;left:0;border-top:1px #eee solid;box-sizing: border-box;padding:20px 30px;}
.detail .comment .fix .buttons{display:flex;justify-content:space-between;align-items:center;height:30px;line-height:30px;margin-bottom:20px;}
.detail .comment .fix .buttons .iconfont{font-size:22px;cursor:pointer;transition:all .3s;padding:0 5px;}
.detail .comment .fix .buttons .iconfont:hover{opacity:.5;}
.detail .comment .fix .buttons .num{padding:0 15px 0 4px;font-size:12px;}
.detail .comment .fix .buttons .space{flex:1;}
.detail .comment .fix .input{border:0;background:#f5f5f5;width:100%;box-sizing: border-box;padding:10px 15px;border-radius:8px;font-size:14px;line-height:21px;}
.detail .comment .fix .input{outline:none;height:44px;overflow:hidden;}
.detail .comment .fix .input::placeholder{color:#ccc;}
.detail .comment .fix .zh-button{position:absolute;width:60px;height:44px;padding:0;top:70px;right:30px;border-radius:0 8px 8px 0;}

.detail .comment .section{height:492px;box-sizing: border-box;padding:20px 30px;overflow-y:scroll;}
.detail .comment .section::-webkit-scrollbar{width:0;}
.detail .comment .section .title{font-size:18px;font-weight:600;}
.detail .comment .section .content{font-size:16px;padding:20px 0 0;line-height:28px;font-weight:300;}
.detail .comment .section .date{font-size:12px;color:#999;padding:20px 0;border-bottom:1px #eee solid;}

.detail .comment .total{font-size:12px;padding:15px 0 0 10px;}
.detail .common-list{padding-left:50px;}
.detail .common-list li{position:relative;padding:20px 0 15px 0;border-bottom:1px #f5f5f5 solid;}
.detail .common-list .avatar{position:absolute;width:30px;height:30px;border-radius:999px;top:20px;left:-40px;}
.detail .common-list .p0{position:absolute;right:0;font-size:12px;line-height:30px;}
.detail .common-list .p0 .iconfont{position:absolute;font-size:16px;left:-30px;padding:0 10px;cursor:pointer;}
.detail .common-list .p1{color:#999;}
.detail .common-list .p2{font-weight:300;padding:5px 0 0;}
.detail .common-list .p3{color:#999;font-size:12px;padding:5px 0 0;}
.detail .common-list .p4{padding:5px 0 0;font-size:12px;color:#9b8b8b;}


/*手机端兼容样式*/
@media screen and (max-width:1024px){
	.main{padding:0;}
	.main .left{display:none;}
	.main .my{display:block;}
	.mid .item{width:47%;margin:0 0 4% 2%;}
	.mid .nav{display:none;}
}

@media screen and (max-width:1000px){
	.detail{width:100%;border:0;;}
	.detail .album{float:inherit;height:0;width:100%;position:relative;padding-bottom:133.33%;}
	.detail .album .swiper{position:absolute;width:100%;height:100%;}
	.detail .album .swiper .swiper-lazy-loaded{border-radius:0;width:100%;}
	
	.detail .comment{float:inherit;width:100%;height:inherit;}
	.detail .comment .section{padding:20px;}
	.detail .comment .fix{width:100%;position:relative;}
	.send-main{padding:0 10px 10px;}
	.send-mark-componse{width:92%;margin:0;left:4%;}
}