@font-face {
	font-family: remixicon;
	src: url(https://cdn.jsdelivr.net/npm/remixicon@2.1.0/fonts/remixicon.eot);
	src: url(https://cdn.jsdelivr.net/npm/remixicon@2.1.0/fonts/remixicon.eot#iefix) format("embedded-opentype"), url(https://cdn.jsdelivr.net/npm/remixicon@2.1.0/fonts/remixicon.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/remixicon@2.1.0/fonts/remixicon.woff) format("woff"), url(https://cdn.jsdelivr.net/npm/remixicon@2.1.0/fonts/remixicon.ttf) format("truetype"), url(https://cdn.jsdelivr.net/npm/remixicon@2.1.0/fonts/remixicon.svg#remixicon) format("svg");
	font-display: swap
}

[class*=" ri-"],
[class^=ri-] {
	display: inline-block;
	font-family: remixicon!important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

html {
	line-height: 1.15
}

h1 {
	font-size: 30px
}

h2 {
	font-size: 28px
}

h3 {
	font-size: 26px
}

h4 {
	font-size: 24px
}

h5 {
	font-size: 21px
}

h6 {
	font-size: 18px
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	-webkit-text-decoration: underline;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
	-webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
	border-style: none;
	padding: 0
}

[type=button]-moz-focusring,
[type=reset]-moz-focusring,
[type=submit]-moz-focusring,
button:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

[hidden],
template {
	display: none
}

*,
:after,
:before {
	box-sizing: border-box
}

body,
html {
	height: 100%
}

html {
	font-size: 62.5%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent
}

body,
html {
	-webkit-text-size-adjust: 100%
}

body {
	position: relative;
	background-color: #fff;
	font-family: ff-tisa-web-pro-1,ff-tisa-web-pro-2,lucida grande,hiragino sans gb,hiragino sans gb w3,microsoft yahei,wenquanyi micro hei,sans-serif;
        font-weight: lighter;
	font-size: 1.4rem;
	line-height: 1.7;
	color: #403e3e;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%
}

body.darkmode {
	background: rgba(0, 0, 0, .6)
}

body.darkmode * {
	color: #f2f2f2
}

body.darkmode .article-entry code {
	background: #c7c7c7!important;
	color: #c7254e!important
}

body.darkmode .archive-article-date,
body.darkmode .archive-year-wrap .archive-year,
body.darkmode .article-category .article-category-link,
body.darkmode .article-date,
body.darkmode .article-header .article-title,
body.darkmode .article-tag-list:before,
body.darkmode .category-list .category-list-item i,
body.darkmode .category-list a:hover .category-list-item,
body.darkmode .share-outer i,
body.darkmode .tag-list>.tag-list-item:before,
body.darkmode a.toc-link {
	color: #e6e6e6!important
}

body.darkmode #reward .reward-p,
body.darkmode #reward .reward-p i,
body.darkmode .float_btns i,
body.darkmode .local-search-input,
body.darkmode .share-icons a i {
	color: #7a7a7a!important
}

body.darkmode .is-position-fixed {
	background-color: transparent
}

body.darkmode .v * {
	color: #555!important
}

body.darkmode .article-tag-list .article-tag-list-link,
body.darkmode .tag-list>.tag-list-item .tag-list-link {
	background: #e6e6e6!important;
	color: #555!important
}

body.darkmode #vcomments-box #vcomments {
	background-color: hsla(0, 0%, 100%, .1)!important
}

body.darkmode #vcomments-box #vcomments * {
	color: #f1f1f1!important
}

body.darkmode .v .vbtn {
	background-color: transparent!important
}

body.darkmode .v .vlist .vcard .vhead .vsys {
	border: 1px solid #f1f1f1!important;
	background-color: transparent!important
}

body.darkmode input::-webkit-input-placeholder {
	color: #ccc
}

body.darkmode input::-moz-input-placeholder {
	color: #ccc
}

body.darkmode input::-ms-input-placeholder {
	color: #ccc
}

body.darkmode .categories-box a {
	color: #f2f2f2
}

body.darkmode #friends_link .friends_li a {
	background-color: hsla(0, 0%, 100%, .15);
	color: #fff
}

a {
	color: #0681d0
}

a:hover {
	color: #19a1f8
}

a:active {
	color: #067bc6
}

a.disabled {
	color: #adb5bd
}

dir,
menu,
ul {
	margin: 0;
	padding: 0
}

img {
	max-width: 100%
}

button {
	outline: 0;
	cursor: pointer
}

.archive-article-date,
.archive-year-wrap .archive-year,
.article-category .article-category-link,
.article-date {
	text-decoration: none;
	color: #5c6b72
}

.archive-article-date:hover,
.archive-year-wrap .archive-year:hover,
.article-category .article-category-link:hover,
.article-date:hover {
	color: #5c6b72
}

.archive-article-inner {
	border-radius: 4px
}

.article-entry h1,
.article-entry h2,
.article-entry h3,
.article-entry h4,
.article-entry h5,
.article-entry h6 {
	margin: 2.5rem 0 1.5rem
}

.article-entry hr {
	height: .1rem;
	background-color: #999;
	border: none;
	padding: 0;
	margin: 1.5rem 0
}

.article-entry strong {
	font-weight: 700
}

.article-entry cite,
.article-entry em {
	font-style: italic
}

.article-entry sub,
.article-entry sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

.article-entry sup {
	top: -.5rem
}

.article-entry sub {
	bottom: -.25rem
}

.article-entry small {
	font-size: 85%
}

.article-entry abbr,
.article-entry acronym {
	border-bottom: .1rem dotted #999
}

.article-entry dl,
.article-entry ol,
.article-entry ul {
	margin: 1.5rem 0 1.5rem 2rem
}

