body {

width: 100%;

}

body:after {

content: "";

display: table;

}

body:after {

clear: both;

}

td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-family: inherit;

font-size: 100%;

vertical-align: baseline;

}

body {

line-height: 1;

color: #000;

background: #fff;

}

ul {

list-style: none;

}

table {

border-collapse: separate;

border-spacing: 0;

vertical-align: middle;

}

td {

text-align: left;

font-weight: normal;

vertical-align: middle;

}

a img {

border: none;

}

button {

margin: 0;

padding: 0;

}

input::-moz-focus-inner,

button::-moz-focus-inner {

border: 0;

padding: 0;

}

@font-face {

font-family: "微软雅黑";

font-style: normal;

font-weight: normal;

src: url("fonts/fontawesome-webfont.eot?v=#4.0.3");

src: url("fonts/fontawesome-webfont.eot?#iefix&v=#4.0.3") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff?v=#4.0.3") format("woff"), url("fonts/fontawesome-webfont.ttf?v=#4.0.3") format("truetype"), url("fonts/fontawesome-webfont.svg#fontawesomeregular?v=#4.0.3") format("svg");

}

body {

height: 100%;

}

body {

background: #fff;

font: 14px Arial, Helvetica, sans-serif, "Hiragino Sans GB", "Hiragino Sans GB W3", Microsoft JhengHei;

-webkit-text-size-adjust: 100%;

text-rendering: optimizelegibility;

}

.article-entry h2,

.article-entry h3,

.article-entry h4,

.article-entry h5,

.article-entry h6 {

color: #16171b;

}

#rocket {

position: fixed;

right: 50px;

bottom: 50px;

display: block;

visibility: hidden;

width: 26px;

height: 48px;

background: url("https://image.ibb.co/d9pvfU/rocket.png") no-repeat 50% 0;

opacity: 0;

-webkit-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);

-moz-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);

-webkit-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);

-moz-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);

-ms-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -ms-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);

transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);

}

@media screen and (max-width: 479px) {

#rocket {

right: 12px;

bottom: 20px;

}

}

#rocket #rocket i {

display: block;

margin-top: 48px;

height: 14px;

background: url("https://image.ibb.co/d9pvfU/rocket.png") no-repeat 50% -48px;

opacity: 0.5;

-webkit-transition: -webkit-transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-webkit-transition: -webkit-transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-ms-transition: -ms-transform 0.2s;

transition: transform 0.2s;

-webkit-transform-origin: 50% 0;

-moz-transform-origin: 50% 0;

-webkit-transform-origin: 50% 0;

-moz-transform-origin: 50% 0;

-ms-transform-origin: 50% 0;

transform-origin: 50% 0;

}

#rocket:hover {

background-position: 50% -62px;

}

#rocket:hover i {

background-position: 50% 100%;

-webkit-animation: flaming 0.7s infinite;

-moz-animation: flaming 0.7s infinite;

-webkit-animation: flaming 0.7s infinite;

-moz-animation: flaming 0.7s infinite;

-ms-animation: flaming 0.7s infinite;

animation: flaming 0.7s infinite;

}

#rocket.show {

visibility: visible;

opacity: 1;

}

#rocket.launch {

background-position: 50% -62px;

opacity: 0;

-webkit-transform: translateY(-500px);

-moz-transform: translateY(-500px);

-ms-transform: translateY(-500px);

-webkit-transform: translateY(-500px);

-moz-transform: translateY(-500px);

-ms-transform: translateY(-500px);

transform: translateY(-500px);

pointer-events: none;

}

#rocket.launch i {

background-position: 50% 100%;

-webkit-transform: scale(1.4, 3.2);

-moz-transform: scale(1.4, 3.2);

-webkit-transform: scale(1.4, 3.2);

-moz-transform: scale(1.4, 3.2);

-ms-transform: scale(1.4, 3.2);

transform: scale(1.4, 3.2);

}

.outer {

max-width: 1040px;

margin: 40px auto;

padding: 0 20px;

}

.outer:before,

.outer:after {

content: "";

display: table;

}

.outer:after {

clear: both;

}

.inner {

display: inline;

float: left;

width: 98.0392156862745%;

margin: 0 0.980392156862745%;

}

.left,

.alignleft {

float: left;

}

.right,

.alignright {

float: right;

}

.clear {

clear: both;

}

#container {

position: relative;

}

.mobile-nav-on {

overflow: hidden;

}

#wrap {

width: 100%;

top: 0;

left: 0;

-webkit-transition: 0.2s ease-out;

-moz-transition: 0.2s ease-out;

-ms-transition: 0.2s ease-out;

transition: 0.2s ease-out;

z-index: 1;

background: #fff;

}

.mobile-nav-on #wrap {

