body {
    font:87.5%/1.2 -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
    margin:0;
    color:#444;
    background-color:#fff
    }
a, .nav-menu ul a, .post-content .more a {
    color:#666;
    border:0;
    text-decoration:none
    }
a:hover, .rewards a:hover, .tags a:hover, .comment-author a:hover, #footer .links a:hover, .icpnum:hover {
    color:#333
    }
ul {
    padding-left:30px
    }
ul li p, #footer p, .whisper .comment-author {
    margin:0
    }
h1, h1.post-title {
    font-size:2em
    }
h2, #catalog-col b {
    font-size:1.2em
    }
pre, code {
    font-family:Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size:1em;
    background:#f3f3f3
    }
code {
    padding:2px 4px;
    color:#b94a48
    }
pre {
    padding:8px;
    overflow:auto;
    max-height:400px
    }
pre code {
    display:block;
    padding:3px;
    color:#444
    }
blockquote {
    margin:1em 0;
    padding-left:1.5em;
    background:#fcfcfc;
    border-left:4px solid #eee;
    color:#666
    }
table {
    border:1px solid #ddd;
    width:100%
    }
table th, table td {
    padding:5px 10px;
    border:1px solid #eee
    }
table th {
    background:#f3f3f3
    }
input, textarea, button {
    font-family:inherit;
    font-size:100%;
    line-height:1.2;
    margin:0;
    outline:0;
    appearance:none;
    -webkit-appearance:none
    }
input, textarea {
    padding:5px;
    border:1px solid #eee;
    width:100%;
    height:30px;
    border-radius:2px;
    box-shadow:none;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
    }
textarea {
    height:150px;
    resize:vertical;
    overflow:auto
    }
button, input[type=submit] {
    padding:0 6px;
    background:#ddd;
    border:0
    }
button, input[type=submit], .menu-parent a, .rewards a, #cornertool li {
    cursor:pointer
    }
.browsehappy {
    padding:8px 0;
    background:#fbe3e4;
    color:#8a1f11;
    text-align:center
    }
.browsehappy a {
    color:#8a1f11;
    text-decoration:underline;
    font-weight:bold
    }
.clearfix {
    zoom:1
    }
.clearfix:before, .clearfix:after {
    content:"";
    display:table
    }
.clearfix:after {
    clear:both
    }
.container {
    max-width:1060px;
    margin-left:auto;
    margin-right:auto;
    padding-left:10px;
    padding-right:10px
    }
.head-fixed .browsehappy {
    position:fixed;
    bottom:0;
    width:100%
    }
.head-fixed #header {
    position:fixed;
    top:0;
    width:100%;
    background:rgba(255, 255, 255, .95);
    z-index:999
    }
.head-fixed #body {
    padding-top:71px
    }
#header {
    line-height:40px;
    padding:15px 0;
    border-bottom:1px solid #eee
    }
.site-name, .comment-form p, .whisper .comment-meta time {
    float:left
    }
.site-name h1 {
    display:table-cell;
    height:40px;
    font-size:1.7em;
    margin:0;
    vertical-align:middle;
    font-weight:normal
    }
#logo {
    color:#333;
    }

.post-title a{
    color:#000;
    position: relative;
    text-decoration: none;
    }


.post-title a::after{
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: currentColor;
    transform: scale(0);
    transition:all .35s;
    }
.post-title a:hover::after{
    transform: scale(1);
    }

#logo img {
    display:block;
    max-height:30px
    }
#nav-swith {
    position:relative;
    float:right;
    margin-left:5px;
    color:#444
    }
#nav-swith, #search button {
    top:5px;
    right:0;
    width:30px;
    height:30px;
    background:0
    }
#nav-swith:before, #search button:before {
    content:"";
    position:absolute;
    top:7px;
    left:7px;
    width:9px;
    height:9px;
    border:solid 2px currentColor;
    border-radius:50%
    }
#nav-swith:after, #search button:after {
    content:"";
    position:absolute;
    top:19px;
    left:17px;
    width:6px;
    height:2px;
    background:currentColor
    }
#nav-swith:before, #nav-swith:after, #nav-swith span, #nav, #site-search, .nav-menu, .menu-parent ul, #catalog-col, .rewards img, #cornertool li, #music span, #catalog:before, #catalog:after, #catalog span {
    transition:.2s;
    -webkit-transition:.2s
    }