.article-entry blockquote,
.article-entry p,
.article-entry table {
	margin: 1.5rem 0
}

.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%;
	max-width: 70rem;
	border: 1px solid #dedede;
	margin: 15px auto;
	border-collapse: collapse;
	empty-cells: show
}

.article-entry table td,
.article-entry table th {
	border: 1px solid #dedede;
	padding: 5px 10px
}

.article-entry table th {
	font-weight: 700;
	text-align: center!important;
	background: rgba(158, 188, 226, .2);
	white-space: nowrap
}

.article-entry table td:first-child {
	white-space: nowrap
}

.article-entry blockquote {
	display: block;
	padding: 0 1.5rem;
	width: 100%;
	overflow: auto;
	border-left: .3rem solid #cce5ff;
	color: #5c6b72
}

.article-entry blockquote>:first-child {
	margin-top: 0
}

.article-entry blockquote>:last-child {
	margin-bottom: 0
}

.article-entry blockquote footer cite:before {
	content: "—";
	padding: 0 .5rem
}

#app {
	height: 100%;
	width: 100%;
	overflow: hidden
}

#app,
.cover {
	position: relative
}

.cover {
	padding: 0;
	margin-bottom: 3rem;
	text-align: center
}

.cover .forkMe {
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0
}

.content.anim,
.sidebar.anim {
	transition: all .3s ease-in-out
}

.content {
	position: relative;
	z-index: 1;
	margin-left: 0;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch
}

.content.on {
	margin-left: 0!important
}

.sidebar {
	position: fixed;
	z-index: 9;
	left: -8rem;
	bottom: 0;
	width: 8rem;
	height: 100%;
	background-color: rgba(0, 0, 0, .8)
}

.sidebar.on {
	left: 0
}

.navbar-toggle {
	position: absolute;
	top: 1.5rem;
	left: 9.5rem;
	border: none;
	height: 4rem;
	width: 4rem;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .5);
	color: #fff;
	transition: all .3s ease-in-out;
	opacity: .5
}

.navbar-toggle:hover {
	opacity: 1
}

.navbar-toggle:before {
	content: "\ee09";
	font-family: remixicon;
	font-size: larger
}

.outer,
.wrap {
	position: relative;
	width: 100%;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	margin: auto;
	min-height: calc(100% - 157px)
}

.outer:after,
.outer:before,
.wrap:after,
.wrap:before {
	content: "";
	display: table;
	clear: both
}

.local-search {
	width: 100%
}

#main {
	position: relative
}

@media (min-width:768px) {
	.cover {
		margin-bottom: 0;
		height: 100%
	}
	.outer,
	.wrap {
		width: 70rem;
		padding-right: 0;
		padding-left: 0
	}
	.local-search {
		width: 70rem
	}
	.content.on {
		transform: none
	}
}

@media (max-width:768px) {
	.cover .forkMe {
		display: none
	}
	.content.on {
		margin-left: -1px!important
	}
	.sidebar {
		background-color: #403e3e
	}
	.navbar-toggle {
		transform: scale(1.1)
	}
}

.list-unstyled {
	list-style: none;
	padding-left: 0;
	margin-left: 0
}

.categories-box {
	max-width: 320px;
	margin-right: -.5rem;
	margin-left: -.5rem;
	border-left: 1px solid #eee
}

.categories-box span {
	padding-left: 5px;
	color: #aaa;
	font-size: 14px
}

.categories-box ol li,
.categories-box ul li {
	list-style: none;
	margin: 15px 0;
	padding-left: 15px;
	padding-bottom: 12px;
	font-size: 16px;
	font-weight: 500;
	word-wrap: break-word;
	border-bottom: 1px solid #eee
}

.categories-box ol li:last-child,
.categories-box ul li:last-child {
	margin-bottom: 0;
	border-bottom: 0 solid #000
}

.categories-box ol li i,
.categories-box ul li i {
	font-style: normal;
	margin-left: 10px;
	color: #007cfc
}

.categories-box a {
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	color: #403e3e
}

.categories-box a:hover {
	opacity: .8
}

.categories-box a:before {
	content: "\efde";
	font-family: remixicon;
	margin-right: .5rem;
	display: inline-block;
	vertical-align: middle
}

.categories-box ol ol,
.categories-box ol ul,
.categories-box ul ol,
.categories-box ul ul {
	list-style: none;
	padding-left: 0;
	margin: 0 20px
}

.categories-box ol ol li,
.categories-box ol ul li,
.categories-box ul ol li,
.categories-box ul ul li {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	border: none;
	padding-bottom: 0
}

.archive-list-count:before,
.category-list-count:before,
.tag-list-count:before {
	content: "("
}

.archive-list-count:after,
.category-list-count:after,
.tag-list-count:after {
	content: ")"
}

.tag-list {
	list-style: none;
	padding-left: 0;
	margin-right: -.5rem;
	margin-left: -.5rem
}

.tag-list>.tag-list-item {
	display: inline-block;
	padding: .5rem 1rem;
	font-size: 120%
}

.tag-list>.tag-list-item:before {
	content: "\eec3";
	font-family: remixicon;
	margin-right: .5rem;
	display: inline-block;
	vertical-align: middle;
	color: #5d5a5a
}

.tag-list>.tag-list-item .tag-list-link {
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	height: 30px;
	line-height: 30px;
	padding: 0 15px;
	font-size: 1.5rem;
	border-radius: 15px;
	background-color: #5d5a5a;
	color: #fff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .12);
	transition: .2s
}

.tag-list>.tag-list-item .tag-list-link:hover {
	transform: scale(1.1)
}

.cover-frame {
	position: relative;
	min-width: 100%;
	height: 100vh
}

