@charset "UTF-8";
@font-face {
    font-family: "Playball";
    src: url("../fonts/Playball/Playball-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Satisfy";
    src: url("../fonts/Satisfy/Satisfy-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
h1 {
    font-size: 26px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
}

h2 {
    font-size: 24px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
}

h3 {
    font-size: 20px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
}

h4 {
    font-size: 16px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
}

h5 {
    font-size: 14px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
}

h6 {
    font-size: 14px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-size: 100%;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
    line-height: 1.5;
    background: #eaeaea;
    color: #34495e;
    white-space: normal;
    word-wrap: break-word;
}
body a {
    color: #34495e;
}

main {
    position: relative;
    z-index: 8;
    max-width: 960px;
    margin: -160px auto 10px;
}

.page {
    background: #eaeaea;
    height: 100%;
}
.page > .container {
    min-height: 100%;
    padding-bottom: 210px;
    overflow: hidden;
}
.page > footer {
    margin-top: -170px;
}

@font-face {
    font-family: "iconfont";
    /* project id 425542 */
    src: url("//at.alicdn.com/t/font_425542_6m3ttidahgh.eot");
    src: url("//at.alicdn.com/t/font_425542_6m3ttidahgh.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_425542_6m3ttidahgh.woff2") format("woff2"), url("//at.alicdn.com/t/font_425542_6m3ttidahgh.woff") format("woff"), url("//at.alicdn.com/t/font_425542_6m3ttidahgh.ttf") format("truetype"), url("//at.alicdn.com/t/font_425542_6m3ttidahgh.svg#iconfont") format("svg");
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-linkedin:before {
    content: "\e724";
}

.icon-back:before {
    content: "\e697";
}

.icon-more:before {
    content: "\e6a7";
}

.icon-about:before {
    content: "\e602";
}

.icon-stackoverflow:before {
    content: "\ec1d";
}

.icon-tags:before {
    content: "\ea1b";
}

.icon-zhihu:before {
    content: "\e6ba";
}

.icon-up:before {
    content: "\e631";
}

.icon-steam:before {
    content: "\e93a";
}

.icon-weibo:before {
    content: "\e6ce";
}

.icon-home:before {
    content: "\e6d9";
}

.icon-calendar:before {
    content: "\e647";
}

.icon-facebook:before {
    content: "\e604";
}

.icon-circle:before {
    content: "\e61a";
}

.icon-archive:before {
    content: "\e619";
}

.icon-pen:before {
    content: "\e61b";
}

.icon-douban:before {
    content: "\e94a";
}

.icon-category:before {
    content: "\e625";
}

.icon-tumblr:before {
    content: "\e82d";
}

.icon-turnoff:before {
    content: "\e648";
}

.icon-turnon:before {
    content: "\e649";
}

.icon-rss:before {
    content: "\e7ef";
}

.icon-folder:before {
    content: "\e646";
}

.icon-divide:before {
    content: "\e654";
}

.icon-twitter:before {
    content: "\e606";
}

.icon-github:before {
    content: "\e600";
}

.icon-instagram:before {
    content: "\e641";
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#mobile-nav .slideout-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    color: #34495e;
    background: #f6f6f6;
    width: 180px;
    display: none;
    padding-top: 100px;
}
#mobile-nav .slideout-menu a {
    text-align: center;
    width: 180px;
    font-size: 18px;
    display: block;
    text-decoration: none;
    margin: 20px 0;
    padding: 5px 0;
}
#mobile-nav .slideout-menu .mobile-intro {
    text-align: center;
    width: 150px;
    font-family: "Satisfy", cursive, LiSu, sans-serif;
    margin: 50px 10px 0;
    font-size: 18px;
}
#mobile-nav .slideout-menu .mobile-intro i {
    font-size: 30px;
}

.slideout-open {
    overflow: hidden;
}
.slideout-open .slideout-panel {
    position: relative;
    z-index: 2;
    will-change: transform;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}
.slideout-open #mobile-nav .slideout-menu {
    display: block;
}

.fixed-mobile {
    transform: translateX(180px);
}

