@font-face {
  font-family: 'Niconne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/niconne/v15/w8gaH2QvRug1_rTfnQyn2Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    background-color:#fff;
    margin:0px;
    
}
/*#f4f5f5;*/
p, li{
    color:#3b454e;
    font-weight: 400;
    line-height: 30px;
}
/* #121211 */
.blogpost-body blockquote{
    background: #f6f8fa;
    border-left: 5px solid #C9D6FF;
    
}
/* #e2dfdf */
.blogpost-body blockquote p, .blogpost-body blockquote li{
    color: #6e6e6e;
}
.display{
     
    border-radius: 4px;
}
/*#f6f8fa*/
/* rgba(80,80,80,.04); */
#cnblogs_post_body p{
    line-height: 30px;
    margin: 0 0 20px;
}
#cnblogs_post_body li, #cnblogs_post_body li p{
    line-height: 30px;
    margin: 0 0 10px;
}
#cnblogs_post_body h1,#cnblogs_post_body h2,#cnblogs_post_body h3{
    margin: 20px 0px;
}
a{
    color: #2c2c2c;
    text-decoration:none;
}
/* #15231b */
a:hover{
    color: #a31f34;
}
/* #b78d12; */
.dayTitle a{
    color: #a31f34;
    padding: 5px;
    background-color: #fff;
    border:0px solid ; 
    border-left-width: 5px;
    border-left-color: #a31f34;
}
/*公告*/


/*随笔分类*/
.entrylistDescription{
    border:0px solid ; 
    border-left-width: 5px;
    border-left-color: #a31f34;
    padding: 5px;
}
.entrylistItem{
    background-color: #fff;
    border-radius: 5px;
    margin: 10px 0px;
}
.entrylistPosttitle{
border-bottom: 1px solid #a31f34;
font-size: 20px;
border-radius: 5px 5px 0px 0px;
padding: 10px;
}
.entrylistPostSummary{
    padding: 10px;
}
.entrylistItemPostDesc{
    padding: 10px;
}
/* 用户信息 */
#header{
    position: fixed;
    background-color: #fff;
    width:100%;
    height: 50px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    box-shadow: 0 0 20px 10px rgb(220 220 220 / 50%);
}
#blogTitle{
    float: left;
    top: 0px;
    height: 100%;
}
#blogTitle h1{
    float: left;
    margin: 10px;
    font-size: 25px;
}
#blogTitle h1 a{
    /* text-shadow: 0 0 2px #ffa500, 0 0 4px #ffa500, 0 0 6px #ffa500, 0 0 8px #ffa500, 0 0 10px #ff0000, 0 0 12px #ff8d00, 0 0 14px #ff0000; */

    color: #ffa60f;
    font-family: "Niconne", cursive;
    -webkit-animation: blink 12s infinite;
    animation: blink 12s infinite; 
}
#blogTitle h2{
    display: none;
    text-align:center;
    margin-bottom: 30px;
    color:#fffefa;
    font-size: 14px;
    padding-bottom: 30px;
}

/* 导航栏 */
#navList{
    padding: 0px;
    margin: 0px;
}
#navList li{
    float: left;
    list-style: none;
    padding: 10px;
    margin: 0px;
}
#navList li:hover{
    border-bottom: 2px solid #a31f34;
}

.blogStats{
    display: none;
    float: left;
}
.blogStats span{
    float: left;
}
/*主体内容*/
#mainContent{
    position: relative;
    float: left;
    border-radius: 5px;
    top: 150px;
    width: 60%; 
    left: 20%;
    padding-bottom: 20px;
    margin-bottom: 100px;
}
.post{
    
    border-radius: 5px;
}
.postTitle{
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #a31f34;
    z-index: 10;
    padding: 10px;
    margin:0px;
    font-size: 26px;
}

.postCon{
    
    padding: 20px 20px 0px 20px;
    color: #aaaaaa;
}
#cnblogs_post_body{
    padding: 30px;
    margin: 0px;
}
#blog_post_info_block{
    padding: 20px;
    background-color: #edd4d4;
}
/*#C9D6FF*/
.postDesc{
    
    padding: 20px;
    border-radius: 0px 0px 5px 5px;
    color: #aaaaaa;
}
/* 侧边公告栏 */
#sideBar{
    position: fixed;
    right: 0px;
    display: none;
    width: 16%;
    margin-left: 2%;
    border-left: 2px solid #ececec;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
#sideBar::-webkit-scrollbar{
    width: 0px;
}
#sideBar h3{
    
    border-bottom: 1px solid #ececec;
    margin: 0px;
    padding: 5px 10px;
    border-radius: 5px 5px 0px 0px;
    color: #2c2c2c;
}