.cover-frame .bg-box {
	width: 100%;
	height: 100%
}

.cover-frame .bg-box>img {
	display: block;
	width: 100vw;
	height: 100vh;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center center;
	object-position: center center
}

.cover-inner {
	margin-top: 10%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%)
}

.cover-inner h1 {
	font-size: 7rem;
	margin: 0;
	opacity: .95
}

.cover-inner #subtitle-box,
.cover-inner h1 {
	font-family: ff-tisa-web-pro-1,ff-tisa-web-pro-2,lucida grande,hiragino sans gb,hiragino sans gb w3,microsoft yahei,wenquanyi micro hei,sans-serif;
        font-weight: lighter;
}

.cover-inner #subtitle-box {
	font-size: 2rem;
	margin: .5rem 0 1.5rem
}

.cover-inner,
.cover-inner a {
	color: #fff;
	text-decoration: none
}

.cover-inner img,
.cover-inner video {
	position: relative
}

.cover-inner .cover-logo {
	width: 18rem
}

.cover-learn-more {
	position: absolute;
	z-index: 1;
	bottom: 10px;
	left: 0;
	width: 100%
}

.cover-learn-more a>i {
	font-size: 3rem;
	color: #fff;
	-webkit-animation: down 1s linear infinite;
	animation: down 1s linear infinite
}

.cover-learn-more a>i:hover {
	color: #1e3e3f
}

.float_btns {
	position: sticky;
	bottom: 10rem;
	right: 50px;
	z-index: 9996;
	text-align: center;
	transform: scale(1.2);
	width: 50px;
	float: right
}

#mask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	z-index: 9998;
	display: none
}

.word_count {
	margin-top: 5px;
	color: #717f8c;
	padding-bottom: 1rem;
	border-bottom: 1px solid #efefef
}

@media (max-width:768px) {
	.cover-inner {
		transform: translate(-50%, -70%);
		width: 100%
	}
	.cover-inner h1 {
		font-size: 4.5rem
	}
	.cover-inner #subtitle-box {
		font-size: 2rem
	}
	.float_btns {
		right: 10px
	}
}

@-webkit-keyframes down {
	0% {
		margin-bottom: 0;
		opacity: 1
	}
	to {
		margin-bottom: -15px;
		opacity: .1
	}
}

@keyframes down {
	0% {
		margin-bottom: 0;
		opacity: 1
	}
	to {
		margin-bottom: -15px;
		opacity: .1
	}
}

.search-form-wrap {
	width: 100%;
	position: fixed;
	top: -100%;
	right: 8rem;
	left: 0;
	opacity: 0;
	transition: .3s
}

.search-form-wrap.on {
	top: 0;
	opacity: 1
}

.local-search {
	position: relative;
	margin: 0 auto;
	padding: 1rem 3rem;
	background-color: rgba(64, 62, 62, .9);
	box-shadow: 0 1rem 3rem rgba(30, 62, 63, .05);
	max-height: 100vh;
	overflow-y: auto
}

.local-search-input {
	font-size: 120%;
	border: 0;
	border-radius: .4rem;
	width: 100%;
	padding: 1rem 1.5rem;
	outline: none
}

.local-search-input::-webkit-search-cancel-button,
.local-search-input::-webkit-search-results-decoration {
	-webkit-appearance: none
}

.local-search-close {
	position: absolute;
	top: 1.85rem;
	right: 4.25rem;
	display: block;
	height: 2rem;
	width: 2rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	cursor: pointer
}

.local-search-close:before {
	font-size: 150%;
	content: "\eb52";
	font-family: remixicon
}

.local-search-result {
	text-align: left
}

.search-result-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0
}

.search-result-list li {
	padding: 1.5rem 0
}

.search-result-list li:not(:last-child) {
	border-bottom: .1rem solid #999
}

.search-result-list li .search-result-title {
	font-size: 1.6rem;
	font-weight: 700
}

.search-result-list li .search-result {
	color: #fff;
	padding-top: .5rem;
	margin: 0;
	max-height: 12rem;
	overflow: hidden
}

.search-result-list li em.search-keyword {
	font-style: normal;
	color: #0681d0
}

.search-result-empty {
	padding: 2.6rem 0 0;
	color: #fff
}

.search-result-empty p {
	text-align: center
}

.article {
	padding: 5rem 0 3rem;
	font-size: 110%
}

.article .sea-center {
	text-align: center;
	color: #000
}

.article .sea-center:after {
	border-bottom: 2px dashed #cce5ff;
	content: "";
	width: 100px;
	display: block;
	margin: .2em auto 0;
	height: 2px
}

.article-topping {
	display: inline-block;
	margin-left: 10px;
	padding: 0 10px;
	border-radius: 4px;
	font-style: normal;
	font-size: 12px;
	background-color: #ea434a;
	color: #fff;
	height: 22px;
	line-height: 24px;
	transform: translateY(-8px)
}

.article-meta:after,
.article-meta:before {
	content: "";
	display: table;
	clear: both
}

.article-date:before {
	content: "\eaf2";
	margin-right: .15rem;
	font-family: remixicon;
	opacity: .5
}

.article-category {
	display: inline-block;
	margin-left: 1.5rem
}

.article-category:before {
	content: "\efde";
	font-family: remixicon;
	margin-right: .15rem;
	opacity: .6
}

.archive-article-header+.article-category {
	margin-left: 0
}

.article-entry {
	font-size: 103%;
	margin-top: .5rem;
	line-height: 1.6;
	color: #242323
}

.article-entry:after,
.article-entry:before {
	content: "";
	display: table;
	clear: both
}

.article-entry .pullquote {
	text-align: left;
	width: 45%;
	margin: 0
}

.article-entry .pullquote.left {
	margin-left: .5em;
	margin-right: 1em
}