.on #nav-swith:before, .on #nav-swith:after {
    content:"";
    position:absolute;
    top:14px;
    left:6px;
    width:18px;
    height:2px;
    background:currentColor;
    border:0;
    border-radius:0
    }
.on #nav-swith:before, .author-icon {
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg)
    }
#nav-swith:after, .on #nav-swith:after, #search button:after {
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg)
    }
#nav-swith span {
    display:block;
    width:18px;
    height:2px;
    background:currentColor;
    visibility:hidden
    }
#nav, .whisper .post-title .more {
    position:relative;
    float:right
    }
.on #site-search {
    top:0
    }
.on #site-search, .menu-parent:hover>ul, #catalog-col.catalog, .rewards a:hover img, #cornertool li {
    visibility:visible;
    opacity:1
    }
#site-search {
    position:absolute;
    top:-10px;
    right:0;
    width:200px
    }
#site-search, .menu-parent ul, #catalog-col, .rewards img, #cornertool .hidden {
    visibility:hidden;
    opacity:0
    }
#search, .rewards, .menu-parent, .l_logo, .loading {
    position:relative
    }
#search input {
    padding-right:30px;
    background:0;
    border:0;
    border-bottom:1px solid #999;
    border-radius:0;
    text-align:center
    }
#search button {
    position:absolute;
    color:#666
    }
.nav-menu, .comment-list, .comment-list ol {
    list-style:none;
    margin:0;
    padding:0
    }
.nav-menu::-webkit-scrollbar, #catalog-col::-webkit-scrollbar {
    width:6px;
    height:6px
    }
.nav-menu::-webkit-scrollbar-thumb, #catalog-col::-webkit-scrollbar-thumb {
    border-radius:3px;
    background-color:#ddd
    }
.nav-menu li {
    display:inline-block;
    margin:0 10px
    }
.nav-menu a {
    color:#444
    }
.nav-menu a:hover, .page-navigator a:hover {
    border-bottom:1px solid #444
    }
.menu-parent ul {
    position:absolute;
    left:50%;
    width:100px;
    margin:0 0 0 -50px;
    padding:0;
    border-radius:5px;
    background:rgba(238, 238, 238, .95);
    text-align:center;
    list-style:none
    }
.menu-parent ul:before {
    content:"";
    position:absolute;
    top:-7px;
    left:50%;
    margin-left:-7px;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid rgba(238, 238, 238, .95)
    }
.menu-parent li, #cornertool li:before, .whisper .comment-list .respond, .whisper.permission .respond {
    display:block
    }
.menu-parent ul a {
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
    }
.menu-parent .menu-parent .menu-child {
    background:rgba(221, 221, 221, .95)
    }
#bar, .loading:after {
    position:fixed;
    top:0;
    height:3px;
    background:#333;
    animation:loading 1s infinite;
    -webkit-animation:loading 1s infinite
    }
@keyframes loading {
    0% {
        right:50%;
        left:50%
        }
    30% {
        right:0;
        left:0
        }
    100% {
        right:50%;
        left:50%
        }
    }
@-webkit-keyframes loading {
    0% {
        right:50%;
        left:50%
        }
    30% {
        right:0;
        left:0
        }
    100% {
        right:50%;
        left:50%
        }
    }
#main {
    float:left;
    width:100%
    }
#main>*:not(.breadcrumbs) {
    animation:upin .3s;
    -webkit-animation:upin .3s
    }
@keyframes upin {
    0% {
        opacity:0;
        transform:translateY(30px)
        }
    100% {
        opacity:1;
        transform:translateY(0)
        }
    }
@-webkit-keyframes upin {
    0% {
        opacity:0;
        transform:translateY(30px)
        }
    100% {
        opacity:1;
        transform:translateY(0)
        }
    }
.breadcrumbs {
    margin:15px 0 -15px;
    color:#666
    }
.post {
    padding:15px 0
    }
.post-title {
    color:#000000;
    margin:.83em 0;
    font-size:2em
    }
.post-meta {
    margin-top:-0.5em;
    margin-bottom:-0.5em;
    padding:0;
    color:#000;
    font-size:1.5em;
font-weight:bold
    }
.post-meta li {
    display:inline-block;
    margin:0 0 .5em 0;
    padding-left:0;
    border-left:1px solid #eee
    }
.post-meta li:first-child {
    padding:0;
    border:0
    }
#catalog-col, #cornertool {
    position:fixed;
    bottom:5px;
    z-index:999
    }
