*, ::after, ::before {box-sizing: border-box;}
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
html {box-sizing: border-box;-webkit-box-sizing: border-box;font-size: 100%;overflow-y: scroll;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;overflow-x: hidden;}
button,input,textarea {-webkit-appearance: none;outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti, WenQuanYi Micro Hei, Helvetica, Arial,sans-serif;font-size: 16px;}
button:focus,input:focus,textarea:focus {outline: none;}
button,select {text-transform: none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;}
button[disabled],html input[disabled] {cursor: default;border: 0;}
article,aside,details,figcaption,figure,footer,header,main,nav,section {display: block;}
abbr[title] {border-bottom: 1px dotted;}
dfn {font-style: italic;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
ol,ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
caption,td,th {font-weight: 400;text-align: left;}
small {font-size: 80%;}
blockquote:after,blockquote:before,q:after,q:before {content: "";}
blockquote,q {-webkit-hyphens: none;-ms-hyphens: none;hyphens: none;quotes: none;}
.grap blockquote,.colonel blockquote {border-left: 3px solid rgba(0, 0, 0, 0.8);font-weight: 400;letter-spacing: 0.01rem;margin: 30px 0;padding-left: 20px;}
blockquote small {float: right;margin-top: 25px;color: rgba(0, 0, 0, 0.44);font-style: italic;}
pre {padding: 17px;font: 14px/22px courier new;position: relative;margin-bottom: 20px;background-color: #f8f8f8;}
code,pre {border-radius: 3px;overflow-x: auto;}
code {padding: 2px;background-color: #eee;word-break: break-word;letter-spacing: 0;font: 14px/22px courier new;}
pre code {padding: 0;background-color: #fff;border-radius: 0;}
img {max-width: 100%;height: auto;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
a,button,input {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
figcaption {-webkit-nbsp-mode: normal;}
a {color: inherit;text-decoration: none;}
a:active,a:hover {outline: 0;}
input[disabled] {cursor: default;color: rgba(0, 0, 0, 0.8);background-color: rgba(0, 0, 0, 0.05);}
audio:not([controls]) {display: none;height: 0;}
[hidden],template {display: none;}
svg:not(:root) {overflow: hidden;}
::-webkit-scrollbar {width: 10px;height: 10px;}
::-webkit-scrollbar-thumb {border-radius: 4px;background:rgba(206, 206, 206, 0.85);}
::-webkit-scrollbar-track {background:rgba(206, 206, 206, 0.45);}

body {line-height: 1.8;color: rgba(0, 0, 0, 0.8);font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti, WenQuanYi Micro Hei, Helvetica, Arial, sans-serif;background:#3C5A76 url(static/images/bg.png) no-repeat 50% 5px;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga" on;font-feature-settings: "liga" on;}

.aligncenter {display: block;margin-left:auto;margin-right:auto;}
.alignleft {float:left;}
.alignright {float:right;}

.container {width: 100%;max-width: 800px;margin: 0 auto;padding:0 20px}

/*=header************/
.header{margin:0 auto;padding:40px 0 120px;text-align:center;border-bottom: 20px solid rgba(233, 33, 33, 0.65);background-color: rgba(70,130,180,0.2);}
.header .brand{margin-right: auto;margin-bottom: 15px}
.header .site-title a{display:block;color:#f6f6f6;font-size:30px;line-height:1;text-shadow:#000 1px 1px 2px;}
.header .site-title img{max-height: 60px;}
.header .description{font-size:14px;margin-top: 5px;color:rgba(255,255,255,0.85);}
/*menu*/
.menu{margin:8px 0 0;padding: 0;list-style:none;display: flex;justify-content: center; align-items: center;}
.menu li{display:inline-block;border-left:1px solid #999;border-right:1px solid #999;margin-left:-1px;}
.menu li a{text-shadow:#3C5A76 2px 2px 0;color:rgba(255,255,255,0.85);display:block;padding:0 15px;line-height:23px;white-space:nowrap;}
.menu li a span{display: none;font-size:12px;}
.menu li a:hover{color:#fff;cursor:pointer;}

#main{position: relative;margin-top: -110px;animation:fadeIn 0.5s;-webkit-animation:fadeIn 0.5s;}

.post{position:relative;margin-bottom:20px;padding: 20px 20px 10px;border:1px solid #ccc;border-radius: 4px;box-shadow:rgba(0,0,0,0.44) 3px 3px 10px;background:#fff;}
.post h2.title{font-size:22px;line-height: 1.25;}
.post h2.title a{display: block;}
.post h2.title a:hover{background:#eee;}
.xentry{font-size: 14px;}
.entry{padding-top:10px;}
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5{margin-bottom:12px;font-weight: 600;}
.entry p,.entry dl,.entry ol,.entry ul,.entry table{margin-bottom:20px;}
.entry ol,.entry ul{font-size:14px;padding-left: 25px;list-style-position: inside}
.entry ol{list-style-type: auto;}
.entry ul{list-style-type: square;}
.entry fieldset {border:1px dashed #CCCCCC;}
.entry fieldset legend{ font-weight:bold;}
.entry table{border-color:#CCCCCC;border-style:solid;border-width:0 1px 1px 0;font-size: 14px;}
.entry table tr th{background:#F4F4F4;border-color:#CCCCCC;border-style:solid;border-width:1px 0 0 1px;color:#666666;font-weight:bold;padding:5px 10px;text-align:center;}
.entry table tr td{border-color:#CCC;border-style:solid;border-width:1px 0 0 1px;padding:5px 10px;}
.entry a{color: tomato;}
.entry a:hover{text-decoration: underline;opacity: 0.85;}
.entry a img{padding:2px; border:1px solid #ccc;}
.entry a:hover img{border:1px solid #8aab46; background:none;}
.entry .fluid{margin-left:-21px;margin-right:-21px;margin-bottom: 20px;}
.entry blockquote{font-size:14px;margin-bottom: 25px;padding: 0 20px 0 30px;color:#999;text-align: right;border-right: 5px solid rgb(208, 208, 208);}
@media screen and (max-width: 767px){
  .entry .table-responsive{width:100%;overflow-x:auto;}
  .table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
    white-space: nowrap;
  }
}
.post-meta{font-size: 12px;margin:10px 0;color:#bdbdbd;line-height: 25px;}
.post-meta img{float:left;width:25px;height: auto;border-radius: 50%}
.post-meta span{margin-left: 15px;}

.navigation{margin: 20px 0;text-align: center;}
.navigation p, .navigation a{color:#fff;}
.post-navi{display: flex;}
.post-navi div{width: 50%;color:rgba(255,255,255,0.45);font-size: 14px;}
.post-navi a{display: block;line-height: 1.25;}
.post-navi .prev{text-align: left;}
.post-navi .next{text-align: right;}

.pagetitle{margin-bottom: 20px;padding: 5px 20px;color: #fff;text-align: center;border-top: 1px solid rgba(255,255,255,0.65);border-bottom: 2px solid rgba(255,255,255,0.55)}
.pagetitle h3{background: rgba(255,255,255,0.25);}
/* = pages nav */
ol.page-navigator {color: #666;list-style: none;}
ol.page-navigator li {margin: 0 5px 0 0;display: inline-block;}
ol.page-navigator li a {padding: 5px 10px;background:#fff;color:#333;border-radius: 4px;box-shadow:rgba(0, 0, 0, 0.05) 1px 1px 5px}
ol.page-navigator li.current a {color:#fff;background: rgba(233, 33, 33, 0.65);}

.comment-area{margin-bottom:20px;}
.comment-area h3{font-weight: 600;}
.comments{padding: 20px;background:#fff;border-radius: 4px;box-shadow: rgb(0 0 0 / 44%) 3px 3px 10px;}
.commentlist ul {padding-left: 30px;}
.commentlist li {position:relative;margin: 15px 0;}
.commentlist li.comment-level-odd {background: #fff;}
.commentlist li.comment-level-even {background: #FAFAFA;}
.commentlist li.comment-by-author {border: 1px dashed #AAA;}
.commentlist li .comment-reply {right:10px;top:5px;position:absolute;}
.commentlist li .comment-reply a {font-size: 11px;border: none;color: #aaa;}
.commentlist li .comment-reply a:hover {color: #444;}

.comment-meta {display: flex;color: #999;font-size: 14px;line-height: 1.5;}
.comment-meta img.avatar{margin-right:15px;padding:2px;border:1px solid #eee;border-radius:50%;}
.comment-author{display: block;color: #333}

.comment-content {margin-left: 65px;border-bottom: 1px solid #eee}
.comment-content p{margin-bottom: 15px;}
.respond{font-size: 14px;margin-top: 20px;padding:20px;background:#fff;border-radius: 4px;box-shadow: rgb(0 0 0 / 44%) 3px 3px 10px;}
.respond ul{display: flex;}
.respond ul li{width: 33.333%;}
.respond .ipt{font-size: 14px;padding: 10px;width: 100%;border: 1px solid #ccc;box-shadow: inset #ccc 1px 1px 3px;}
.comt-comterinfo li{margin-bottom: 10px;}
.commentlist .respond ul {padding-left: 0}

.respond .cancel-comment-reply {float: right;font-size: 12px;}
.respond .cancel-comment-reply a {border: none;color: #aaa;}
.respond .cancel-comment-reply a:hover {color: #444;}
.respond .comt-title{display: flex;margin: 15px 0;}
.respond .comt-title img{width: 50px;height:50px;margin-right: 15px;border-radius: 50%;}
.respond .comt-title .show-commenter{color:#aaa}
.respond textarea {width: 100%;height: 120px;margin-bottom: 10px;}
.respond .comt-ctrl{text-align: right;}
#submit{color: #fff;padding: 5px 15px;border: none;background:steelblue}
#smiley{overflow: auto;}

.comment-pagination{text-align: center;}
.comment-pagination li{display: inline-block;}
.comment-pagination a{font-size:12px;display: block;padding: 3px 10px;margin:0 3px;border: 1px solid steelblue;color: steelblue;border-radius: 4px;}
.comment-pagination a:hover,.comment-pagination li.current a{background-color: steelblue;color: #fff;}

#sidebar{font-size:14px;margin-left:20px;}
#sidebar .widget{margin-bottom:15px;padding:15px;border-radius:4px;background-color:rgba(255,255,255,0.9);}
#sidebar h3{font-size:12px;font-weight:500;;padding-bottom:5px;border-bottom:1px solid #D2D2D2;}

.widget-list li{margin-top: 5px;}
.widget-list li:hover{background-color: rgba(255,255,255,0.85);}
.widget-list span{display: block;color: #999;font-size:12px;}

.widget .about-author{text-align: center;}
.widget .about-author .avatar{border-radius: 50%;}
.widget .about-author h2{font-size: 20px;}
.widget .author-description p{color: rgba(0,0,0,0.55)}
.widget .about-author .social{margin:10px 0 15px;position: relative;}
.widget .social span{margin:0 5px;cursor: pointer;}
.widget .social span.wx img{position: absolute;display:none;bottom:25px;left:50%;margin-left:-75px;width:150px;max-width: 150px;padding:5px;background-color: rgba(255,255,255,0.55);border-radius: 4px;box-shadow: #666 1px 1px 5px;}
.widget .social span.wx:hover img{display: block;}

.widget .blog-stats{display: flex;margin: 0 -15px;background-color: rgba(233, 33, 33, 0.6);}
.widget .blog-stats .stats-item{padding:8px 0;width:25%;text-align: center;line-height: 1.5;border-left: 1px solid rgba(233, 33, 33, 0.7);}
.widget .blog-stats .stats-item:nth-child(1){border-left: none;}
.widget .blog-stats span{display: block;color:rgba(255,255,255,0.65);}
.widget .blog-stats span.nums{color: #fff;font-size:16px;font-weight: 500;}

.hot-commenter li,.recent-comments li{display: flex;margin-top: 10px;}
.hot-commenter li img.avatar,.recent-comments li img.avatar{width:44px;height: 44px;border-radius: 2px;box-shadow:rgb(235, 8, 8) 0 0 1px;}
.hot-commenter li .blood,.recent-comments li .rc-content{width: 100%;margin-left:10px}
.hot-commenter li small{float:right;color:rgb(158, 143, 143)}
.hot-commenter li .active-bg{margin:5px 0 2px;height:12px;background:#DFDFDF;position: relative;border-radius: 5px;}
.hot-commenter li .active-degree{background-color: rgba(235,8,8,0.8);height:12px;position: absolute;left:0;top:0;border-radius: 5px;background-image: linear-gradient(45deg ,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size: 1rem 1rem;}

.widget .recent-comments li a{display: block;line-height: 1.2;}
.widget .recent-comments li span{margin-bottom: 10px;}

#search{display: flex;margin-bottom:15px;border: 1px solid #eee;border-radius: 4px;background-color: rgba(255,255,255,0.85);}
#search input{font-size:14px;width:100%;padding: 8px 15px;border:none;background-color: transparent;}
#search button{border:none;background-color: transparent;}

.footer{font-size:14px;padding:30px 0 10px;color:rgba(255,255,255,0.45);text-align:center;background:#333;}
.footer a{color:#535353;}
.footer a:hover{color:#a5a5a5; text-decoration:underline;}

.goTop{position: fixed;bottom: 10%;right:5%;}
#top{display:block;width:50px;height:50px;color:#fff;text-align:center;line-height:50px;background-color: rgba(255,255,255,0.45);border-radius: 50%;cursor: pointer;box-shadow: rgb(3, 3, 3) 1px 1px 5px;}

@media (min-width:800px) {
  .container{display: flex;padding: 0;}
  .header .brand{margin-bottom: 0;}
  .menu li{text-align: right;}
  .menu li a{height:45px;padding:0 15px 0 25px;}
  .menu li a span{display: block;}
  #content{width:530px; height:100%;}
  #sidebar{width:250px;height:100%;}
  .footer{text-align: left;}
  .footer p{text-align: right;margin-top: -15px}
}
@-webkit-keyframes fadeIn {
  0% {
  transform: scale(0);
  }

  to {
  transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
  transform: scale(0);
  }

  to {
  transform: scale(1);
  }
}