.article-entry .pullquote.right {
	margin-right: .5em;
	margin-left: 1em
}

.article-entry .caption {
	color: #5c5c5c;
	display: block;
	font-size: .9em;
	margin-top: .5em;
	position: relative;
	text-align: center
}

.article-entry .video-container {
	position: relative;
	padding-top: 56.25%;
	height: 0;
	overflow: hidden
}

.article-entry .video-container embed,
.article-entry .video-container iframe,
.article-entry .video-container object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 0
}

.article-header {
	position: relative
}

.article-header h1,
.article-header h2 {
	margin: 0
}

.article-header .article-title {
	font-size: 34px;
	font-weight: 700;
	border-left: 4px solid #403e3e
}

.article-header .article-author,
.article-header .article-title {
	display: block;
	margin-bottom: 3rem;
	text-decoration: none;
	color: #403e3e;
	padding-left: 2rem
}

.article-header .article-author {
	font-size: 20px
}

.article-footer:after,
.article-footer:before {
	content: "";
	display: table;
	clear: both
}

.declare {
	margin: 0 0 1rem;
	padding-bottom: 1rem;
	color: #999;
	border-bottom: 1px solid #f6f6f6
}

.declare ul,
.declare ul li {
	list-style: none
}

.article-tag-list {
	list-style: none;
	padding-left: 0;
	margin: 0
}

.article-tag-list:before {
	color: #5d5a5a;
	content: "\eec3";
	font-family: remixicon;
	margin-right: .5rem
}

.article-tag-list .article-tag-list-item {
	display: inline-block;
	padding-right: 1rem
}

.article-tag-list .article-tag-list-link {
	font-size: 11px;
	text-decoration: none;
	display: block;
	color: #fff;
	float: left;
	height: 18px;
	line-height: 18px;
	padding: 0 8px;
	position: relative;
	border-radius: 9px;
	background-color: #5d5a5a
}

.article-comment-link {
	float: right
}

.article-comment-link:before {
	content: "\ee0d";
	font-family: remixicon;
	padding-right: 8px
}

.article-share-link {
	cursor: pointer;
	float: right;
	margin-left: 20px
}

.article-share-link:before {
	content: "\ef76";
	font-family: remixicon;
	padding-right: 6px
}

.article-nav {
	position: relative;
	padding-top: 1.5rem;
	margin: 1rem 0 2rem;
	border-top: .1rem solid #eee
}

.article-nav:after,
.article-nav:before {
	content: "";
	display: table;
	clear: both
}

.article-nav-link {
	display: block;
	text-decoration: none
}

.article-nav-link:first-child {
	float: left
}

.article-nav-link:last-child {
	float: right;
	text-align: right
}

.article-nav-caption {
	color: #5c6b72
}

.article-nav-title {
	font-size: inherit
}

.article-share-box {
	position: absolute;
	display: none;
	background: #fff;
	border-radius: .4rem;
	box-shadow: 1px 2px 10px rgba(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;
	box-sizing: border-box;
	padding: 0 1.5rem;
	outline: none;
	border: none;
	border-bottom: .1rem solid #999;
	height: 3.6rem;
	line-height: 3.6rem
}

.article-share-links:after,
.article-share-links:before {
	content: "";
	display: table;
	clear: both
}

.article-share-facebook,
.article-share-google,
.article-share-pinterest,
.article-share-twitter {
	position: relative;
	display: block;
	float: left;
	width: 5rem;
	height: 3.6rem;
	color: #403e3e;
	text-align: center;
	text-decoration: none
}

.article-share-facebook:before,
.article-share-google:before,
.article-share-pinterest:before,
.article-share-twitter:before {
	font-size: 20px;
	font-family: remixicon
}

.article-share-facebook:hover,
.article-share-google:hover,
.article-share-pinterest:hover,
.article-share-twitter:hover {
	color: #fff
}

.article-share-twitter:before {
	content: "\f068"
}

.article-share-twitter:hover {
	background: #00aced;
	text-shadow: 0 1px #008abe
}

.article-share-facebook:before {
	content: "\ec30"
}

.article-share-facebook:hover {
	background: #3b5998;
	text-shadow: 0 1px #2f477a
}

.article-share-pinterest:before {
	content: "\eea8"
}

.article-share-pinterest:hover {
	background: #cb2027;
	text-shadow: 0 1px #a21a1f
}

.article-share-google:before {
	content: "\ed15"
}

.article-share-google:hover {
	background: #dd4b39;
	text-shadow: 0 1px #be3221
}

.pswp__caption__center {
	text-align: center!important
}

.tocbot {
	padding: 20px;
	position: absolute;
	right: -28rem;
	top: 14rem;
	font-size: 80%;
	opacity: .95;
	max-width: 255px;
	border-radius: 8px
}

.tocbot>.toc-list {
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
	max-height: 70vh
}

.tocbot>.toc-list::-webkit-scrollbar {
	width: 4px
}

>.toc-list::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
	background: rgba(0, 0, 0, .2)
}

>.toc-list::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
	border-radius: 0;
	background: rgba(0, 0, 0, .1)
}

.toc-list {
	list-style: none;
	margin-left: 0;
	padding-left: 1rem
}

a.toc-link {
	height: 100%;
	color: #172d3e;
	text-decoration: none;
	font-size: 115%
}

.is-collapsible {
	max-height: 1000px;
	overflow: hidden;
	transition: all
}

.is-collapsed {
	max-height: 0
}

.is-position-fixed {
	position: fixed!important;
	top: 0;
	right: 6rem;
	background-color: #fff;
	z-index: 996
}

.toc-link:before {
	background-color: #cce5ff;
	content: " ";
	display: inline-block;
	height: inherit;
	left: 0;
	margin-top: -1px;
	position: absolute;
	width: 2px
}