#catalog-col {
    right:50%;
    margin-right:-515px;
    min-width:150px;
    max-width:50%;
    max-height:50%;
    color:#eee;
    background:rgba(0, 0, 0, .7);
    border:1em solid transparent;
    border-right-width:.3em;
    overflow:auto
    }
#catalog-col.catalog {
    margin-right:-535px
    }
#catalog-col>ul {
    margin:1em .5em 0 0
    }
#catalog-col ul {
    padding-left:20px
    }
#catalog-col a {
    color:#eee;
    border:0
    }
#catalog-col a:hover {
    border-bottom:1px solid #eee
    }
.post-content .cl-offset {
    position:relative;
    display:block;
    top:-10px;
    height:0;
    border:0
    }
.head-fixed .cl-offset {
    top:-51px
    }
.whisper .post-content {
    min-height:40px;
    margin-top:1em;
    padding:0 1em;
    text-align:center;
    border:1px solid #444;
    border-radius:2px
    }
.whisper .post-title {
    font-size:1em;
    font-weight:normal;
    margin:0 -1em
    }
.whisper.post .post-title a {
    display:block;
    padding:2px 1em;
    color:#fff;
    background:#444;
    border:0
    }
.whisper .post-title a, .post-content .links a {
    transition:.3s;
    -webkit-transition:.3s
    }
.whisper .post-title a:hover {
    background:#000
    }
.whisper .post-content pre {
    text-align:left
    }
.whisper .notice {
    display:block;
    font-size:.9em;
    padding:5px;
    color:#f44336;
    border:1px solid;
    border-radius:2px
    }
.post-content, .comment-content {
    line-height:1.5;
    word-wrap:break-word
    }
.post-content a, .comment-content a {
    color:#3354aa;
    border-bottom:1px solid #eee
    }
.post-content a:hover, .comment-content a:hover, .nav-menu ul a:hover {
    color:#333;
    border:0
    }
.post-content img, .post-content video, .comment-content img, .comment-content video, .whisper img, .whisper video {
    max-width:100%
    }
.post-content hr, .comment-content hr {
    margin:2em auto;
    width:100px;
    border:1px solid #ddd;
    border-width:2px 0 0 0
    }
.post-content .thumb, .post-content .more {
    text-align:center
    }
.protected input {
    width:auto
    }
.rewards, .post .tags {
    clear:both
    }
.rewards a, .tags a, .comment-author a {
    color:#3354aa;
    border:0
    }
.rewards img {
    position:absolute;
    top:0;
    left:50%;
    margin:-15% 0 0 -15%;
    padding:5px;
    max-width:30%;
    background:#eee
    }
.post-near {
    list-style:none;
    margin:30px 0;
    padding:0;
    color:#999
    }
.post-near li {
    margin:10px 0
    }
.page-navigator {
    list-style:none;
    margin:25px 0;
    padding:0;
    text-align:center
    }
.page-navigator li {
    display:inline-block;
    margin:0 5px;
    height:24px;
    line-height:24px
    }
.page-navigator a {
    padding:0 2px
    }
.page-navigator .current a {
    color:#444;
    border-bottom:1px solid #444
    }
.ajaxload li, .whisper .respond {
    display:none
    }
.ajaxload .next {
    display:block;
    color:#666
    }
.ajaxload a {
    padding:5px 20px;
    border:1px solid #666;
    border-radius:2px
    }
.ajaxload a:hover {
    border-color:#333
    }
.ajaxload .loading, .ajaxload .loading:hover, .post-content .more .loading {
    padding:5px;
    color:#333;
    border:0
    }
.loading:after {
    content:"";
    display:block;
    position:absolute;
    top:auto;
    bottom:0;
    height:1px
    }
#comments {
    margin-bottom:30px;
    padding-top:15px;
    border-top:1px solid #eee
    }
.whisper .comment-list li.comment-parent {
    padding:20px 10px;
    background:0;
    border:0;
    border-bottom:1px solid #eee
    }
.whisper .comment-list li.comment-parent:last-child {
    border:0
    }
.whisper .comment-parent>.comment-content, .whisper .comment-meta, .whisper .comment-children {
    margin:1em 0 0 42px
    }
.whisper .comment-child {
    margin-top:1px;
    padding:2px 5px;
    background:#eee;
    border:0;
    border-radius:2px
    }
