body {

}

.loading-wrap{
  width:100%;
  height:100%;
  position:absolute;
  z-index:99;
  background:#000;
}
.loading{
  width: 100px;
  height: 50px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translateX(-50%) translateY(-50%);
}
.loading .cir {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.loading .cir:nth-child(1){
  left: 10px;
  animation: move1 1s infinite;
  /*animation-direction:alternate;*/
}
@keyframes move1{
  0%{
    top: 0;
  }
  50%{
    top: 40px;
  }
  100%{
    top: 0px;
  }

}
.loading .cir:nth-child(2){
  left: 20px;
  animation: move1 1s infinite .1s;
}
.loading .cir:nth-child(3){
  left: 30px;
  animation: move1 1s infinite .2s;
}
.loading .cir:nth-child(4){
  left: 40px;
  animation: move1 1s infinite .3s;
}
.loading .cir:nth-child(5){
  left: 50px;
  animation: move1 1s infinite .4s;
}
.loading .cir:nth-child(6){
  left: 60px;
  animation: move1 1s infinite .5s;
}
.loading .cir:nth-child(7){
  left: 70px;
  animation: move1 1s infinite .6s;
}
.loading .cir:nth-child(8){
  left: 80px;
  animation: move1 1s infinite .7s;
}
.loading .cir:nth-child(9){
  left: 90px;
  animation: move1 1s infinite .8s;
}
.loading .cir:nth-child(10){
  left: 100px;
  animation: move1 1s infinite .9s;
}


.canvas-box {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}


/*主体*/

html {
  font-size: 62.5%;

}


a {
  color: #fff;
}

body {
  font-family: monaco,"Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
  background-color: #171717;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: scroll;
}
.no-select{
  user-select:none;
}

.trans {
  transition: all 1s;
}

#home {
  width: 1000px;
  margin: 80px auto 0;
  padding: 10px;
  overflow: hidden;
}

center {
  position: relative;
  min-height: 790px;
  overflow: hidden;
}

center:before {
  display: block;
  position: absolute;
  z-index: -2;
  width: 100%;
  content: '';
  height: 100%;
  background-image: url("https://files.cnblogs.com/files/mydia/bg.bmp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  filter:grayscale(1);
}

center:hover:before {
  filter:grayscale(0);
  transition: all ease-in 1s;
}

center:after {
  display: block;
  position: absolute;
  content: '';
  width: 100%;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  z-index: 1;
  transition: all ease-in 1s;
}

center:hover:after {
  z-index: -1;
  background: rgba(0, 0, 0, 0);
}


/*博客头像*/

#header {
  display: none;
}

.catListTitle {
  display: none;
}

#dlnkBlogLogo {
  position: relative;
  z-index: 1;
  display: block;
  width: 200px;
  height: 200px;
  margin: 25px;
  border-radius: 10px;
  overflow: hidden;
}

#dlnkBlogLogo:after {
  display: block;
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
  left: 0;
  top: 200px;
  content: '';
  background: #000;
  transition: all 1s ease-out;
}

#dlnkBlogLogo:hover:after {
  display: block;
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
  left: 0;
  top: 0;
  content: '';
  background: #000;
}

#dlnkBlogLogo img {
  position: relative;
  z-index: 3;
  width: 200px;
  height: 200px;
}


/*标题*/

.dblogHeader {
  width: 250px;
  background: #fff;
  border-radius: 10px;
  transition: all .5s;
}

.dblogTitle h1 {
  display: block;
  width: 205px;
  height: 110px;
  margin: 10px 0;
  background: url('https://files.cnblogs.com/files/mydia/headPortrait.bmp');
  text-indent: -9999px;
  border-radius: 10px;
  transition: all 1s;
}

.dblogTitle h1:hover {
  box-shadow: 0 7px 20px #e6e6e6;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

.dblogTitle h2 {
  display: block;
  width: 250px;
  height: 100px;
  text-indent: -9999px;
  background: url('https://files.cnblogs.com/files/mydia/ink.bmp');
}

.dblogTitle {
  position: relative;
  display: block;
  overflow: hidden;
}

.dblogTitle:before,
.dblogTitle:after {
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 0;
  height: 2px;
  background: #66f9cf;
  transition: all ease-out 1s;
}

.dblogTitle:after {
  top: 81px;
  margin-left: 900px;
}

.dblogTitle:hover:before,
.dblogTitle:hover:after {
  width: 900px;
  margin-left: 0;
}

#navigator {
  display: none;
}


/*随笔列表*/


#myposts .postTitl2 {
  font-size: 2rem;
}

#myposts .postDesc2 {
  font-size: 1.6rem;
}


/*文章内容*/

#topicList {
  float: right;
  width: 700px;
  text-align: left;
  padding: 10px 20px;
  border-radius: 3px;
  min-height: 430px;
  transition: all .5s;
}
.cnblogs-markdown a {
  position: relative;
}
.cnblogs-markdown a:after{
  position: absolute;
  display: block;
  top: 35%;
  left: 0;
  content: '===>';
  width: 100%;
  height: 100%;
  animation: alink 3s infinite;
}
@keyframes alink {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translate(100%);
  }
}
.day {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 250px;
  background-color: #2A3840;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  opacity: 1;
  transform: scale(1) translateY(100%);
  transition: transform .5s linear .15s;
}

.day>.postTitle {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 1s cubic-bezier(.15, .73, .37, 1.2) .6s, opacity 1s cubic-bezier(0.19, 1, 0.22, 1.2) .6s;
}

.day.vis>.postTitle {
  transform: translateY(0);
  opacity: 1;
}