.is-active-link:before {
	background-color: #3d85c6
}

.is-active-link {
	font-weight: 700
}

.article-gallery {
	position: relative
}

.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
}

.article-albums {
	position: relative
}

.article-albums-photos {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0;
	margin-left: 0
}

.article-albums-photos:after,
.article-albums-photos:before {
	content: "";
	display: table;
	clear: both
}

.article-albums-photos:after {
	content: "";
	flex-grow: 999999999
}

.article-albums-photos .article-albums-item {
	position: relative;
	flex-grow: 1;
	margin: .5rem;
	overflow: hidden
}

.article-albums-photos .article-albums-item img {
	-o-object-fit: cover;
	object-fit: cover;
	max-width: 100%;
	min-width: 100%;
	vertical-align: center
}

.article-albums-photos .article-albums-item .article-albums-caption {
	display: block;
	width: 100%;
	padding: 1rem 0;
	text-align: center
}

@media (min-width:576px) {
	.article-albums-item img {
		height: 32rem
	}
	.article-albums-item .article-albums-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, .5);
		background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
		color: #fff;
		padding: 1rem;
		opacity: 0;
		transform: translateY(100%);
		transition: all .3s ease-in-out
	}
	.article-albums-item:hover .article-albums-caption {
		opacity: 1;
		transform: translateY(0)
	}
}

@media (min-width:768px) {
	.article-albums-item img {
		height: 20rem
	}
}

.justified-gallery {
	width: 100%;
	position: relative;
	overflow: hidden
}

.justified-gallery>a,
.justified-gallery>div,
.justified-gallery>figure {
	position: absolute;
	display: inline-block;
	overflow: hidden;
	background: #adb5bd;
	opacity: 1;
	margin: 0;
	padding: 0
}

.justified-gallery>a>a>img,
.justified-gallery>a>a>svg,
.justified-gallery>a>img,
.justified-gallery>a>svg,
.justified-gallery>div>a>img,
.justified-gallery>div>a>svg,
.justified-gallery>div>img,
.justified-gallery>div>svg,
.justified-gallery>figure>a>img,
.justified-gallery>figure>a>svg,
.justified-gallery>figure>img,
.justified-gallery>figure>svg {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;
	border: none;
	opacity: 1
}

.justified-gallery>a>.caption,
.justified-gallery>div>.caption,
.justified-gallery>figure>.caption {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	background-color: rgba(0, 0, 0, .5);
	background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
	color: #fff
}

.justified-gallery>a>.caption.caption-visible,
.justified-gallery>div>.caption.caption-visible,
.justified-gallery>figure>.caption.caption-visible {
	display: initial
}

.justified-gallery>.jg-entry-visible {
	opacity: 1;
	background: none
}

.justified-gallery>.jg-entry-visible>a>img,
.justified-gallery>.jg-entry-visible>a>svg,
.justified-gallery>.jg-entry-visible>img,
.justified-gallery>.jg-entry-visible>svg {
	opacity: 1;
	transition: opacity
}

.justified-gallery>.jg-filtered {
	display: none
}

.justified-gallery>.jg-filtered>.spinner {
	position: absolute;
	bottom: 0;
	margin-left: -24px;
	padding: 10px 0;
	left: 50%;
	opacity: 1;
	overflow: initial
}

.justified-gallery>.jg-filtered>span {
	display: inline-block;
	opacity: 1;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	background-color: #000;
	border-radius: 6px
}

.articles .article {
	padding: 4.5rem 0
}

.articles .article:not(:last-child) {
	border-bottom: .1rem solid #ddd
}

.articles .article-entry {
	margin-top: 1rem;
	padding: 0 2rem 2rem;
	border: 1px dashed #dfdede
}

.articles .article-entry .article-more-link {
	display: inline-block;
	float: right;
	background-color: #403e3e;
	padding: .5rem 1rem;
	border-radius: 4px;
	color: #fff!important;
	text-decoration: none
}

.articles .article-entry .article-gallery {
	margin-top: 1.5rem
}

.articles .article-footer {
	margin-top: 1rem
}

.archives-wrap {
	position: relative
}

.archives-wrap:after,
.archives-wrap:before {
	content: "";
	display: table;
	clear: both
}

.archives-wrap:first-child {
	margin-top: 3rem
}

.archives-wrap:last-child {
	margin-bottom: 3rem
}

.archive-year-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 6rem
}

.archive-year-wrap .archive-year {
	position: relative;
	display: inline-block
}

.archive-year-wrap .archive-year:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: .15rem;
	background-color: #5c6b72;
	width: 100%
}

.archives {
	margin-left: 6rem;
	border-left: .1rem dashed #999;
	padding-left: 3rem
}

.archives:after,
.archives:before {
	content: "";
	display: table;
	clear: both
}

.archive-article-inner {
	margin-bottom: 1.5rem
}

.archive-article-header {
	display: table-row
}

.archive-article-header>a,
.archive-article-header>h2 {
	display: table-cell
}

.archive-article-header h2 {
	margin: 0;
	padding-left: 3rem
}

.archive-article-header h2 .archive-article-title {
	text-decoration: none;
	font-size: 1.8rem
}

.archive-article-footer {
	margin-top: 1.5rem
}

.archive-article-date {
	position: relative;
	display: block
}

.archive-article-date:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -3.5rem;
	margin-top: -.5rem;
	width: 1rem;
	height: 1rem;
	border-radius: 1rem;
	background-color: #999
}

.page-type-title {
	margin: 0;
	padding: 3rem 0
}

.page-nav {
	margin: 3rem auto 5rem;
	text-align: center;
	overflow: hidden;
	font-size: 115%
}