.whisper .comment-child .comment-content {
    line-height:20px
    }
.whisper .comment-child .avatar {
    margin:2px 5px 0 0
    }
.comment-list li {
    margin-top:10px;
    padding:10px;
    border:1px solid #eee
    }
.comment-list li.comment-level-odd {
    background:#f9f9f9
    }
.comment-list li.comment-level-even {
    background:#fff
    }
.comment-list li.comment-by-author {
    position:relative;
    background:#f2f7fc
    }
.author-icon {
    font-size:.83em;
    display:block;
    position:absolute;
    top:8px;
    left:-15px;
    width:60px;
    height:15px;
    line-height:15px;
    text-align:center;
    background:linear-gradient(135deg, transparent 30%, rgba(230, 230, 230, .8) 0) left, linear-gradient(-135deg, transparent 30%, rgba(230, 230, 230, .8) 0) right;
    background-size:50% 100%;
    background-repeat:no-repeat
    }
.comment-list li .comment-reply {
    text-align:right;
    font-size:.9em
    }
.comment-meta time {
    color:#999;
    font-size:.9em
    }
.comment-author {
    display:block;
    margin-bottom:3px;
    color:#444
    }
.comment-author .avatar {
    float:left;
    margin-right:10px
    }
.comment-author cite {
    font-weight:bold;
    font-style:normal
    }
.comment-list .respond {
    margin-top:15px;
    border-top:1px solid #eee
    }
.respond .cancel-comment-reply {
    float:right;
    margin-top:15px;
    font-size:.9em
    }
.comment-form input {
    margin-bottom:10px
    }
.comment-form .textarea {
    width:68%;
    margin:0 2% 0 0
    }
.comment-form .textbutton {
    width:30%;
    margin:0
    }
#comment-form button {
    width:100%;
    height:30px;
    border-radius:2px
    }
#secondary {
    margin-left:75%;
    padding-top:15px;
    word-wrap:break-word
    }
#secondary .more {
    display:block;
    font-size:.875em
    }
.widget {
    margin-bottom:30px
    }
.widget-list, .widget-tile, .links, #cornertool ul {
    list-style:none;
    padding:0
    }
.widget-list li, #catalog-col li {
    margin:5px 0;
    line-height:1.6
    }
.widget-list li ul {
    margin-left:15px
    }
.widget-tile {
    margin-left:-5px;
    margin-right:-5px
    }
.widget-tile li {
    display:inline-block;
    margin:5px;
    line-height:1.6;
    color:#666
    }
#footer {
    font-size:.875em;
    padding:2em 0;
    line-height:1.5;
    text-align:center;
    border-top:1px solid #eee
    }
#footer, #footer .links a, .icpnum {
    color:#999
    }
.post-content .links {
    letter-spacing:-9em
    }
.post-content .links li {
    display:inline-block;
    width:25%;
    letter-spacing:0
    }
.post-content .links a {
    display:block;
    height:20px;
    line-height:20px;
    margin:5px 10px;
    padding:5px 10px;
    text-align:center;
    color:#444;
    background:#fcfcfc;
    border:0;
    border-radius:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    box-shadow:0 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, .1)
    }
.post-content .links a:hover {
    box-shadow:0 2px 5px rgba(0, 0, 0, .3);
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, .3)
    }
.post-content .links .l_logo {
    padding-left:40px
    }
.l_logo img, .l_logo i {
    position:absolute;
    top:0;
    left:0;
    width:16px;
    height:16px;
    padding:7px;
    background:#ccc;
    overflow:hidden
    }
.l_logo i {
    font:16px/1 Segoe UI Symbol
    }
#footer .links, #cornertool ul {
    margin:0;
    text-align:center
    }
#footer .links li {
    display:inline-block;
    margin:0 3px 2px
    }
#cornertool {
    right:50%;
    margin-right:-580px
    }
#cornertool .hidden {
    left:20px
    }
#cornertool li {
    position:relative;
    display:block;
    left:0;
    width:40px;
    height:40px;
    line-height:40px;
    margin-top:5px;
    color:#fff;
    background:rgba(0, 0, 0, .7)
    }
#top:before {
    content:"\25b2"
    }
#top:hover:before {
    content:"Top"
    }
#music:before {
    content:"\266b"
    }
#music:hover:before {
    content:"\25b2"
    }
#music:hover:before, #catalog.catalog span {
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg)
    }