#sidebar_news{
    
    border-radius: 5px;
    /* box-shadow: 0 0 20px 10px rgb(220 220 220 / 30%); */
}
.catListLink ul, .catListPostCategory ul, #TopViewPostsBlock ul{
    list-style: none;
    margin: 0;
    padding: 0px 10px 0px 10px;
}
.catListLink li, .catListPostCategory li, #TopViewPostsBlock li{
    padding: 5px 10px;
    margin: 5px 0px;
    border-radius: 5px;
    background-color: #f6f6f6;
}
.catListLink li:hover, .catListPostCategory li:hover, #TopViewPostsBlock li:hover{
    background-color: rgba(80,80,80,.04);
    box-shadow: 0 0 20px 10px rgb(220 220 220 / 50%);
}

#blog-news{
    padding: 10px;
    
}
#leftcontentcontainer{
    
    /* box-shadow: 0 0 20px 10px rgb(220 220 220 / 30%); */
    border-radius: 5px;
    margin-top: 20px;
}
#TopViewPostsBlock{
    padding-bottom: 5px;
}
/*footer*/
.clear{
    clear: both;
}
#footer{
    text-align: center;
    font-family: 'Niconne', cursive;
    color: #aaaaaa;
    height: 50px;
    padding: 50px;
    margin-top: 100px;
    background: #fff;  /* fallback for old browsers */
    z-index: 90;
}
/*评论*/
#comment_form{
    margin-top: 20px;
    border:solid 2px #ececec;
}
#comment_nav{
    
    border-radius: 5px 5px 0px 0px;
    padding: 10px;
}
#comment_form_container{
    background:#fff;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}
#cnblogs_ch, #cnblogs_c1, #cnblogs_c2, #under_post_card1, #under_post_card2{
    display:none;
}
.under-post-card{
    padding: 10px;
}

/* 背景 */
#content_canvas {
  position: fixed;
  top:0px;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -1;
  opacity: 0.5;
}


/* 轮播 */
#frame {/*----------图片轮播相框容器----------*/
    position: absolute; /*--绝对定位，方便子元素的定位*/
    width: 100%;
    height: 450px;
    overflow: hidden;/*--相框作用，只显示一个图片---*/
    z-index:-99;
    
}
#photos img {
    float: left;
    width:20%;
    height:auto;
}
#photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
    position: absolute;
    width: calc(5 * 100%);/*---修改图片数量的话需要修改下面的动画参数*/
    top: -150px;
}
.play{
    animation: ma 100s ease-out infinite alternate;/**/
}
@keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
    0%,20% {    margin-left: 0px;    }
    25%,40% {    margin-left: -100%;    }
    45%,60% {    margin-left: -200%;    }
    65%,80% {    margin-left: -300%;    }
    85%,100% {    margin-left: -400%;    }
}
#photos:hover{animation-play-state:paused;}
@keyframes ma1 {100%{margin-left:-0px;}    }
@keyframes ma2 {100%{margin-left:-100%;}    }
@keyframes ma3 {100%{margin-left:-200%;}    }
@keyframes ma4 {100%{margin-left:-300%;}    }
@keyframes ma5 {100%{margin-left:-400%;}    }

/*目录*/
/*rgb(133, 144, 166)*/
#catalog{
    position:absolute;
    top: 200px;
    width: 15%;
    height: 100%;
    left: 3%;
    color: #aaaaaa;
}
#catalog h3{
    border-bottom: 1px solid #cccccc;
}
.nav a{
    color: #aaaaaa;
}
#catalog li{
    list-style-type:none;
    font-size: 8px;
}
#sidebar_scroller{
    height: 60%;
    margin-top: 50px;
    
}
#sidebar_scroller ul{
    padding: 0;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    
}
#sidebar_scroller ul::-webkit-scrollbar{
    width: 0px;
}
.scroller-offset1 {text-indent: 0 /* !important */;}
.scroller-offset2 {text-indent: 1em;}
.scroller-offset3 {text-indent: 2em;}
.scroller-offset4 {text-indent: 3em;}
.scroller-offset5 {text-indent: 4em;}
.scroller-offset6 {text-indent: 6em;}
.nav .active {
    background-color:#f5f5f5;
}
.nav .active a {
    color: #a31f34;
}
/*音乐*/
.aplayer-body{
    box-shadow: 0 0 20px 10px rgb(220 220 220 / 30%);
    width: 350px;
}