.page-nav:after,
.page-nav:before {
	content: "";
	display: table;
	clear: both
}

.page-nav a,
.page-nav span {
	padding: 1rem 1.5rem;
	line-height: 1
}

.page-nav a {
	text-decoration: none
}

.page-nav .prev {
	float: left
}

.page-nav .next,
.page-nav .prev {
	border-radius: 6px;
	border: 1px solid
}

.page-nav .next {
	float: right
}

.page-nav .page-number {
	display: inline-block
}

@media mq-mobile {
	.page-nav .page-number {
		display: none
	}
}

.page-nav .current {
	font-weight: 700
}

.page-nav .space {
	color: #999
}

.footer {
	border-top: 2px solid #f6f6f6;
	padding: 3rem 0;
	font-size: 115%
}

.footer .outer>ul {
	position: relative;
	display: flex;
	justify-content: center
}

.footer .outer>ul li {
	display: inline-block;
	padding: .3rem 0
}

.footer .outer>ul li a {
	text-decoration: none
}

.footer .outer>ul li .division {
	display: inline;
	margin: 0 5px
}

.footer .outer>ul li i {
	margin: 0 2px;
	font-style: normal;
	transform: translateY(2px)
}

.footer .outer>ul span {
	margin-right: 6px
}

.heart_icon {
	display: inline-block;
	margin: 0 .4rem;
	font-size: 1em;
	color: red;
	-webkit-animation: footerHeartBeat 1.2s infinite;
	animation: footerHeartBeat 1.2s infinite;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	animation-direction: normal;
	-webkit-animation-fill-mode: none;
	animation-fill-mode: none;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-name: footerHeartBeat;
	animation-name: footerHeartBeat
}

@-webkit-keyframes footerHeartBeat {
	0% {
		transform: scale(1)
	}
	50% {
		transform: scale(1.2)
	}
	to {
		transform: scale(1)
	}
}

@keyframes footerHeartBeat {
	0% {
		transform: scale(1)
	}
	50% {
		transform: scale(1.2)
	}
	to {
		transform: scale(1)
	}
}

.float-left {
	float: left!important
}

.float-right {
	float: right!important
}

.float-none {
	float: none!important
}

.article-entry .highlight,
.article-entry pre {
	background: #2d2d2d;
	margin: 10px 0;
	padding: 10px;
	overflow: hidden;
	overflow-x: auto;
	color: #dedede;
	font-size: .9em;
	line-height: 1.5
}

.article-entry .highlight::-webkit-scrollbar,
.article-entry pre::-webkit-scrollbar {
	height: 10px;
	width: 7px;
	background: rgba(0, 0, 0, .1)
}

.article-entry .highlight::-webkit-scrollbar:hover,
.article-entry pre::-webkit-scrollbar:hover {
	background: rgba(0, 0, 0, .2)
}

.article-entry .highlight::-webkit-scrollbar-thumb,
.article-entry pre::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .3);
	border-radius: 6px
}

.article-entry .highlight::-webkit-scrollbar-thumb:hover,
.article-entry pre::-webkit-scrollbar-thumb:hover {
	-ms-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
	-o-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
	background-color: rgba(0, 0, 0, .4)
}

.article-entry .highlight::-webkit-scrollbar-track,
.article-entry pre::-webkit-scrollbar-track {
	background: #ededed;
	border-radius: 10px
}

.article-entry .gist .gist-file .gist-data .line-numbers,
.article-entry .highlight .gutter pre,
.article-entry .highlight .gutter pre .line {
	color: grey
}

.article-entry code,
.article-entry pre {
	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace
}

.article-entry code {
	background: #eee;
	color: #c7254e;
	padding: 0 .3em;
	border: none
}

.article-entry pre code {
	background: none;
	text-shadow: none;
	padding: 0;
	color: #dedede
}

.article-entry .highlight {
	border-radius: 4px
}

.article-entry .highlight pre {
	border: none;
	margin: 0;
	padding: 0
}

.article-entry .highlight table {
	margin: 0;
	width: auto;
	border: none
}

.article-entry .highlight td {
	border: none;
	padding: 0
}

.article-entry .highlight figcaption {
	color: #8e908c;
	line-height: 1em;
	margin-bottom: 1em
}

.article-entry .highlight figcaption:after,
.article-entry .highlight figcaption:before {
	content: "";
	display: table
}

.article-entry .highlight figcaption:after {
	clear: both
}

.article-entry .highlight figcaption a {
	float: right
}

.article-entry .highlight .gutter pre {
	text-align: right;
	padding-right: 20px
}

.article-entry .highlight .gutter pre .line {
	text-shadow: none
}

.article-entry .highlight .line {
	color: #dedede;
	min-height: 19px
}

.article-entry .gist {
	margin: 0 -20px;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px 0;
	background: #272822;
	padding: 15px 20px 15px 0
}

.article-entry .gist .gist-file {
	border: none;
	font-family: Source Code Pro, Consolas, Monaco, Menlo, monospace;
	margin: 0
}

.article-entry .gist .gist-file .gist-data {
	background: none;
	border: none
}

.article-entry .gist .gist-file .gist-data .line-numbers {
	background: none;
	border: none;
	padding: 0 20px 0 0
}

.article-entry .gist .gist-file .gist-data .line-data {
	padding: 0!important
}

.article-entry .gist .gist-file .highlight {
	margin: 0;
	padding: 0;
	border: none
}

.article-entry .gist .gist-file .gist-meta {
	background: #272822;
	color: #8e908c;
	font: .85em Helvetica Neue, Helvetica, Arial, sans-serif;
	text-shadow: 0 0;
	padding: 0;
	margin-top: 1em;
	margin-left: 20px
}