.mobile-header {
    display: none;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    background: rgba(52, 73, 94, 0.95);
    box-shadow: 0 2px 10px rgba(52, 73, 94, 0.9);
}
.mobile-header span, .mobile-header a {
    color: #fff;
}
.mobile-header span {
    float: left;
    margin-left: 12px;
    margin-top: 6px;
    cursor: pointer;
    padding: 0 10px;
}
.mobile-header span i {
    font-size: 22px;
}
.mobile-header .mobile-logo {
    text-align: center;
    margin-top: 5px;
}
.mobile-header .mobile-logo a {
    font-size: 12px;
    text-decoration: none;
    /*font-family: "Playball", cursive;*/
    margin-right: 42px;
}

header.site-nav {
    display: none;
    width: 100%;
    min-height: 40px;
    background: rgba(52, 73, 94, 0.9);
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    border: 1px solid transparent;
}
header.site-nav .nav-content {
    max-width: 1200px;
    margin: 0 auto;
}
header.site-nav .logo {
    float: left;
    font-size: 16px;
    padding-top: 20px;
    /*font-family: "Playball", cursive;*/
}
header.site-nav .logo a {
    color: #fff;
}
header.site-nav .logo a::after {
    content: none;
}
header.site-nav a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
    position: relative;
}
header.site-nav a::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    content: "";
    background: #fff;
    height: 2px;
    transition: all 0.3s;
}
header.site-nav a:hover::after {
    left: 0;
    right: 0;
}
header.site-nav .navbar ul {
    padding: 0;
    margin: 0;
    float: right;
    margin: 20px;
}
header.site-nav .navbar ul li {
    display: inline-block;
    list-style: none;
    margin: 0 20px;
    font-size: 18px;
}
header.site-nav .navbar ul li i {
    vertical-align: text-bottom;
}

.banner {
    position: relative;
}
.banner .show {
    position: relative;
    z-index: 2;
    font-size: 65px;
    height: 500px;
    color: #fff;
    text-align: center;
    background: url("../images/sun.jpg") no-repeat bottom;
    background-size: cover;
    font-weight: 600;

}
.banner .show div.banner-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-80%);
    margin: 0;
    font-family: "Satisfy", cursive, LiSu, sans-serif;
}
.banner .show div.banner-title .post-title {
    font-size: 36px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;

}
.banner .show div.banner-title .post-title .title{
    font-size: 36px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 700px;

}
.banner .show div.banner-title .post-title .post-tags a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    margin: 10px;
    border: 1px solid #fff;
    border-radius: 2px;
    padding: 0 10px;
    font-size: 12px;
    transition: all 0.3s;
}
.banner .show div.banner-title .post-title .post-tags a:before {
    content: "#";
    font-size: 16px;
}
.banner .show div.banner-title .post-title .post-tags a:hover {
    background: #fff;
    color: #34495e;
}

article#post-excerpt {
    min-height: 0;
}
article#post-excerpt header {
    text-align: center;
}
article#post-excerpt header h1 {
    font-size: 30px;
    margin: 0 auto 10px;
}
article#post-excerpt header a {
    display: inline-block;
    color: #34495e;
    position: relative;
    font-weight: normal;
}
article#post-excerpt header a::after {
    position: absolute;
    bottom: 0;
    left: 51%;
    right: 51%;
    content: "";
    background: #34495e;
    height: 2px;
    transition: all 0.3s;
}
article#post-excerpt header a:hover::after {
    left: 0;
    right: 0;
}
article#post-excerpt header a.post-category {
    color: #8a8a8a;
}
article#post-excerpt header a.post-category::after {
    content: none;
}
article#post-excerpt header .post-meta span.post-time {
    color: #8a8a8a;
    font-size: 14px;
    margin-bottom: 30px;
    font-weight: normal;
}
article#post-excerpt header .post-meta .post-visits {
    color: #8a8a8a;
    font-size: 14px;
}
article#post-excerpt .post-tags a {
    display: inline-block;
    color: #34495e;
    background: #eee;
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 0 10px;
    font-size: 12px;
    transition: all 0.3s;
}
article#post-excerpt .post-tags a:before {
    content: "#";
    font-size: 16px;
}
article#post-excerpt .post-tags a:hover {
    transform: translateY(-5px);
}