#music.play:hover:before {
    content:"\3013";
    animation:0;
    -webkit-animation:0
    }
.play:before {
    animation:play 5s linear infinite;
    -webkit-animation:play 5s linear infinite
    }
@keyframes play {
    0% {
        transform:rotate(0deg)
        }
    100% {
        transform:rotate(360deg)
        }
    }
@-webkit-keyframes play {
    0% {
        -webkit-transform:rotate(0deg)
        }
    100% {
        -webkit-transform:rotate(360deg)
        }
    }
#music span {
    position:absolute;
    display:block;
    bottom:0;
    height:5px;
    width:0;
    background:#666;
    opacity:.7
    }
#music.play span {
    width:100%
    }
#music.play span i {
    display:block;
    height:100%;
    width:0;
    background:#eee
    }
#catalog span, #catalog:before, #catalog:after {
    position:absolute;
    display:block;
    top:50%;
    left:50%;
    margin:-1px 0 0 -6px;
    width:12px;
    height:1px;
    background:currentColor
    }
#catalog:before {
    content:"";
    margin-top:-5px
    }
#catalog:after {
    content:"";
    margin-top:3px
    }
#catalog.catalog {
    left:-5px
    }
#catalog.catalog:before {
    margin:-4px 0 0 -11px;
    transform:rotate(-30deg);
    -webkit-transform:rotate(-30deg)
    }
#catalog.catalog:after {
    margin:2px 0 0 -11px;
    transform:rotate(30deg);
    -webkit-transform:rotate(30deg)
    }
.error-page {
    margin:100px 0;
    text-align:center
    }
#archives li {
    margin:5px 0
    }
@media(min-width:601px) {
    .on .nav-menu {
        visibility:hidden;
        opacity:0
        }
    .menu-parent .menu-parent .menu-child {
        top:5px;
        left:-120px;
        margin:0
        }
    .menu-parent .menu-parent:hover>.menu-child {
        left:-100px
        }
    .menu-parent .menu-parent .menu-child:before {
        top:7px;
        left:100%;
        margin:0;
        border-top:7px solid transparent;
        border-bottom:7px solid transparent;
        border-left:7px solid rgba(221, 221, 221, .95)
        }
    }
@media(max-width:1170px) {
    #catalog-col {
        right:65px;
        margin:0
        }
    #catalog-col.catalog {
        right:50px;
        margin:0
        }
    #cornertool {
        right:5px;
        margin:0
        }
    }
@media(max-width:990px) {
    #catalog-col.catalog {
        right:45px
        }
    #secondary {
        margin-left:72%
        }
    #cornertool li {
        width:35px;
        height:35px;
        line-height:35px
        }
    }
@media(max-width:768px) {
    #main {
        width:100%
        }
    #secondary {
        display:none
        }
    .post-title, .post-meta, .protected .post-content {
        text-align:center
        }
    }
@media(max-width:600px) {
    #nav-swith {
        margin:0
        }
    #nav-swith:before, #nav-swith:after {
        left:6px;
        width:18px;
        height:2px;
        background:currentColor;
        border:0;
        border-radius:0;
        transform:none;
        -ms-transform:none;
        -webkit-transform:none
        }
    #nav-swith:after {
        top:21px
        }
    #nav-swith span {
        visibility:visible
        }
    .on #nav-swith span {
        visibility:hidden;
        opacity:0
        }
    #nav {
        width:100%;
        max-height:0;
        overflow:hidden;
        text-align:center
        }
    .on #nav {
        max-height:240px
        }
    .head-fixed .on #nav {
        margin-bottom:5px
        }
    .nav-menu {
        max-height:200px;
        overflow:auto
        }
    .nav-menu li, .nav-menu a {
        display:block
        }
    .nav-menu a:hover {
        font-weight:bold;
        border:0
        }
    .menu-parent ul {
        position:relative;
        left:0;
        margin:0 auto;
        width:75%;
        visibility:visible;
        opacity:1
        }
    .menu-parent .menu-parent .menu-child:before {
        border-bottom:7px solid rgba(221, 221, 221, .95)
        }
    #site-search {
        position:static;
        width:50%;
        margin:0 auto
        }
    .post-content .links li {
        width:33.33333%
        }
    .comment-form .textarea {
        width:58%
        }
    .comment-form .textbutton {
        width:40%
        }
    }
@media(max-width:420px) {
    .post-content .links li {
        width:50%
        }
    }