.article-entry .gist .gist-file .gist-meta a {
	color: #258fb8;
	font-weight: 400
}

.article-entry .gist .gist-file .gist-meta a:hover {
	text-decoration: underline
}

pre .comment {
	color: #9c9
}

pre .class .params,
pre .function .keyword,
pre .keyword {
	color: #66d9ef
}

pre .css .value,
pre .doctype,
pre .function,
pre .params,
pre .tag {
	color: #dedede
}

pre .at_rule,
pre .at_rule .keyword,
pre .css~* .tag,
pre .preprocessor,
pre .preprocessor .keyword,
pre .title {
	color: #f92672
}

pre .attribute,
pre .built_in,
pre .class,
pre .css~* .class,
pre .function .title {
	color: #a6e22e
}

pre .string,
pre .value {
	color: #dedede
}

pre .number {
	color: #c9c
}

pre .css~* .id,
pre .id {
	color: #fd971f
}

.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.pace .pace-progress {
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: .2rem;
	background-color: #3d85c6
}

.pace-inactive {
	display: none
}

@media (max-width:768px) {
	.pace {
		display: none
	}
}

.gitalk,
.markdown-body {
	font-size: 1.4rem!important
}

.gt-container .gt-avatar.gt-comment-avatar img {
	border-radius: 50%
}

.macbook {
	position: relative
}

.macbook .macbook-screen {
	position: relative;
	background-color: transparent;
	border-radius: 1rem;
	border: 1.25rem solid #fff;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .15), inset 0 0 .5rem rgba(0, 0, 0, .15)
}

.macbook .macbook-keyboard {
	display: none;
	position: relative;
	box-sizing: content-box;
	background-color: #fff;
	border-bottom: .75rem solid #f2f2f2;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	margin: -.5rem -5rem 0;
	height: .5rem;
	box-shadow: 0 .5rem 3rem rgba(0, 0, 0, .15)
}

.macbook .macbook-keyboard:before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #f2f2f2, #fff, #f2f2f2);
	box-shadow: inset 0 0 .1rem rgba(0, 0, 0, .05);
	width: 20%;
	height: .3rem;
	border-radius: .125rem
}

@media (min-width:768px) {
	.macbook .macbook-screen {
		border-width: 2rem 1.25rem 1.25rem
	}
	.macbook .macbook-keyboard {
		display: block
	}
}

.macbook-wrap {
	padding: 1rem 9rem
}

.scrolling-wrap {
	min-height: 30rem;
	overflow: hidden
}

.scrolling {
	position: absolute;
	top: 30rem;
	width: 100%;
	-webkit-animation: scrolling-animation 10s ease-in-out 1s infinite;
	animation: scrolling-animation 10s ease-in-out 1s infinite
}

@-webkit-keyframes scrolling-animation {
	0% {
		top: 0
	}
	10% {
		top: 0;
		transform: translateY(0)
	}
	30% {
		transform: translateY(-35%)
	}
	60% {
		transform: translateY(-75%)
	}
	90% {
		transform: translateY(-100%)
	}
	to {
		transform: translateY(-100%)
	}
}

@keyframes scrolling-animation {
	0% {
		top: 0
	}
	10% {
		top: 0;
		transform: translateY(0)
	}
	30% {
		transform: translateY(-35%)
	}
	60% {
		transform: translateY(-75%)
	}
	90% {
		transform: translateY(-100%)
	}
	to {
		transform: translateY(-100%)
	}
}

#reward-out {
	position: relative;
	width: 100%
}

#reward-btn {
	position: relative;
	display: inline-block;
	height: 36px;
	line-height: 36px;
	padding: 0 20px;
	font-size: 18px;
	color: #fff;
	background: #403e3e;
	text-decoration: none;
	border-radius: 4px;
	margin: 60px 0 60px 50%;
	transform: translateX(-50%);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
	transition: .4s ease-in-out;
	cursor: pointer
}

#reward-btn:active,
#reward-btn:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 4px 15px rgba(0, 0, 0, .2)
}

#reward {
	position: absolute;
	z-index: 9999;
	left: 50%;
	top: 20%;
	transform: translateX(-50%);
	margin: 60px 0;
	padding: 0 20px 20px;
	background-color: #dbedff;
	display: none
}

#reward.ready {
	visibility: hidden;
	display: block;
	transform: translate(-50%, -100%);
	transition: .3s
}

#reward.in {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%)
}

#reward .close {
	height: 28px;
	line-height: 28px;
	width: 28px;
	display: block;
	text-align: center;
	position: absolute;
	right: -12px;
	top: -10px;
	border-radius: 50%;
	background-color: #403e3e;
	cursor: pointer
}

#reward .close i {
	font-size: 20px;
	color: #fff
}

#reward .reward-p {
	color: #403e3e;
	font-weight: 700;
	font-size: 20px;
	text-align: center;
	text-shadow: 1px 1px 1px #70b6ff
}

#reward .reward-p i {
	margin: 0 10px;
	transform: translateY(2px)
}

#reward .reward-box {
	display: flex;
	justify-content: space-between;
	width: 100%
}

#reward .reward-box .reward-item {
	text-align: center;
	margin: 0 10px
}

#reward .reward-type {
	font-size: 16px;
	display: block;
	color: #000;
	margin-top: 10px
}

#reward .reward-img {
	display: block;
	width: 12rem;
	height: 12rem;
	border-radius: 3px
}

@media (max-width:768px) {
	#reward {
		padding: 0 10px 10px
	}
	#reward .reward-img {
		max-width: 10rem;
		max-height: 10rem;
		margin: 0 5px
	}
}

.share-wrap {
	min-height: 20px;
	display: none;
	position: relative;
	z-index: 1;
	right: 0;
	bottom: 0;
	width: 250px;
	background-color: #f5f5f5;
	border-radius: 2px
}