.day:hover {
  transform: scale(1.02);
  z-index: 9;
  box-shadow: 0px 0px 10px #9d9d9d, inset 0px 0px 27px #fff;
}

.day.vis:hover {
  transform: scale(1.02);
}

.day.vis {
  transform: translateY(0) scale(1);
}


/* 文章标题 */

.day>.postTitle {
  position: absolute;
  bottom: 10px;
}

@keyframes textC {
  0% {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #228DFF, 0 0 14px #228DFF, 0 0 16px #228DFF, 0 0 20px #228DFF, 0 0 6px #228DFF;
  }
  100% {
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #228DFF, 0 0 7px #228DFF, 0 0 8px #228DFF, 0 0 10px #228DFF, 0 0 15px #228DFF;
  }
}

.postTitle2 {
  display: block;
  width: 305px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: bold;
  transition: all 1s;
}

.day:hover .postTitle2 {
  animation: textC 1.5s ease-in-out infinite alternate;
}

.day:hover .postDesc {
  width: auto;
}


/*文章日期*/

.dayTitle {
  display: none;
}


/* 文章内容 */

.c_b_p_desc {
  color: #8c989c;
  text-indent: 32px;
  font-size: 1.8rem;
}


/* 阅读更多 */

.c_b_p_desc_readmore {
  display: none;
}


/*文章访问量*/

.postDesc {
  float: right;
  margin-bottom: 20px;
  width: 201px;
  line-height: 24px;
  height:24px;
  color: #bbb;
  overflow: hidden;
  transition: all 1s;
}

.postDesc a {
  display: none;
}


/*
文章页码
*/

.pager {
  font-size: 2rem;
  color: #fff;
  line-height: 2;
}

.pager a {
  color: #ccc;
  font-size: 1.5rem;
  border: none;
}

.topicListFooter {
  margin-right: 0;
  margin-top: 0;
}


/*侧边栏*/

#sideBar {
  float: left;
  color: #333;
  width: 250px;
}


/*公告*/


/*日历*/

#calendar {
  display: none;
}

#profile_block {
  display: none;
}

#sidebar_search {
  display: none;
}

#sidebar_shortcut li {
  float: left;
}


/*常用链接*/

#leftcontentcontainer {
  display: none;
}

#cnblogs_post_body {
  text-align: left;
}

#under_post_news,
#under_post_kb {
  display: none;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}
/* 评论 */
.feedbackItem{
  border:1px solid #dedede;
  background:rgba(0,0,0,.4);
  padding: 10px;
  margin-top:20px;
}
.comment_vote a:first-child{
  display:inline-block;
  color:#5cb85c;

}
.comment_vote a:last-child{
  color:red;
}

/*脚注*/

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 20px;
  font-size: 1rem;
  color: #ccc;
  background: #000c16;
}



/*侧边栏*/
.dos{
  font-size:1.6rem;
  border-radius:3px;
  margin-top:20px;
}
.dos-hd {
  width: 250px;
  background: #ededed;
  line-height: 1.5;
  font-weight: bold;
  color: #333;
  font-family: consolas;
  overflow:hidden;

}

.dos-hd li {
  float: left;
  padding-left:3px;
  padding-right: 7px;
  cursor:pointer;
}
.dos-hd li:hover {
  background:#dfdfdf;
}

.dos-bd {
  width: 240px;
  padding: 6px 5px;
  color: #00FF00;
  font-family: courier;
  background: black;
  text-align:left;
}

/*头部*/

.nav-top {
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.nav-top ul {
  float: right;
}

.nav-top li {
  float: left;
  line-height: 40px;
  font-size: 2rem;
  padding: 0 30px;
  text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5)
}

.nav-top {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  transition: all .5s;
}
.toptips{
  font-size: 1.6rem;
  line-height: 4rem;
  transform: scale(1);
  opacity: 1;
  transition: all 1s .25s;
}
.time-wrap {
  color: #fff;
  line-height: 40px;
  overflow: hidden;
  font-size: 2rem;
}

.shadow-scroll {
  padding: 10px 60px;
  background: rgba(255, 255, 255, 0.3)
}
.shadow-scroll .toptips{
  transform: scale(0);
  opacity: 0;
}
.fontchange{
  display: block;
  width: 30px;
  text-align: center;
  font-size: 20px;
}
.fontchange div{
  transition: all .281s;
}
.fontchange:hover div{
  transform:translateX(0)!important;
}
.fontchange_1{
  transform:translateX(20px);
}
.fontchange_2{
  transform: translateX(-20px);
}
.page-index{
  position:fixed;
  bottom:0;
  left:40px;
}
.page-essay{
  position:fixed;
  bottom:0;
  right:40px;
}


@media screen and (min-width: 1400px) {
  html {
    font-size: 75%;
  }
  #home {
    width: 1200px;
  }
  #topicList {
    width: 900px;
  }
  .day {}
    .postTitle {
      width: 305px;
    }
  }

  @media screen and (max-width: 1000px) {
    html {
      font-size: 50%;
    }
    .nav-top {
      display: none;
    }
    #home {
      width: 100%;
    }
    #header,
    #sideBar {
      display: none;
    }
    center {
      padding: 0;
    }
    #topicList {
      float: none;
      transform: translateY(0)!important;
    }
    .day {
      margin: 10px auto;
    }
    .chrome {
      position: absolute;
      top: 200px;
      left: 50%;
      margin-left: -100px;
      z-index: 20;
      width: 200px;
      height: 100px;
      background: #fff;
      color: #333;
    }
    .chrome button {
      float: right;
    }
  }