article.post {
    min-height: 400px;
    margin: 0 auto 15px;
    padding: 40px 20px 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
article.post a {
    color: #0099cc;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}
article.post a:hover {
    color: #f6695f;
}
article.post blockquote {
    font: 14px/22px helvetica, sans-serif;
    font-style: italic;
    margin: 10px 10px 10px 20px;
    padding: 10px 10px 10px 15px;
    border-left: 3px solid #ccc;
    background-color: #f1f1f1;
}
article.post .post-meta .post-time {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: bold;
}
article.post .post-meta .post-time i {
    font-weight: normal;
}
article.post .post-meta .post-category {
    color: #8a8a8a;
    font-weight: normal;
    font-size: 14px;
}
article.post .post-meta .post-visits {
    display: inline-block;
    color: #8a8a8a;
    font-size: 14px;
}
article.post img {
    box-sizing: border-box;
    max-width: 100%;
    display: block;
    border: 1px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    background: #fff;
    padding: 5px;
}
article.post .post-tags {
    margin-bottom: 10px;
}
article.post .post-tags a {
    display: inline-block;
    text-decoration: none;
    color: #34495e;
    margin: 5px;
    border: 1px solid #34495e;
    border-radius: 2px;
    padding: 0 5px;
    font-size: 12px;
}
article.post .post-tags a:before {
    content: "#";
    font-size: 16px;
}
article.post .post-footer {
    margin-top: 40px;
    text-align: center;
    font-family: "Satisfy", cursive, LiSu, sans-serif;
    color: #8d8a8a;

}
article.post .post-footer:after {
    content: "";
    display: inline-block;
    margin-left: 15px;
    width: 30%;
    border: 1px solid transparent;
    border-top-color: #8d8c8c;
}
article.post .post-footer:before {
    content: "";
    display: inline-block;
    margin-right: 15px;
    width: 30%;
    border: 1px solid transparent;
    border-top-color: #8d8c8c;
}
article.post #read-more {
    margin: 40px 0;
    text-align: center;
}
article.post #read-more a {
    font-weight: normal;
    color: #34495e;
    padding: 5px;
    border: 1px solid #34495e;
    border-radius: 2px;
    transition: all 0.3s;
}
article.post #read-more a:hover {
    background: #34495e;
    border-color: #34495e;
    color: #fff;
}

.post-toc {
    position: absolute;
    width: 200px;
    z-index: -1;
    top: 0;
    margin-left: 960px;
    padding: 10px;
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    word-wrap: break-word;
    box-sizing: border-box;
}
.post-toc .post-toc-title {
    margin: 0 10px;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
}
.post-toc .post-toc-content {
    font-size: 14px;
}
.post-toc .post-toc-content .toc, .post-toc .post-toc-content .toc-item {
    list-style: none;
}
.post-toc .post-toc-content .toc {
    margin: 10px 0;
    padding-left: 20px;
}
.post-toc .post-toc-content .toc .toc-child {
    padding-left: 15px;
}
.post-toc .post-toc-content span {
    font-weight: normal;
}
.post-toc .post-toc-content .toc-link.active {
    color: #34495e;
}

code, pre {
    padding: 7px;
    font-size: 13px;
    font-family: Consolas, Monaco, Menlo, Consolas, monospace;
    background: #e8e8e8;
}

code {
    padding: 3px 5px;
    border-radius: 4px;
    color: #444;
    white-space: normal;
    word-break: break-all;
}