.share-wrap .arrow {
	position: absolute;
	z-index: -1;
	top: -3px;
	right: 20px;
	display: block;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	background-color: #f5f5f5
}

.share-btn {
	float: right;
	position: relative
}

.share-outer {
	display: flex;
	justify-content: flex-end;
	border: none;
	text-shadow: none;
	text-decoration: none;
	width: auto;
	color: #0681d0;
	height: 28px;
	line-height: 26px
}

.share-outer i {
	font-size: 18px;
	margin-right: 5px;
	color: #36adf9
}

.share-outer:hover {
	transform: none;
	cursor: pointer
}

.share-icons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap
}

.share-icons a {
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	margin: 3px;
	transition: .3s;
	text-align: center;
	color: #70b6ff;
	width: 28px;
	height: 28px;
	line-height: 26px;
	font-size: 13px
}

.share-icons a i {
	font-size: 24px
}

.share-icons a.weibo {
	color: #d81e06
}

.share-icons a.weixin {
	color: #51c332
}

.share-icons a.qq {
	color: #4cafe9
}

.share-icons a.douban {
	color: #05b711
}

.share-icons a.twitter {
	color: #00aced
}

.share-icons a.facebook {
	color: #3b5998
}

.share-icons a.google {
	color: #dd4b39
}

.share-icons a:active {
	color: ocean
}

.share-icons a:hover {
	transform: scale(1.2)
}

.wx-share-modal {
	position: fixed;
	top: 24%;
	left: 50%;
	z-index: 9999;
	padding: 20px;
	text-align: center;
	color: #727272;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
	opacity: 0;
	transform: translate(-50%, -200%)
}

.wx-share-modal p {
	margin-bottom: 10px
}

.wx-share-modal.ready {
	visibility: 0;
	display: block;
	transform: translate(-50%, -100%);
	transition: .3s
}

.wx-share-modal.in {
	display: block;
	visibility: visible;
	opacity: 1;
	transform: translate(-50%)
}

.wx-share-modal .modal-close {
	position: absolute;
	right: 15px;
	top: 15px;
	color: rgba(0, 0, 0, .2);
	font-size: 16px;
	line-height: 20px
}

.wx-share-modal .modal-close i {
	font-size: 24px
}

.wx-share-modal .modal-close:active,
.wx-share-modal .modal-close:hover {
	color: rgba(0, 0, 0, .4)
}

#share-mask {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, .6);
	z-index: 999;
	display: none
}

#friends_link .friends_li {
	list-style: none;
	float: left
}

#friends_link .friends_li a {
	padding: 15px 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 17px;
	text-decoration: none;
	background-color: rgba(6, 129, 208, .1);
	color: #000;
	border-radius: 6px;
	margin-right: 20px;
	margin-bottom: 20px
}

#friends_link .friends_li a img {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px
}

#friends_link .friends_li a i {
	font-size: 25px;
	width: 40px;
	height: 40px
}

#friends_link .friends_li a:hover {
	background-color: rgba(6, 129, 208, .15)
}

.ads {
	position: absolute;
	right: 0;
	top: 50px;
	z-index: 2;
	transform: translateX(110%)
}

.ads li,
.ads ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0
}

.ads img {
	display: block;
	margin-bottom: 15px
}

@media (max-width:768px) {
	.ads {
		display: none
	}
}

.navbar {
	position: relative;
	padding-top: 3rem;
	text-align: left;
	padding-left: 1.5rem;
}

.navbar .nav {
	list-style: none;
	padding-left: 0;
	margin-left: 0
}

.navbar .nav .nav-item-link {
	display: block;
	padding: 1rem;
	color: #bbb;
	text-decoration: none;
	cursor: pointer
}

.navbar .nav .nav-item-link:hover {
	opacity: .8;
	background-color: #403e3e
}

.navbar .nav.nav-main {
	height: 43vh;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none
}

@media screen and (min-width: 40.5em) {
    .navbar .nav.nav-main {
		height: 65vh;
		overflow-y: scroll;
		scrollbar-width: none;
		-ms-overflow-style: none
	}
}

.navbar .nav.nav-main::-webkit-scrollbar {
	width: 0;
	height: 0
}

.navbar .nav.nav-main .nav-item-link i {
	font-size: 1rem;
	display: block;
	line-height: 1
}

.navbar-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: 2rem
}

.logo {
	text-align: center;
	margin-bottom: 2rem
}

.logo img {
	width: 4.2rem
}

.todark,
.totop {
	position: relative;
	display: block;
	overflow: hidden;
	cursor: pointer;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 3.2rem;
	background-color: #efefef;
	line-height: 3rem;
	opacity: .6;
	transition: opacity 1s ease
}

.todark:hover,
.totop:hover {
	opacity: 1
}

.totop {
	margin-bottom: .8rem
}

.totop:hover>i {
	-webkit-animation: rocket .3s ease-in-out;
	animation: rocket .3s ease-in-out
}

@-webkit-keyframes rocket {
	0% {
		transform: translateY(0);
		opacity: 1
	}
	45% {
		transform: translateY(-3.2rem);
		opacity: 0
	}
	55% {
		transform: translateY(3.2rem);
		opacity: 0
	}
	to {
		transform: translateY(0);
		opacity: 1
	}
}

@keyframes rocket {
	0% {
		transform: translateY(0);
		opacity: 1
	}
	45% {
		transform: translateY(-3.2rem);
		opacity: 0
	}
	55% {
		transform: translateY(3.2rem);
		opacity: 0
	}
	to {
		transform: translateY(0);
		opacity: 1
	}
}

@media (max-width:768px) {
	html {
		font-size: 60%
	}
}