left: 280px;

}

@media screen and (min-width: 768px) {

#main {

display: inline;

float: left;

width: 64.70588235294117%;

margin: 0 0.980392156862745%;

}

}

.archive-year,

.archive-tag,

.archive-category,

.widget-title {

text-decoration: none;

text-transform: uppercase;

letter-spacing: 2px;

color: #999;

margin-bottom: 1em;

margin-left: 5px;

line-height: 1em;

font-weight: bold;

}

.article-inner {

background: #fff;

border: 1px solid #eef1f8;

border-radius: 3px;

}

.article-inner-night {

background: #1d1e1f;

}

.article-entry h1,

.widget h1 {

font-size: 25px;

}

.article-entry h2,

.widget h2 {

font-size: 23px;

}

.article-entry h3,

.widget h3 {

font-size: 20px;

}

.article-entry h4,

.widget h4 {

font-size: 17px;

}

.article-entry h5,

.widget h5 {

font-size: 1em;

}

.article-entry h6,

.widget h6 {

font-size: 1em;

color: #999;

}

.article-entry hr,

.widget hr {

border: 1px dashed #eef1f8;

}

.article-entry strong,

.widget strong {

font-weight: bold;

}

.article-entry em,

.widget em,

.article-entry cite,

.widget cite {

font-style: italic;

}

.article-entry sup,

.widget sup,

.article-entry sub,

.widget sub {

font-size: 0.75em;

line-height: 0;

position: relative;

vertical-align: baseline;

}

.article-entry sup,

.widget sup {

top: -0.5em;

}

.article-entry sub,

.widget sub {

bottom: -0.2em;

}

.article-entry small,

.widget small {

font-size: 0.85em;

}

.article-entry acronym,

.widget acronym,

.article-entry abbr,

.widget abbr {

border-bottom: 1px dotted;

}

.article-entry ul,

.widget ul,

.article-entry ol,

.widget ol,

.article-entry dl,

.widget dl {

margin: 0 20px;

line-height: 1.6em;

}

.article-entry ul ul,

.widget ul ul,

.article-entry ol ul,

.widget ol ul,

.article-entry ul ol,

.widget ul ol,

.article-entry ol ol,

.widget ol ol {

margin-top: 0;

margin-bottom: 0;

}

.article-entry ul,

.widget ul {

list-style: circle;

}

.article-entry ol,

.widget ol {

list-style: decimal;

}

.article-entry dt,

.widget dt {

font-weight: bold;

}

.article {

color: #555;

margin: 0 0 40px 0;

}

@media screen and (max-width: 479px) {

.article {

width: 100% !important;

}

}

@media screen and (min-width: 480px) and (max-width: 767px) {

.article {

width: 100% !important;

}

}

.article-inner {

overflow: hidden;

border: 0px solid #eef1f8;

}

.article-inner-night {

overflow: hidden;

border: 0px solid #eef1f8;

}

.article-meta {

margin: 7px 0 20px;

color: #999;

font-size: 0.9em;

}

.article-meta:before,

.article-meta:after {

content: "";

display: table;

}

.article-meta:after {

clear: both;

}

.article-date {

color: #999;

text-align: center;

font-weight: normal;

}

.article-date:hover {

color: #ff2828;

}

.article-category {

text-align: center;

line-height: 1em;

color: #ccc;

margin-left: 8px;

}

.article-category:before {

content: "\2022";

}

.article-category-link {

display: inline;

margin: 0;

font-weight: normal;

}

.ico-folder:before {

font-family: "FontAwesome";

content: "\f07c";

color: #333;

}

.article-category-link:hover {

color: #ff2828;

}

.article-header h1 {

margin: 0 0 3px 0;

font-size: 20px;

line-height: 1.2;

}

.article-header h1 a {

color: #404040;

text-decoration: none;

}

.article-title {

text-decoration: none;

font-weight: bold;

color: #555;

line-height: 1.1em;

-webkit-transition: color 0.2s;

-moz-transition: color 0.2s;

-ms-transition: color 0.2s;

transition: color 0.2s;

}

a.article-title:hover {

color: #ff2828;

text-decoration: none;

}

.article-entry {

color: #333;

padding: 0;

}

.article-entry:before,

.article-entry:after {

content: "";

display: table;

}

.article-entry:after {

clear: both;

}

.article-entry p,

.article-entry table {

line-height: 1.6em;

margin: 1.6em 0;

}

.article-entry h1,

.article-entry h2,

.article-entry h3,

.article-entry h4,

.article-entry h5,

.article-entry h6 {

font-weight: bold;

}

.article-entry h1,

.article-entry h2,

.article-entry h3,

.article-entry h4,

.article-entry h5,

.article-entry h6 {

line-height: 1.1em;

margin: 1.1em 0;

}