.highlight {
    margin: 1em 0;
    border-radius: 5px 5px 0 0;
    overflow-x: auto;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.125);
    position: relative;
}
.highlight table {
    position: relative;
}
.highlight table::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 2px 7px;
    font-size: 13px;
    font-weight: bold;
    color: #979797;
    background: #d9d9d9;
    content: "Code";
}
.highlight.html > table::after {
    content: "HTML";
}
.highlight.html > figcaption > span::after {
    content: " · HTML";
}
.highlight.html figcaption + table::after {
    display: none;
}
.highlight.js > table::after {
    content: "JavaScript";
}
.highlight.js > figcaption > span::after {
    content: " · JavaScript";
}
.highlight.js figcaption + table::after {
    display: none;
}
.highlight.bash > table::after {
    content: "Bash";
}
.highlight.bash > figcaption > span::after {
    content: " · Bash";
}
.highlight.bash figcaption + table::after {
    display: none;
}
.highlight.css > table::after {
    content: "CSS";
}
.highlight.css > figcaption > span::after {
    content: " · CSS";
}
.highlight.css figcaption + table::after {
    display: none;
}
.highlight.scss > table::after {
    content: "Scss";
}
.highlight.scss > figcaption > span::after {
    content: " · Scss";
}
.highlight.scss figcaption + table::after {
    display: none;
}
.highlight.java > table::after {
    content: "Java";
}
.highlight.java > figcaption > span::after {
    content: " · Java";
}
.highlight.java figcaption + table::after {
    display: none;
}
.highlight.xml > table::after {
    content: "XML";
}
.highlight.xml > figcaption > span::after {
    content: " · XML";
}
.highlight.xml figcaption + table::after {
    display: none;
}
.highlight.python > table::after {
    content: "Python";
}
.highlight.python > figcaption > span::after {
    content: " · Python";
}
.highlight.python figcaption + table::after {
    display: none;
}
.highlight.json > table::after {
    content: "JSON";
}
.highlight.json > figcaption > span::after {
    content: " · JSON";
}
.highlight.json figcaption + table::after {
    display: none;
}
.highlight.swift > table::after {
    content: "Swift";
}
.highlight.swift > figcaption > span::after {
    content: " · Swift";
}
.highlight.swift figcaption + table::after {
    display: none;
}
.highlight.ruby > table::after {
    content: "Ruby";
}
.highlight.ruby > figcaption > span::after {
    content: " · Ruby";
}
.highlight.ruby figcaption + table::after {
    display: none;
}
.highlight.php > table::after {
    content: "PHP";
}
.highlight.php > figcaption > span::after {
    content: " · PHP";
}
.highlight.php figcaption + table::after {
    display: none;
}
.highlight.c > table::after {
    content: "C";
}
.highlight.c > figcaption > span::after {
    content: " · C";
}
.highlight.c figcaption + table::after {
    display: none;
}
.highlight.cpp > table::after {
    content: "C++";
}
.highlight.cpp > figcaption > span::after {
    content: " · C++";
}
.highlight.cpp figcaption + table::after {
    display: none;
}
.highlight.scheme > table::after {
    content: "Scheme";
}
.highlight.scheme > figcaption > span::after {
    content: " · Scheme";
}
.highlight.scheme figcaption + table::after {
    display: none;
}
.highlight.objectivec > table::after {
    content: "Objective-C";
}
.highlight.objectivec > figcaption > span::after {
    content: " · Objective-C";
}
.highlight.objectivec figcaption + table::after {
    display: none;
}
.highlight.yml > table::after {
    content: "YAML";
}
.highlight.yml > figcaption > span::after {
    content: " · YAML";
}
.highlight.yml figcaption + table::after {
    display: none;
}
.highlight.stylus > table::after {
    content: "Stylus";
}
.highlight.stylus > figcaption > span::after {
    content: " · Stylus";
}
.highlight.stylus figcaption + table::after {
    display: none;
}
.highlight.sql > table::after {
    content: "SQL";
}
.highlight.sql > figcaption > span::after {
    content: " · SQL";
}
.highlight.sql figcaption + table::after {
    display: none;
}
.highlight.http > table::after {
    content: "HTTP";
}
.highlight.http > figcaption > span::after {
    content: " · HTTP";
}
.highlight.http figcaption + table::after {
    display: none;
}
.highlight.go > table::after {
    content: "Go";
}
.highlight.go > figcaption > span::after {
    content: " · Go";
}
.highlight.go figcaption + table::after {
    display: none;
}
.highlight figcaption {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 2px 7px;
    font-size: 13px;
    font-weight: bold;
    color: #b1b1b1;
    background: #e0e0e0;
    z-index: 20;
    overflow-x: hidden;
    box-sizing: border-box;
}
.highlight figcaption > a {
    position: absolute;
    right: 0;
    display: inline-box;
    margin-right: 7px;
    font-weight: 400;
}
.highlight figcaption > a:hover {
    text-decoration: none;
    border: 0;
}
.highlight .code pre {
    margin: 0;
    padding: 30px 10px 10px;
}
.highlight .gutter {
    width: 10px;
    color: #cacaca;
}
.highlight .gutter pre {
    margin: 0;
    padding: 30px 7px 10px;
}
.highlight .line {
    height: 20px;
}
.highlight table, .highlight tr, .highlight td {
    margin: 0;
    padding: 0;
    width: 100%;
    border-collapse: collapse;
}
.highlight .code .comment,
.highlight .code .quote {
    color: #93a1a1;
}
.highlight .code .keyword,
.highlight .code .selector-tag,
.highlight .code .addition {
    color: #859900;
}
.highlight .code .number,
.highlight .code .string,
.highlight .code .meta .meta-string,
.highlight .code .literal,
.highlight .code .doctag,
.highlight .code .regexp {
    color: #2aa198;
}
.highlight .code .title,
.highlight .code .section,
.highlight .code .name,
.highlight .code .selector-id,
.highlight .code .selector-class {
    color: #268bd2;
}
.highlight .code .attribute,
.highlight .code .attr,
.highlight .code .variable,
.highlight .code .template-variable,
.highlight .code .class .title,
.highlight .code .type {
    color: #b58900;
}
.highlight .code .symbol,
.highlight .code .bullet,
.highlight .code .subst,
.highlight .code .meta,
.highlight .code .meta .keyword,
.highlight .code .selector-attr,
.highlight .code .selector-pseudo,
.highlight .code .link {
    color: #cb4b16;
}
.highlight .code .built_in,
.highlight .code .deletion {
    color: #dc322f;
}

