body:before{content: '';position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: -520;pointer-events: none;
    background-image: linear-gradient(25deg, rgba(30,30,30,.06) 50%, transparent 20%), linear-gradient(-25deg, rgba(30,30,30,.08) 50%, transparent 20%);background-size: 39px 39px;background-position: 50%;background-repeat: space;
}

/* 头部小言 */
.left_word{display: inline-block;width:300px;vertical-align: top;}
.blog_news_item{background:cadetblue;}
.blog_news_item:first-child{margin-top:20px;padding-top:30px;border-top-left-radius:8px;border-top-right-radius:8px;position:relative;}
.blog_news_item:last-child{margin-bottom:20px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.blog_news_personal{position: relative;text-align: center;}
.blog_news_personal .blog_news_avaimg{width:200px;border-radius: 50%;}
.blog_news_personal .blog_news_ring{display:inline-block;width:220px;height:220px;border-radius:50%;position:absolute;left: 50%;top:-10px;transform: translateX(-50%);}
.blog_news_personal .blog_news_ring:before{content: "";display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 10px solid rgba(0,0,0,.3);}
.blog_news_personal .blog_news_fan:before{content: "";display: block;width: 100%;height: 50%;background: none;border: 10px solid rgba(255,255,0,.8);box-sizing: border-box;border-top-left-radius: 110px;border-top-right-radius: 110px;border-bottom: 0;-webkit-transform-origin: center bottom;transform-origin: center bottom;animation:loop 3s forwards infinite;}
@keyframes loop{ 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
.blog_news_personal .blog_news_name{display:inline-block;margin-top: 50px;font-weight: bold;}
.blog_news_text{margin: 30px 20px 0;font-weight: bold;}
.blog_news_text .blog_news_describe{font-size:16px;margin-top:20px;}
#hitokoto{color:bisque;}
.blog_news_gossip{height:320px;text-align: center;padding:30px 15px;}
.blog_news_gossip .blog_news_tle{font-size: 20px;font-weight: bold;margin:0 20px 10px;}
.blog_news_gossip .blog_news_icon{width:20px;margin-right: 3px;}
.blog_news_gossip .blog_news_scroll{height:225px;margin:auto;overflow:hidden;}
.blog_news_gossip .blog_news_scroll .blog_news_box{padding:0 10px;margin: 0;}
.blog_news_gossip .blog_news_scroll .blog_news_box p{margin:3px auto;color:#ffcc66;}
/* 列表群组 */
.right_groups{display: inline-block;width:calc(100% - 310px);margin-top:20px;}
.blog_group{display:flex;margin-left:15px;margin-bottom:20px;box-shadow: 0 2px 2px rgba(200,200,200,.5);background:#fff;border-radius:8px;cursor:pointer;}
.blog_group:hover{box-shadow:0 3px 10px rgba(200,200,200,.5);}
.blog_group_box{display: inline-block;position: relative;border-top-left-radius: 8px;border-bottom-left-radius: 8px;overflow: hidden;vertical-align: top;}
.blog_group_box:last-child{flex: 1;padding:12px 15px;}
.blog_group_img{width:240px;height:100%;transition: transform .3s ease-in;transform: scale(1);}
.blog_group:hover .blog_group_img{transform: scale(1.15);}
.blog_group_tag{position:absolute;left:0;top:0;z-index:9;transition:transform 0.35s ease-in;transform:translateX(-100%);font-size:15px;padding:3px 9px;color:aqua;background:#0f77ea;border-radius:8px 0 20px;}
.blog_group:hover .blog_group_tag{transform:translateY(0);}
.blog_group_date{position:absolute;left:0;width:100%;z-index:9;transition:transform 0.35s ease-in;transform:translateY(0);font-family: Avenir;padding:3px 12px;color:#FAEBD7;background:rgba(95,158,160,.5)}
.blog_group:hover .blog_group_date{transform:translateY(-100%);}
.blog_group_tle{font-weight: bold;font-size: 22px;padding-bottom:15px;}
.blog_group_flex{position: absolute;bottom: 12px;width: calc(100% - 30px);display: flex;justify-content: space-between;align-items: center;}
.blog_group_text{width: calc(100% - 90px);overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;}
.blog_group_icon{display:inline-block;width:16px;}

/* 博客文章 内容 */
.blog_md_center{text-align: center;}
.blog_md_img{width:60%;min-width: 280px;margin: auto;padding-left: 10px;padding-right: 10px;}
.blog_md_tle{text-align:center;font-size:28px;margin: 10px auto;}
.blog_md_box{padding:0 20px;}
.blog_md_border{border-bottom: 1px solid #ddd;}
.blog_md_dawd{margin: 20px;}
.blog_md_date{font-family: Avenir;}
.blog_md_keyword{overflow-x: hidden;font-size: 13px;padding: 6px 13px;background: rgba(0,132,255,.1);color: #0084ff;border-radius: 20px;cursor: pointer;}
.new_box{width:40px;height:40px;display: inline-block;padding:5px;margin:3px 5px;border-radius:6px;cursor: pointer;transition: all .5s ease-in-out;animation:opac 5s cubic-bezier(0.5,0,0.1,1) infinite;}
.new_box:hover{background:#bbb}
@keyframes opac { 0%, 100% {opacity: 1;} 50% {opacity: .6} }
/* 评论 */
#md_converts_html{background:transparent;line-height: 1.75;font-size: 22px;}
.blog_review{padding-top: 10px;margin: 10px 0;border-top: 1px solid #ccc;}
.blog_review_tle{font-size: 28px;font-weight: bold;}
.blog_review_reply{display: inline-block;color:rgb(15,119,234)}
.blog_review_text{width:100%;padding: 6px 12px;outline: none;border:1px solid #ccc;background: rgba(255,255,255,.6);}
.blog_review_btn{display:inline-block;padding:3px 6px;outline: none;color:#fff;background: linear-gradient(rgba(30,144,255,.8),rgba(0,123,255,.8));border-radius: 3px;cursor:pointer}
.blog_review_btn:hover{background: linear-gradient(rgba(15,119,234,.8),rgba(0,0,255,.8));}
.blog_comment{display:flex;padding: 5px 10px;margin:10px 0;border-bottom: 1px solid #bbb;}
.blog_comment_avatar{width:30px;height:30px;margin-right: 10px;border-radius: 100%;}
.blog_comment_content{flex:1;}
.blog_comment_author{font-size:18px;font-weight: bold;}
.blog_comment_reply_btn{padding: 3px 5px;cursor:pointer;}
.icon_reply{display: inline-block;content: url("/static/image/blog/reply.png");width:16px;height:16px;}

/* 供月势 */
.cube{width:300px;height:300px;position:absolute;top:-20px;z-index:2;display:flex;}
.cube-logo{width:52px;margin:auto;background:#FFF;border-radius:50%;animation: imgBreathe 6s ease-in-out infinite;}
.cube-avatar {width:50px;position:absolute;top:124px;left:124px;animation:circular-smooth-spin 7.5s infinite linear;animation-play-state: running;}
.cube-avatar > span {font-weight:500;color:brown;position: absolute;white-space:nowrap;top: -50%;left:50%;opacity: 0;transform: scale(0);transition:opacity, transform .8s;transform-origin: 0 bottom;}
.cube-avatar > img {width:inherit;border-radius:50%;overflow: hidden;animation: imgBreathe 6s ease-in-out infinite;}
@keyframes imgBreathe {0%{box-shadow: 0 0 4px hsl(0,100%,50%);}25%{box-shadow: 0 0 8px hsl(60,100%,50%);} 50%{box-shadow: 0 0 16px hsl(120,100%,50%);}75%{box-shadow: 0 0 8px hsl(180,100%,50%);} 100%{box-shadow: 0 0 4px hsl(240,100%,50%);}}
.cube:hover .cube-avatar {animation-play-state: paused;}
.cube:hover .cube-avatar > span {opacity: 1;transform: scale(1);transition: opacity, transform .8s;}
.cube-avatar:nth-of-type(2){animation-delay: -1.5s;}
.cube-avatar:nth-of-type(3){animation-delay: -3s;}
.cube-avatar:nth-of-type(4){animation-delay: -4.5s;}
.cube-avatar:nth-of-type(5){animation-delay: -6s;}
@keyframes circular-smooth-spin { from {transform: rotate(0turn) translateY(-124px) rotate(1turn)} to {opacity:1;transform: rotate(1turn) translateY(-124px) rotate(0turn)} }

@media only screen and (max-width:892px){
    .left_word{display:block;width:100%;}
    .cube{left: 50%;transform: translateX(-50%);}
    .right_groups{display: block;width:100%;}
    .blog_group{margin-left:0;}
}
@media only screen and (max-width:680px){
    .blog_md_tle{font-size:24px;}
    .blog_md_box{padding:0 15px;}
}
@media only screen and (max-width:562px){
    .blog_group{display: block;}
    .blog_group_box {border-radius: 8px 8px 0 0;}
    .blog_group_box:last-child {width: 100%;}
    .blog_group_img{width:100%;height:100%;border-radius: 8px 8px 0 0;}
    .blog_group_tle{width: 100%;overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .blog_group_flex{position: relative;width:100%;margin: auto;}

}
@media only screen and (max-width:378px){
    .blog_group_p{font-size: 12px;}
    .blog_group_icon{width:12px;}
    .blog_md_tle{font-size:22px;}
    .blog_md_dawd{margin: 20px 0;}
}