.article-entry a {

color: color-link;

text-decoration: none;

}

.article-entry a:hover {

color: #ff2828;

text-decoration: none;

}

.article-entry ul,

.article-entry ol,

.article-entry dl {

margin-top: 1.6em;

margin-bottom: 1.6em;

}

.article-entry img,

.article-entry video {

max-width: 100%;

height: auto;

display: block;

margin: auto;

}

.article-entry iframe {

border: none;

}

.article-entry table {

width: 100%;

border-collapse: collapse;

border-spacing: 0;

}

.article-entry th {

font-weight: bold;

border-bottom: 3px solid #eef1f8;

padding-bottom: 0.5em;

}

.article-entry td {

border-bottom: 1px solid #eef1f8;

padding: 10px 0;

}

.article-entry blockquote {

padding: 0.1px 20px;

font-size: 1.1em;

margin: 1.4em 0px;

border-left: 0;

background: #f3f5f9;

}

.article-entry blockquote:before {

float: left;

font-family: "FontAwesome";

content: "\f10d";

margin-left: -0.8em;

}

.article-entry blockquote:after {

float: right;

font-family: "FontAwesome";

content: "\f10e";

margin-right: -0.8em;

margin-top: -1.5em;

}

.article-entry blockquote p {

font-size: 14px;

}

.article-entry blockquote footer {

font-size: 14px;

margin: 1.6em 0;

font-family: -apple-system, "Arial", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

}

.article-entry blockquote footer cite:before {

content: "—";

padding: 0 0.5em;

}

.article-entry .pullquote {

background: transparent;

border-left: 0px;

padding: 10px 25px;

margin: 18px 0;

font-style: italic;

text-align: left;

width: 45%;

margin: 0;

}

.article-entry .pullquote p {

font-family: Georgia, Microsoft JhengHei, "sans serif";

font-size: 19px;

}

.article-entry .pullquote:before {

float: left;

font-family: "FontAwesome";

content: "\f10d";

margin-left: -0.5em;

}

.article-entry .pullquote:after {

float: right;

font-family: "FontAwesome";

content: "\f10e";

margin-right: -0.5em;

margin-top: -1em;

}

.article-entry .pullquote.left {

margin-left: 0.5em;

margin-right: 1em;

}

.article-entry .pullquote.right {

margin-right: 0.5em;

margin-left: 1em;

}

.article-entry .caption {

color: #999;

display: block;

font-size: 0.9em;

margin-top: 0.5em;

position: relative;

text-align: center;

}

.article-entry .video-container {

position: relative;

padding-top: 56.25%;

height: 0;

overflow: hidden;

}

.article-entry .video-container iframe,

.article-entry .video-container object,

.article-entry .video-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

margin-top: 0;

}

.article-more-link {

text-align: center;

}

.article-more-link a {

color: #ff2828;

display: inline-block;

font-size: 0.9em;

line-height: 1em;

text-decoration: none;

-webkit-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.article-more-link a:hover {

color: #333;

text-decoration: none;

}

.article-footer {

font-size: 0.85em;

line-height: 1.6em;

border-top: 1px solid #e6e6e6;

padding-top: 1.6em;

margin: 0 20px 20px;

}

.article-footer:before,

.article-footer:after {

content: "";

display: table;

}

.article-footer:after {

clear: both;

}

.article-footer a {

color: #999;

text-decoration: none;

}

.article-footer a:hover {

color: #333;

}

.article-tag-list {

display: inline-block;

margin: 0;

-webkit-margin-before: 0;

-webkit-margin-after: 0;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-start: 0px;

}

.ico-tags:before {

font-family: "FontAwesome";

content: "\f02c";

color: #333;

margin-left: 20px !important;

}

.article-tag-list-item {

display: inline-block;

margin-right: 8px;

}

.article-comment-link {

float: right;

}

.article-comment-link:before {

content: "\f075";

font-family: FontAwesome;

padding-right: 8px;

}

.article-share-link {

cursor: pointer;

float: right;

margin-left: 20px;

}

.article-share-link:before {

content: "\f064";

font-family: FontAwesome;

padding-right: 6px;

}

#article-nav {

position: relative;

}

#article-nav:after {

content: "";

display: table;

}

#article-nav:after {

clear: both;

}

@media screen and (min-width: 768px) {

#article-nav {

margin: 50px 0;

}

#article-nav:before {

width: 8px;

height: 8px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -4px;

margin-left: -4px;

content: "";

border-radius: 50%;

background: #eef1f8;

-webkit-box-shadow: 0 1px 2px #fff;

box-shadow: 0 1px 2px #fff;

}

}

.article-nav-link-wrap {

text-decoration: none;

color: #999;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin-top: 50px;

text-align: center;

display: block;

}