.pagination {
    margin: 0 auto;
    font-weight: bold;
}
.pagination i {
    font-size: 24px;
    vertical-align: sub;
}
.pagination .next-post,
.pagination .next {
    float: right;
    color: #34495e;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
}
.pagination .next-post:hover,
.pagination .next:hover {
    color: #f6695f;
    transform: translateX(5px);
}
.pagination .prev-post,
.pagination .prev {
    float: left;
    color: #34495e;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
}
.pagination .prev-post:hover,
.pagination .prev:hover {
    color: #f6695f;
    transform: translateX(-5px);
}

#valine_thread {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 10px 20px 20px;
    margin: 20px 0;
}
#valine_thread .v_name {
    font-weight: bold;
}
#valine_thread .vwrap {
    padding: 0 10px 10px;
    border: 1px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#valine_thread input {
    border-bottom-width: 2px;
    border-color: #0099cc;
    text-align: center;
}
#valine_thread input:focus {
    border-color: #f6695f;
}
#valine_thread .veditor {
    min-height: 8rem;
}
#valine_thread textarea {
    font-family: Athelas, STHeiti, Microsoft Yahei, serif;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 2px;
}
#valine_thread textarea:focus {
    border-color: #2188ff;
    box-shadow: 0 0 0 0.2em rgba(3, 102, 214, 0.3), inset 0 1px 2px rgba(27, 31, 35, 0.075);
}
#valine_thread button.vsubmit.vbtn {
    font-weight: bold;
    border-radius: 3px;
    background: #33b1ff;
    color: #fff;
    border-color: #33b1ff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.1s;
}
#valine_thread button.vsubmit.vbtn:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

#disqus_thread {
    margin-bottom: 30px;
}

footer {
    height: 170px;
    background: #34495e;
    text-align: center;
    color: #fff;
    font-size: 16px;
    display: none;
}
footer .social-links a i {
    display: inline-block;
    margin: 10px;
    color: #fff;
    font-size: 30px;
    transition: color 0.3s;
}
footer .social-links a i:hover {
    color: #f6695f;
}
footer .quote p {
    margin: 0 20px;
}
footer .quote p:before {
    content: "“";
    font-size: 45px;
    font-family: "黑体";
    display: inline-block;
    color: #ff665f;
    margin-top: -45px;
}
footer .copyright {
    font-size: 12px;
    color: #aaa;
    margin: 0;
}
footer .copyright p {
    margin: 10px 0 0;
}
footer .copyright a {
    color: #0099cc;
    text-decoration: none;
}
footer .copyright a:hover {
    text-decoration: underline;
}

.back-to-top {
    text-align: center;
    display: none;
    position: fixed;
    right: 80px;
    bottom: 40px;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-out;
    z-index: 10;
    cursor: pointer;
}
.back-to-top:hover {
    transform: translateY(-5px);
}
.back-to-top i {
    display: inline-block;
    margin-top: -6px;
    font-size: 35px;
}

.archives-container {
    min-height: 400px;
    padding: 30px 40px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.archives-container .archive-year {
    line-height: 1;
    font-size: 30px;
    margin: 10px 10px 15px;
    color: #34495e;
}
.archives-container .archive-article {
    display: block;
    text-decoration: none;
    padding: 10px;
    transition: all 0.3s;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.archives-container .archive-article .archive-meta {
    color: #8a8a8a;
}
.archives-container .archive-article .archive-title {
    color: #34495e;
    font-size: 20px;
    padding-left: 20px;
}
.archives-container .archive-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px #eaeaea;
    border-color: #f6695f;
}
.archives-container .archive-article:hover .archive-title {
    color: #f6695f;
}

.tags-container {
    font-size: 18px;
    min-height: 400px;
    padding: 30px 40px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.tags-container .tags-title {
    text-align: center;
    border-left: 2px solid #f6695f;
}
.tags-container .tags-content {
    margin: 40px 0 0;
    text-align: center;
}
.tags-container .tags-content a {
    text-decoration: none;
    margin: 5px;
    transition: color 0.3s;
}
.tags-container .tags-content a:hover {
    color: #f6695f;
}

.category-container .category-meta {
    font-size: 18px;
    text-align: center;
    border-left: 2px solid #f6695f;
}
.category-container ul {
    border-left: 1px dashed #aaa;
    margin-left: 60px;
    margin-top: 40px;
    padding: 0;
    position: relative;
}
.category-container ul::before {
    position: absolute;
    top: -10px;
    left: -6px;
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #555;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}
.category-container ul::after {
    position: absolute;
    bottom: -10px;
    left: -6px;
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #555;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}
.category-container ul li {
    font-size: 20px;
    list-style: none;
}
.category-container ul li:before {
    content: "";
    display: inline-block;
    width: 20%;
    border: 1px dashed transparent;
    border-top-color: #aaa;
}
.category-container ul li a.category-item {
    display: inline-block;
    text-decoration: none;
    margin: 5px 0;
    transition: color 0.3s;
}
.category-container ul li a.category-item i {
    font-size: 26px;
}
.category-container ul li a.category-item:hover {
    color: #f6695f;
}
.category-container a.category-item span {
    font-size: 16px;
    color: #8a8a8a;
}
.category-container .category-item-name {
    margin: 0 0 20px;
    font-weight: normal;
    line-height: 1;
    padding-left: 20px;
    color: #9d9d9d;
}
.category-container .category-item-name i {
    font-size: 26px;
}
.category-container .category-item a {
    display: block;
    text-decoration: none;
    padding: 10px;
    transition: all 0.3s;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.category-container .category-item a time {
    color: #8a8a8a;
}
.category-container .category-item a .category-title {
    color: #34495e;
    font-size: 20px;
    padding-left: 20px;
}
.category-container .category-item a:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px #eaeaea;
    border-color: #f6695f;
}
.category-container .category-item a:hover .category-title {
    color: #f6695f;
}

/*=====responsive======*/
@media only screen and (min-width: 800px) {
    header.site-nav {
        display: block;
    }

    .post .mobile-post-title {
        display: none;
    }
}
@media only screen and (max-width: 1440px) {
    .post-toc {
        display: none;
    }
}
@media only screen and (max-width: 800px) {
    html,
    body {
        height: auto;
    }

    .page > .container {
        padding-bottom: 190px;
    }

    .mobile-header {
        display: block;
    }

    header.site-nav {
        display: none;
    }

    .banner .show {
        display: none;
    }

    main {
        margin: 60px 16px 10px;
    }

    .post .mobile-post-tilte {
        display: block;
    }

    .back-to-top {
        right: 20px;
        bottom: 50px;
    }

    article#post-excerpt header h1 {
        font-size: 22px;
        font-weight: bold;
        margin: 0;
    }
    article#post-excerpt header .post-meta {
        margin-bottom: 0;
    }
    article#post-excerpt .post-tags a {
        padding: 0;
    }

    article.post {
        padding: 10px;
    }
    article.post .mobile-post-title > h1 {
        border-left: 3px solid #34495e;
        margin: -10px 0 0 -10px;
        padding: 12px 0 12px 10px;
    }
    article.post .post-meta .post-time {
        font-size: 14px;
        margin-bottom: 0;
        font-weight: normal;
        color: #8a8a8a;
    }
    article.post .post-meta .post-time i {
        font-weight: normal;
    }
    article.post #read-more {
        margin: 5px 0;
    }
    article.post #read-more a {
        font-size: 14px;
        padding: 3px;
    }
    article.post h1 {
        font-size: 21px;
        margin: 10px 0;
    }
    article.post h2 {
        font-size: 19px;
        margin: 10px 0;
    }
    article.post h3 {
        font-size: 17px;
        margin: 10px 0;
    }
    article.post h4 {
        font-size: 16px;
        margin: 10px 0;
    }
    article.post h5 {
        font-size: 16px;
        margin: 10px 0;
    }
    article.post h6 {
        font-size: 15px;
        margin: 10px 0;
    }
    article.post p {
        font-size: 16px;
        margin: 10px 0;
    }

    .archives-container {
        min-height: 400px;
        padding: 15px 20px 30px;
    }
    .archives-container .archive-year {
        font-size: 24px;
        padding: 0 10px;
        margin: 15px 0 5px 10px;
        border-left: 2px solid #f6695f;
    }
    .archives-container .archive-article {
        padding: 5px;
    }
    .archives-container .archive-article .archive-title {
        font-size: 16px;
        padding-left: 10px;
    }
    .archives-container .archive-article .archive-meta {
        font-size: 12px;
    }

    .category-container {
        padding: 30px 20px;
    }
    .category-container ul {
        margin-left: 20px;
    }
    .category-container ul li a.category-item {
        font-size: 16px;
    }
    .category-container ul li a.category-item i {
        font-size: 22px;
    }
    .category-container a.category-item span {
        font-size: 14px;
    }
    .category-container .category-item a {
        padding: 5px;
    }
    .category-container .category-item a .category-title {
        font-size: 16px;
    }
    .category-container .category-item a time {
        font-size: 12px;
    }
    .category-container .category-item-name {
        border-left: 2px solid #f6695f;
    }

    .tags-container {
        min-height: 400px;
        padding: 30px 20px;
    }
    .tags-container .tags-content {
        margin-top: 20px;
    }

    .pagination.post-nav {
        margin: 0 16px;
    }
    .pagination.post-nav a {
        text-decoration: none;
    }
    .pagination.post-nav .next-post {
        float: none;
        display: block;
        color: #0099cc;
    }
    .pagination.post-nav .prev-post {
        float: none;
        display: block;
        color: #0099cc;
    }

    footer .social-links a i {
        margin: 0 10px;
    }
    footer .quote {
        font-size: 14px;
    }
    footer .quote p:before {
        font-size: 35px;
        margin-top: -35px;
    }
    footer .copyright {
        font-size: 12px;
        margin-top: 10px;
    }
    footer .copyright p {
        margin: 0;
    }
}