.article-nav-link-wrap:hover {

color: #333;

}

@media screen and (min-width: 768px) {

.article-nav-link-wrap {

width: 50%;

margin-top: 0;

}

}

@media screen and (min-width: 768px) {

#article-nav-newer {

float: left;

text-align: right;

padding-right: 20px;

}

}

@media screen and (min-width: 768px) {

#article-nav-older {

float: right;

text-align: left;

padding-left: 20px;

}

}

.article-nav-caption {

text-transform: uppercase;

letter-spacing: 2px;

color: #eef1f8;

line-height: 1em;

font-weight: bold;

}

#article-nav-newer .article-nav-caption {

margin-right: -2px;

}

.article-nav-title {

font-size: 0.85em;

line-height: 1.6em;

margin-top: 0.5em;

}

.article-share-box {

position: absolute;

display: none;

background: #fff;

-webkit-box-shadow: 1px 2px 10px rgba(0,0,0,0.2);

box-shadow: 1px 2px 10px rgba(0,0,0,0.2);

border-radius: 3px;

margin-left: -145px;

overflow: hidden;

z-index: 1;

}

.article-share-box.on {

display: block;

}

.article-share-input {

width: 100%;

background: none;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

font: 14px -apple-system, "Arial", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

padding: 0 15px;

color: #333;

outline: none;

border: 1px solid #eef1f8;

border-radius: 3px 3px 0 0;

height: 36px;

line-height: 36px;

}

.article-share-links {

background: #fff;

}

.article-share-links:before,

.article-share-links:after {

content: "";

display: table;

}

.article-share-links:after {

clear: both;

}

.article-share-twitter,

.article-share-facebook,

.article-share-pinterest,

.article-share-google {

width: 50px;

height: 36px;

display: block;

float: left;

position: relative;

color: #999;

}

.article-share-twitter:before,

.article-share-facebook:before,

.article-share-pinterest:before,

.article-share-google:before {

font-size: 20px;

font-family: FontAwesome;

width: 20px;

height: 20px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -10px;

margin-left: -10px;

text-align: center;

}

.article-share-twitter:hover,

.article-share-facebook:hover,

.article-share-pinterest:hover,

.article-share-google:hover {

color: #fff;

}

.article-share-twitter:before {

content: "\f099";

}

.article-share-twitter:hover {

background: color-twitter;

}

.article-share-facebook:before {

content: "\f09a";

}

.article-share-facebook:hover {

background: color-facebook;

}

.article-share-pinterest:before {

content: "\f0d2";

}

.article-share-pinterest:hover {

background: color-pinterest;

}

.article-share-google:before {

content: "\f0d5";

}

.article-share-google:hover {

background: color-google;

}

.article-gallery {

background: transparent;

position: relative;

margin-bottom: 40px;

}

.article-gallery-photos {

position: relative;

overflow: hidden;

}

.article-gallery-img {

display: none;

max-width: 100%;

}

.article-gallery-img:first-child {

display: block;

}

.article-gallery-img.loaded {

position: absolute;

display: block;

}

.article-gallery-img img {

display: block;

max-width: 100%;

margin: 0 auto;

}

.toc-article {

position: absolute;

border-left: rgba(88,88,88,0.1) 1px solid;

padding: 1em 1em 0 1em;

margin-left: 1em;

}

.toc-title {

font-size: 120%;

}

.toc-title:before {

font-family: "FontAwesome";

content: "\f0ca";

margin-right: 0.5em;

}

#toc {

width: inherit;

line-height: 1em;

font-size: 0.9em;

float: left;

overflow: hidden;

}

@media screen and (max-width: 479px) {

#toc {

display: none;

}

}

@media screen and (min-width: 480px) and (max-width: 767px) {

#toc {

display: none;

}

}

.toc-fixed {

position: fixed;

top: 30px;

margin-top: 0;

max-height: 81%;

overflow: hidden;

z-index: 1;

}

.nav {

padding: 0;

margin: 1em;

line-height: 1.8em;

}

.nav li a:hover,

.nav list-style-type none a:hover {

background-color: transparent !important;

}

.nav .active > a {

color: #ff2828;

}

.nav-link {

font-family: "futura-pt", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", Microsoft JhengHei, WenQuanYi Micro Hei, "Microsoft YaHei", sans-serif;

color: color-link;

padding: 1px !important;

}

.nav-link:hover {

color: #ff2828;

}

.nav-child {

margin-left: 1em;

}

#comments {

padding: 20px;

margin: 50px 0;

}

#comments a {

color: color-link;

}

.archives-wrap {

margin: 50px 0;

}

.archives {

margin-left: 2em;

}

.archives:before,

.archives:after {

content: "";

display: table;

}