@charset "UTF-8";
/* ===================================================================
 * Lopwon Main Stylesheet
 * Template Ver. 3.0.0
 * 05-27-2022
 * ------------------------------------------------------------------
 *
 * # html
 * # loading(snapic page)
 * # wrap
 * # header
 * 		## bgimg
 * 		## leadstory
 * 		## bgimg-meta
 * 		## bgimg-open
 * 		## logo
 * 		## single-meta
 * # article
 * 		## content
 * 		## icon
 * 		## trip
 * 		## imgs
 * 		## soundstory
 * 		## album
 * 		## topic
 * 		## topic-grid
 * 		## cafe / links / website
 * 		## protected
 * 		## prev-next
 * 		## fancybox
 * # bottom
 * 		## logo
 * 		## navbar
 * 		## random
 * 		## footer
 * 		## street
 * 		## gotop
 * # comments
 * 		## comment-author
 * 		## comment-content
 * 		## comment-other
 * 		## comment-form
 * 		## comment-grid
 * # masonry
 * 		## grid
 * # media
 * 		## music
 * 		## soundstory-post
 * 		## soundstory-category
 * # navigator
 * # animation
 * # markdown
 * # mobile
 * 		## min-width:60em
 * 		## min-width:70em
 * 		## min-width:120em
 * 		## max-width:50em
 * 		## max-width:960px
 * 		## max-width:768px
 * 		## max-width:600px
 * 		## max-width:480px
 * 		## max-width:400px
 * 		## max-width:320px
 *
 * ------------------------------------------------------------------- */

:root {

/* --- theme --- */

	--color-body-white		: #ffffff;
	--color-body-1			: #fcfcfc;
	--color-body-2			: #f0f0f0;
	--color-body-black		: #000000;

	--color-wrap-white		: #ffffff;
	--color-wrap-1			: #f8f8f8;
	--color-wrap-2			: #f0f0f0;
	--color-wrap-3			: #dcdcdc;
	--color-wrap-4			: #323232;
	--color-wrap-black		: #000000;

/* --- text --- */

	--color-text-white		: #ffffff;
	--color-text-1			: #c2c2c2;
	--color-text-2			: #969696;
	--color-text-3			: #696969;
	--color-text-4			: #323232;
	--color-text-black		: #000000;

	--color-text-red		: #e5432a;
	--color-text-orange		: #ff8800;
	--color-text-yellow		: #ffff00;
	--color-text-green		: #03ee03;
	--color-text-cyan		: #02cbab;
	--color-text-blue		: #4a86e8;
	--color-text-purple		: #800080;

/* --- buttons --- */

	--color-btn-white		: #ffffff;
	--color-btn-1			: #f8f8f8;
	--color-btn-2			: #f0f0f0;
	--color-btn-3			: #dcdcdc;
	--color-btn-4			: #02cbab;
	--color-btn-5			: #323232;
	--color-btn-black		: #000000;

/* --- border --- */

	--color-border-white	: #ffffff;
	--color-border-1		: #f8f8f8;
	--color-border-2		: #f0f0f0;
	--color-border-3		: #dcdcdc;
	--color-border-4		: #02cbab;
	--color-border-5		: #969696;
	--color-border-black	: #000000;

}

/* --- scrollbar --- */

::-webkit-scrollbar {
	width: 7px;
	height: 100%;
}

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: var(--color-btn-3);
	box-shadow: inset 0 0 5px rgba(0 0 0 / 20%);
}

::-webkit-scrollbar-track {
	border-radius: 0;
	background-color: var(--color-btn-1);
	box-shadow: inset 0 0 5px rgba(0 0 0 / 3%);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-btn-3) var(--color-btn-1);
}

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

	::-webkit-scrollbar {
		width: 5px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 3px;
	}

	::-webkit-scrollbar-track {
		border-radius: 0;
	}

}

/* -------------------------------------------------------------------
* html
* ------------------------------------------------------------------- */

body {
	font-family: "Arial","Microsoft JhengHei",Apple LiGothic Medium,sans-serif;
	color: var(--color-text-4);
	background-color: var(--color-body-1);
	overflow-x: hidden;
}

a {
	color: var(--color-text-3);
}

a:hover,
a:active {
	color: var(--color-text-4);
}

.clamp {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.hidden {
	display: none !important;
}

/* - scrollbar - */

.article pre::-webkit-scrollbar,
.Lopwon_Todo nav::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.article pre::-webkit-scrollbar-thumb,
.Lopwon_Todo nav::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: var(--color-border-3);
	box-shadow: inset 0 0 5px rgba(0 0 0 / 20%);
}

.article pre::-webkit-scrollbar-track,
.Lopwon_Todo nav::-webkit-scrollbar-track {
	border-radius: 5px;
	background-color: var(--color-border-2);
	box-shadow: inset 0 0 5px rgba(0 0 0 / 3%);
}

/* -------------------------------------------------------------------
* loading(snapic page)
* ------------------------------------------------------------------- */
/* 加载动画，与音频拖动进度加载冲突
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 9;
}

.loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-wrap-4);
}

.loading::after {
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 5px solid var(--color-border-3);
	border-bottom-color: var(--color-border-5);
	border-radius: 50%;
	animation: animLoader 0.8s linear infinite forwards;
	-webkit-animation: animLoader 0.8s linear infinite forwards;
}

@keyframes animLoader {
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes animLoader {
	to {
		transform: rotate(360deg);
	}
}

@-o-keyframes animLoader {
	to {
		transform: rotate(360deg);
	}
}

@-moz-keyframes animLoader {
	to {
		transform: rotate(360deg);
	}
}*/

/* -------------------------------------------------------------------
* wrap
* ------------------------------------------------------------------- */

html {
	background-color: var(--color-body-1);
}

#main {
	background-color: var(--color-body-2);
}

#home,
#article,
#store,
#poster,
#topic,
#comments,
#prev-next {
	margin: 0 auto;
	padding: 3em 2em;
	max-width: calc(960px + 4em);
}

/* -------------------------------------------------------------------
* header
* ------------------------------------------------------------------- */

/* bgimg / index & about */

.header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 620px;
	max-height: 1800px;
	overflow: hidden;
	border-top: 5px solid var(--color-border-black);
	background-color: var(--color-body-black);
}

.bgimg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
}

.index-bgimg {
	background-position: 50% 50%;
}

.about-bgimg {
	background-position: 50% 80%;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.shaders-top,
.shaders-bottom {
	position: absolute;
	left: 0;
	width: 100%;
	height: 30%;
}

.shaders-top {
	background: linear-gradient(to top,rgba(0 0 0 / 0%) 0%,rgba(0 0 0 / 0%) 100%);
	top: 0;
}

.shaders-bottom {
	background: linear-gradient(to bottom, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 25%) 25%, rgba(0 0 0 / 50%) 50%, rgba(0 0 0 / 75%) 75%, rgba(0 0 0 / 100%) 100%);
	bottom: 0;
}

/* leadstory / index */

.leadstory {
	position: absolute;
	top: 25%;
	left: 50%;
	width: 100%;
	height: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
}

.leadstory-title {
	position: relative;
	font-size: 5.8em;
	font-weight: bold;
	color: var(--color-text-white);
}

.leadstory-title sup {
	display: block;
	position: absolute;
	top: -7px;
	right: -28px;
	font-size: 14px;
	font-weight: normal;
}

.leadstory a {
	line-height: 44px;
}

.leadstory-meta {
	padding: 1em 1.5em;
	font-size: 1.4em;
	color: var(--color-text-black);
	border-radius: 3em;
	background-color: var(--color-wrap-white);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.leadstory-meta:hover {
	color: var(--color-text-white);
	background-color: var(--color-wrap-black);
}

/* bgimg-meta / index & about */

.bgimg-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	height: 100%;
}

.bgimg-meta span,
.bgimg-meta a {
	margin: 1em 0;
	z-index: 1;
}

.bgimg-meta a {
	padding: 0.5em 0.7em;
	font-size: 1.2em;
	color: var(--color-text-black);
	border-radius: 3em;
	background-color: var(--color-wrap-white);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.bgimg-meta a:hover {
	color: var(--color-text-white);
	background-color: var(--color-wrap-black);
}

.bgimg-description {
	font-size: 1.2em;
	line-height: 2;
	color: var(--color-text-white);
	text-align: center;
}

/* bgimg-open / index & about */

.bgimg-open {
	width: 3em;
	height: 3em;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 3em;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAABFklEQVR4Ae3ZwcnCQAAF4b+7/2Ixgg1sEWkiZaWSJwEDIksQHHkg82AI7CXLd8glf0nsJBEEEkgggQQSSCCBTCCBBBJIIIEEEsgEEkgggQQSSKD/62V/jiTbo2U/a5bk9nSfsZ+1gA6c140izvQ+TaAt840CzpL5tj4Qj0Th1IFGzjeKOMdG/yNdQkqyvvPuKhCPxOL0gXgkFKcPxCOhOH0gHgnF6QPxSChOG+gTpOX7OH0gFInH6QOhSDxOHwhF4nH6QCTSyuP0gXAkFqcPhCOxOH0gFInH6QOhSDxOHwhF4nH6QCgSj9MHopEmOAJNfh8BOCDQryeQQAIJJJBAAplAAgkkkEACCSSQCSSQQAIJJJBAAtkdO2a1bqG00tEAAAAASUVORK5CYII=");
	-webkit-animation: open 1s ease-in-out 1s infinite alternate;
	-moz-animation: open 1s ease-in-out 1s infinite alternate;
	-ms-animation: open 1s ease-in-out 1s infinite alternate;
	-o-animation: open 1s ease-in-out 1s infinite alternate;
	animation: open 1s ease-in-out 1s infinite alternate;
	z-index: 1;
	cursor: pointer;
}

.bgimg-open:hover {
	opacity: .7;
}

@-webkit-keyframes open {
	to {
		-webkit-transform: translate(0, -1em);
	}
}

@-moz-keyframes open {
	to {
		-moz-transform: translate(0, -1em);
	}
}

@-o-keyframes open {
	to {
		-o-transform: translate(0, -1em);
	}
}

@-ms-keyframes open {
	to {
		-ms-transform: translate(0, -1em);
	}
}

@keyframes open {
	to {
		transform: translate(0, -1em);
	}
}

/* logo / blog */

.logo,
.logo a {
	position: fixed;
	top: -2px;
	left: 1.8em;
	width: 36px;
	height: 52px;
	background: url(../img/logo.png) no-repeat;
	background-size: 36px 54px;
	background-color: var(--color-wrap-white);
	border-radius: 0 0 18px 18px;
	box-shadow: 0 4px 6px -5px var(--color-border-3);
	border-top: 5px solid var(--color-text-orange);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: .7;
}

.logo {
	z-index: 3;
}

.logo a {
	display: block;
	z-index: 4;
}

.logo:hover,
.logo a:hover {

	opacity: 1;
}

.logo-nosingle {
	display: none;
}

/* single-meta / index & single */

.single-title {
	margin-top: 2em;
	font-size: 3.8em;
	font-weight: normal;
}

.single-title p {
	display: inline-block;
	text-align: left;
}

.single-meta {
	display: flex;
	align-items: center;
	margin-top: 2em;
	font-size: 1.4em;
	color: var(--color-text-2);
	line-height: 1;
	font-weight: normal;
}

.single-meta:hover {
	color: var(--color-text-4);
}

.location-ico {
	display: inline-block;
	margin-left: 1em;
	width: 18px;
	height: 18px;
	background-size: 18px 18px !important;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../img/ico-location.png);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: .3;
}

.single-meta:hover .location-ico {
	opacity: 1;
}

/* -------------------------------------------------------------------
* article
* ------------------------------------------------------------------- */

/* content */

.article {
	margin-bottom: 5em;
	text-align: justify;
	word-wrap: break-word;
	word-break: break-all;
}

.article a {
	position: relative;
}

.article.mark a:after {
	content: "";/* 文章内链荧光标记 */
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background-color: var(--color-text-yellow);
	opacity: .5;
}

.article a,
.article .Begin a,
.article .End a,
.content .title-index a {
	color: var(--color-text-cyan);
}

.article a:hover,
.article .Begin a:hover,
.article .End a:hover,
.content .title-index a:hover {
	color: var(--color-text-4);
}

.article a.nomark:after {
	height: 0;
	background: transparent !important;/* 删除图片和外链荧光标记 */
}

.article p {
	margin: 2em 0;
	font-size: 1.8em;
	line-height: 1.6;
	color: var(--color-text-4);
}

.article .more {
	display: flex;
	flex-direction: column;
	margin: 1em 0;
	font-size: 1.6em;
	line-height: 1.4;
	color: var(--color-text-4);
}

.article img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 1.5em;
}

/* content(attachment.php) */

.pictalk {
	display: flex;
    flex-direction: column;
    align-items: center;
	margin-top: 3em;
	margin-bottom: -3em;
}

.pictalk p {
	display: inherit;
	margin: 0.5em 0;
}

.pictalk-open {
	width: 1.5em;
	height: 1.5em;
	background-size: 1.5em;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAABFklEQVR4Ae3ZwQnCQBBG4XTnxWIEG9gi0kTKSiXjCDnIQkTwwS/yBt5lLhk+yGmXqnqTiSCQQAIJJJBAAglkAgkkkEACCSSQQCaQQAIJJJBAAl1u16VndPvR+twl67m/3DN6lwM6cGpqhHBO70kC7V0BSATOenLLHgeikHicPNDoCkHicfK/WB8YRerZPvl2EghG4nHSQCgSj5MHQpF4nDwQisTj5IFQJB4nD/QN0krj/CIQjMTjpIFgJB4nDQQj8ThpIBJp43HyQDgSjZMGwpFonDQQjMTjpIFgJB4nDQQj8ThpIBiJx8kD8UgzjkDz8xGJwwOZQAIJJJBAAgkkkAkkkEACCSSQQAIJZAIJJJBAAgn0fz0Aq4+TWH4Q5pIAAAAASUVORK5CYII=");
	opacity: .7;
}

.pictalk-open:hover {
	opacity: 1;
}

/* icon / index & single */

.article .play-ico,
.article .img-ico,
.article .url {
	display: inline-block;
	margin: 0 0.3em -0.1em 0.3em;
	width: 16px;
	height: 16px;
	line-height: 1.2;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

.article .play-ico {
	background-image: url(../img/ico-play.png);
}

.article .img-ico {
	background-image: url(../img/ico-img.png);
}

.article .url {
	background-image: url(../img/ico-link.png);
}

.content .title-index {
	font-size: 1.8em;
	line-height: 1.8;
	color: var(--color-text-2);
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

/* download / single */

.fancybox-stage #download {
	display: flex !important;
	max-width: 800px;
}

.fancybox-stage #download p:first-child {
	width: 33.33333%;
}

.fancybox-stage #download p:last-child {
	margin: 1em;
	width: 66.66667%;
}

.fancybox-stage #download span {
	float: left;
	margin: 0.3em;
	padding: 0.5em 1em;
	border-radius: 2em;
	background-color: var(--color-wrap-2);
}

.fancybox-stage #download span:first-child {
	color: var(--color-text-white);
	background-color: var(--color-text-orange);
}

.fancybox-stage #download .free-download {
	background-color: var(--color-text-cyan);
}

.fancybox-stage #download .free-download a {
	color: var(--color-text-white);
}

.fancybox-stage #download .free-download a:hover {
	color: var(--color-text-black);
}

/* pay / single */

.fancybox-stage #Pay,
.fancybox-stage [id*="Snapic"] {
	display: flex !important;
	max-width: 800px;
}

.fancybox-stage #Pay div:first-child,
.fancybox-stage [id*="Snapic"] div:first-child {
	width: 33.33333%;
}

.fancybox-stage #Pay div:last-child,
.fancybox-stage [id*="Snapic"] div:last-child {
	margin: 1em;
	width: 66.66667%;
	color: var(--color-text-4);
	text-align: justify;
	word-wrap: break-word;
}

.fancybox-stage #Pay div:last-child p,
.fancybox-stage [id*="Snapic"] div:last-child p {
	display: inline-block;
    margin-bottom: 1em;
	padding: 0.5em 1em;
	color: var(--color-text-white);
	border-radius: 2em;
	background-color: var(--color-text-orange);
}

.fancybox-stage #Pay div:last-child li,
.fancybox-stage [id*="Snapic"] div:last-child li {
	display: block;
	position: relative;
    margin-bottom: 0.5em;
	padding-left: 1rem;
	font-size: 1.2em;
	line-height: 1.4;
}

.fancybox-stage #Pay div:last-child li::before,
.fancybox-stage [id*="Snapic"] div:last-child li::before {
	content: '';
	display: block;
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--color-btn-5);
}

/* trip / index & single & about*/

.trip-info {
	display: inline-block;
	width: 100%;
	max-width: 960px;
	margin-bottom: -3em;
	text-align: center;
}

.trip-info.about-me {
	margin-bottom: 3em !important;
	max-width: 960px !important;
}

.trip-grid {
	float: left;
	background-color: var(--color-wrap-2);
	color: var(--color-text-4);
	padding: 3em 0;
	border-radius: 1.5em;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.trip-grid:hover {
	background-color: var(--color-wrap-3);
	-webkit-transform: translate(0,-3px);
	-moz-transform: translate(0,-3px);
	-ms-transform: translate(0,-3px);
	-o-transform: translate(0,-3px);
	transform: translate(0,-3px);
	box-shadow: 0px 10px 15px -10px rgba(0 0 0 / 25%);
}

.trip-info div:first-child {
	margin: 0 5px 0 0;
	width: calc(33.33333% - 5px);
}

.trip-info div {
	margin: 0 5px;
	width: calc(33.33333% - 10px);
}

.trip-info div:last-child {
	margin: 0 0 0 5px;
	width: calc(33.33333% - 5px);
}

.trip-info.about-me div:first-child {
	width: calc(16.66667% - 5px);
}

.trip-info.about-me div {
	width: calc(16.66667% - 10px);
}

.trip-info.about-me div:last-child {
	width: calc(16.66667% - 5px);
}

.trip-info-title {
	font-size: 2em;
	color: var(--color-text-2);
}

.trip-info-text {
	margin-top: 1em;
	font-size: 1.4em;
}

.trip-info.about-me div:last-child .trip-info-text {
	color: var(--color-text-cyan);
}

.trip-grid:hover .trip-info-title {
	color: var(--color-text-3);
}

.trip-grid:hover .trip-info-text {
	color: var(--color-text-orange);
}

/* imgs / index & single */

.img-grid {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	max-width: 960px;
	line-height: 0;
}

.img-grid .img__cover {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: calc(100% * 2/3);
}

.img-grid .img__img {
	position: absolute;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	top: 0;
	left: 0;
}

.img-grid a {
	margin: 0 2px;
	width: 100%;
	line-height: 1.6;
}

.img-grid a:first-of-type {
	margin-left: 0;
	margin-right: 2px;
	width: 100%;
}

.img-grid a:last-of-type {
	margin-left: 2px;
	margin-right: 0;
	width: 100%;
}

.img-grid a img,
.img-grid a:first-of-type img,
.img-grid a:last-of-type img {
	width: 100%;
	max-height: calc(75% * 4/3);
	cursor: zoom-in;
}

.img-grid a img {
	border-radius: 0;
}

.img-grid a:first-of-type img {
	border-radius: 1em 0 0 1em;
}

.img-grid a:last-of-type img {
	border-radius: 0 1em 1em 0;
}

/* soundstory / post */

.soundmap {
	margin-top: -1em;
	width: 100%;
	height: 240px;
	max-width: 360px;
}

#soundmap {
	width: 100%;
	height: 100%;
	border-radius: 1.5em;
}

#opensoundmap {
	display: inline-block;
	margin: 2em 0;
	padding-left: 12px;
	font-size: 1.2em;
	border-left: 3px solid var(--color-text-orange);
	cursor: pointer;
}

/* album / post */

h3.my-album {
	font-size: calc(2em * 0.8);
	font-weight: normal;
}

.my-album {
	float: right;
	bottom: 0;
	padding-right: 15px;
	border-right: 3px solid #ff8800;
}

#album,
[id*="album-"] {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin: 0 auto 5em auto;
	padding: 3em 0;
	width: 100%;
	max-width: 960px;
	overflow: hidden;
	word-wrap: break-word;
}

[id*="album-bike-"] {
	margin: 0 auto !important;
	padding: 0 !important;
}

[id*="album-bike-"] .album-item-last {
	bottom: 0 !important;
}

.album-item {
	margin: 3px;
	width: calc(33.33333% - 6px);
	border-radius: 0.5em;
}

.album__cover {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: calc(100% * 3/3);
	border-radius: 0.5em;
}

.album__img {
	position: absolute;
	width: 100%;
	height: 100% !important;
	object-fit:cover;
	top: 0;
	left:0;
	border-radius: 0.5em;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.album__img:hover {
	-webkit-transform: translate(0,-3px);
	-moz-transform: translate(0,-3px);
	-ms-transform: translate(0,-3px);
	-o-transform: translate(0,-3px);
	transform: translate(0,-3px);
	box-shadow: 0px 10px 15px -10px rgba(0 0 0 / 25%);
}

.album-item-last {
	position: absolute;
	bottom: 3em;
	right: 0;
}

.album-item-last .album__cover {
	background-color: rgba(0 0 0 / 70%);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.album-item-last .album__cover:hover {
	background-color: rgba(0 0 0 / 30%);
}

.album-item-last a {
	color: var(--color-text-white);
}

.album-item-last a:hover {
	color: var(--color-text-white);
}

.album-item-last .album__img {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
}

.album-item-last .album__img:hover {
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-ms-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}

.album-item-last .album-title,
.album-item-last .album-info {
	font-size: 1.8em;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.album-item-last h2 {
	font-weight: normal;
}

.album-item-last span {
	margin: 0.5em 1em;
}

/* store / single(lopwon & snapic) */

#store img {
	border-radius: 2em;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#store img:hover {
	background-color: var(--color-wrap-3);
	-webkit-transform: translate(0,-3px);
	-moz-transform: translate(0,-3px);
	-ms-transform: translate(0,-3px);
	-o-transform: translate(0,-3px);
	transform: translate(0,-3px);
	box-shadow: 0px 10px 15px -10px rgba(0 0 0 / 25%);
}

/* topic / index & single */

#topic {
	overflow: hidden;
	word-wrap: break-word;
	margin-bottom: 5em;
}

.topic {
	padding: 5px;
	margin-bottom: 3em;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.topic:hover {
	box-shadow: 0px 10px 15px -10px rgba(0 0 0 / 25%);
	-webkit-transform: translate(0,-3px);
	-moz-transform: translate(0,-3px);
	-ms-transform: translate(0,-3px);
	-o-transform: translate(0,-3px);
	transform: translate(0,-3px);
}

.topic__link {
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	overflow: hidden;
}

.topic__cover {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: calc(100% * 2/3);
}

.topic-thumb {
	font-size: 1em !important;
	line-height: 2 !important;
}

.topic__img {
	position: absolute;
	width: 100%;
	height: 100% !important;
	object-fit:cover;
	top: 0;
	left:0;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

.topic-info {
	position: relative;
	padding: 0 5px;
	text-align: center;
	word-wrap: break-word;
}

.topic-title {
	margin: 10px auto 5px auto;
	font-size: 1.6em;
	color: var(--color-text-4);
	text-align: center;
	font-weight: normal;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

/* topic-grid */

.topic-item {
	float: left;
	width: 33.33333%;
}

/* cafe / links / website */

.cafe {
	padding-top: 2em;
}

.cafe,
.links,
.website {
	display: inline-block;
	margin-bottom: 3em;
	font-size: 1.4em;
	line-height: 1.4;
	color: var(--color-text-3);
	text-align: center;
	width: 100%;
}

.first-cafe,
.first-links,
.first-website {
	font-weight: bold;
	color: var(--color-text-4);
	border-left: 3px solid var(--color-text-orange);
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.last-cafe,
.last-links,
.last-website {
	color: var(--color-text-cyan);
	/*border-right: 3px solid var(--color-text-orange); 右边线*/
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.pay {
	display: block !important;
}

.renew {
	overflow: initial !important;
}

.renew sup {
	color: var(--color-text-orange);
}

.lose {
	color: var(--color-text-1);
	cursor: not-allowed;
}

.lose sup {
	display: none;
}

.lose:hover sup,
.lose:hover sup,
.lose:hover sup {
	display: block;
}

.cafe sup,
.links sup,
.website sup {
	position: absolute;
	top: 1em;
	right: 0.3em;
}

.cafe span,
.links span,
.website span {
	position: relative;
	display: block;
	float: left;
	margin: 0 5px 10px 5px;
	padding: 0.5em;
	width: calc(16.66667% - 10px);
	background-color: var(--color-wrap-1);
	border-radius: 0.25em;
	white-space: nowrap;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.cafe span:hover,
.links span:hover,
.website span:hover {
	background-color: var(--color-wrap-2);
	-webkit-transform: translate(0,-3px);
	-moz-transform: translate(0,-3px);
	-ms-transform: translate(0,-3px);
	-o-transform: translate(0,-3px);
	transform: translate(0,-3px);
	box-shadow: 0px 10px 15px -10px rgba(0 0 0 / 25%);
}

.fancybox-stage #donate {
	display: flex !important;
	max-width: 800px;
}

.fancybox-stage #donate span {
	float: left;
	margin: 0.3em;
	padding: 0.5em 1em;
	border-radius: 2em;
	background-color: var(--color-wrap-2);
}

/* protected */

.protected {
	padding-top: 5em;
	text-indent: 0;
}

.protected P {
	margin: 0;
}

.protected .word {
	padding-left: 5px;
}

.protected .text,
.protected .submit {
	padding: 5px;
	height: 50px;
	font-size: 18px;
	line-height: 18px;
}

.protected .text {
	max-width: 150px;
}

.protected .submit {
	width: 60px;
	color: var(--color-text-3);
	cursor: pointer;
}

.protected .submit:hover {
	color: var(--color-text-1);
	background-color: var(--color-wrap-4);
}

/* --- filing / title-index --- */

.filing-wrap {
	max-width: 1920px;
	margin: 0 auto;
	margin-bottom: 5em;
	font-size: 1.6em;
	line-height: 1.6;
}

.filing-item {
	display: inline-block;
	margin: 0 0.25em;
	cursor: pointer;
}

.filing-item h2 {
	display: inline-block;
	margin: 0.25em 0;
	padding: 0.5em 1em;
	font-size: 1.2em;
	line-height: 1;
	border-radius: 3em;
	background-color: var(--color-btn-1);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.filing-item:hover h2 {
	box-shadow: 0 15px 15px -10px rgba(0 0 0 / 18%);
}

.filing-item.selected h2 {
	background-color: var(--color-wrap-2);
}

div.filing-item-year {
	display: none;
}

.filing-item-year {
	margin-left: 0.2em;
	border-left: 1px solid var(--color-border-3);
}

.selected h2 {
	margin-top: 0.35em;
}

.filing-item-month {
	margin: 1em 0;
}

.filing-item-month ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.filing-item-month ul li {
	display: flex;
	padding-left: 1em;
	padding-right: 0.5em;
	color: var(--color-text-2);
}

.filing-item-month ul li span {
	margin-right: 0.5em;
	flex-shrink: 0;
	width: 70px;
}

.filing-item-month ul li a {
	color: var(--color-text-cyan);
	text-decoration: none;
	border-bottom: none;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.filing-item-month ul li a:hover {
	color: var(--color-text-4);
}

.filing-item-month ul li sup {
	top: -0.25em;
	margin-left: 0.25em;
	line-height: 1.2;
	cursor: default;
}

/* prev-next / index & single */

#prev-next {
	margin-bottom: 2em;
	font-size: 2em;
}

.index-prev-next,
.single-prev-next {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 300px;
}

.tiy {
	position: relative;
	padding: 1em;
}

.tiy sup {
	top: -1em;
}

#prev-next img {
	display: block;
	position: absolute;
	top: 1.5em;
	left: 50%;
	max-width: 7em;
	max-height: 7em;
	border-radius: 0.25em;
	-webkit-transform: translate(-50%, 0%);
	-moz-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	transition: transform 0.3s ease-in-out;
	z-index: 1;
	opacity: 0;
}

#prev-next div a:hover img {
	-webkit-transform: translate(-50%, 3%);
	-moz-transform: translate(-50%, 3%);
	-ms-transform: translate(-50%, 3%);
	-o-transform: translate(-50%, 3%);
	transform: translate(-50%, 3%);
	opacity: 1;
}

/* fancybox / picture */

.fancybox-bg,
.fancybox-button--close {
	background: var(--color-wrap-black) !important;
	opacity: .97 !important;
}

.fancybox-slide--html .fancybox-content {
	padding: 44px 22px 22px 22px !important;
}

.fancybox-content,
.fancybox-image,
.fancybox-spaceball {
	border-radius: 5px !important;
}


/* -------------------------------------------------------------------
* bottom
* ------------------------------------------------------------------- */

.recommend {
	max-width: 1920px;
}

.recommend-title {
	font-size: 2em !important;
}

/* logo */

.footer-logo {
	height: 152px;
}

.footer-logo img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}

/* navbar */

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 1.6em;
	height: 55px;
}

.navbar-current {
	color: var(--color-text-orange);
}

.navbar a {
	display: block;
	padding: 0 0.5em;
	width: 100%;
	height: 100%;
	line-height: 55px;
}

.grid .grid__item:hover .navbar-name a {
	color: var(--color-text-2);
}

.grid .grid__item:hover .navbar-name a:hover {
	color: var(--color-text-white);
}

/* random */

.random {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 10px;
	margin: 1em 0;
	font-size: 1.6em;
	line-height: 1.6;
	height: 152px;
}

.random li {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.grid .grid__item:hover .random-list a {
	color: var(--color-text-2);
}

.grid .grid__item:hover .random-list a:hover {
	color: var(--color-text-white);
}

/* footer */

.footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1em 0;
	height: 152px;
}

.footer span {
	width: calc(100% - 20px);
	padding: 0 10px;
	text-align: left;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.copyright {
	margin: 0 auto .9em auto;
	font-size: 1.6em;
}

.miit,
.beian {
	margin: 0 auto;
	font-size: 1.4em;
}

.powered {
	margin: .9em auto 0 auto;
	font-size: 1.6em;
}

.grid .grid__item:hover .copyright a,
.grid .grid__item:hover .miit a,
.grid .grid__item:hover .beian a,
.grid .grid__item:hover .powered a {
	color: var(--color-text-2);
}

.grid .grid__item:hover .copyright a:hover,
.grid .grid__item:hover .miit a:hover,
.grid .grid__item:hover .beian a:hover,
.grid .grid__item:hover .powered a:hover {
	color: var(--color-text-white);
}

/* street */

.street {
	position: absolute; /* 避免瀑布流 js 加载不及时 grid__item 的 position: absolute; 属性缺失，导致遮罩满屏 */
	display: flex;
	width: 100%;
	height: 77px;
	font-size: 1.6em;
	justify-content: center;
	align-items: center;
}

.street img {
	width: 100%;
}

.street img:hover {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-ms-transform: scale(1.03);
	-o-transform: scale(1.03);
	transform: scale(1.03);
}

.street:hover .street-info {
	top: 77px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.street .street-info {
	top: 0;
	left: 0;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.street-info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 1em;
	color: var(--color-text-white);
	line-height: 82px;
	text-align: center;
	background-color: rgba(0 0 0 / 50%);
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.street-thumb {
	position: absolute !important;
	top: 5px;
	left: 5px;
	font-size: 0.8em;
	color: var(--color-text-white);
	padding: 2px 7px 1px;
	background-color: rgba(2 203 171 / 70%);
	border-radius: 1em;
	cursor: default;
	z-index: 9;
}

.street-thumb:hover {
	background-color: var(--color-text-cyan);
}

/* gotop */

#gotop {
	position: fixed;
	display: none;
	bottom: 48px;
	right: 18px;
    border-radius: 100%;
	height: 36px;
	width: 36px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px;
	background-color: var(--color-wrap-black);
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAFVBMVEVHcEz///////////////////////+3ygHaAAAABnRSTlMAgKnhlHObIjSDAAAAl0lEQVRIx+3UvQmAQAwF4EQdQDhIbWWt4ABWLuAEJ3L7j6CHgt5fYmeTV748vkoPQKPR/B8zyht0rhVH5Jz9AMkU+ZH9AEkUXSMrQVsvUB7qKp7y0A7AUx6aAVjqhnjqhlgKn1OZoudSpPB9KFH07gsUhnWeorDNUhiXS4aq4645iyEdRfqSjtLvP/dHmClu1lHfF43mvxymGzoYyGZhAgAAAABJRU5ErkJggg==");
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	cursor: pointer;
    opacity: .3;
	z-index: 99;
}

#gotop:hover {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: 1;
}

#gotop a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 1.4;
}

/* -------------------------------------------------------------------
* comments
* ------------------------------------------------------------------- */

#comments {
	padding: 5em 2em 3em 2em !important;
}

.comments {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding-top: 3em;
	font-size: 0.8em;
}

.comment-list {
	margin: 0;
	padding: 0;
}

.comment-body {
	position: relative;
/*	padding: 3em 0 5em 48px; */
	padding: 2em 0 3em 48px;
	list-style: none;
}

.comment-body .comment-children {
	margin: 0;
	padding: 0;
}

.comment-body .comment-children li {
	padding-left: 10px;
	border-left: 1px solid var(--color-border-2);
}

.comment-list>.comment-wrap {
	margin-bottom: 15em;/* 把不同父级comment-parent空行隔开 */
}

.comment-children .comment-wrap {
	margin-bottom: 0;/* 清除子级下comment-parent的空行 */
}

/* comment-author */

.comment-author span img,
.comment-author .noAvater {
	position: absolute;
	left: 8px;
	height: 32px;
	width: 32px;
	border-radius: 50%;
	vertical-align: bottom;
}

.comment-author .noAvater {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 0.1em;
	padding-left: 0.1em;
	font-size: 1.8em;
	font-weight: 100;
	color: var(--color-text-1);
	background-color: var(--color-wrap-2);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.comment-author .noAvater:hover {
	background-color: var(--color-wrap-3);
}

.comment-author .fn {
	font-size: 1.8em;
	font-style: normal;
	font-weight: bold;
	line-height: 32px;
	color: var(--color-text-1);
}

.comment-author .fn a {
	color: var(--color-text-3);
}

.comment-author .fn a:hover {
	color: var(--color-text-cyan);
}

.comments .fn:before,
.comments .fn:after {
	font-size: 87.5%;
	line-height: 112.5%;
}

.comment-author .saynum,
.comment-author .comment-meta i {
	font-size: 1.2em;
	line-height: 1;
	cursor: default;
}

.comment-author .saynum .admin,
.comment-author .saynum .friend,
.comment-author .saynum i,
.comment-author .comment-meta i {
	padding: 0 5px;
}

.comment-author .saynum .friend {
	color: var(--color-text-orange);
}

.comment-author .saynum i,
.comment-author .comment-meta i {
	color: var(--color-text-1);
	font-style: normal;
}

.comment-author .saynum i:hover,
.comment-author .comment-meta i:hover {
	color: var(--color-text-2);
}

.comment-author .comment-meta {
	margin-left: 5px;
	font-size: 1em;
	color: var(--color-text-1);
}

.comment-author .comment-meta:hover {
	color: var(--color-text-2);
}

.noreply {
	margin-left: 5px;
	font-size: 1em;
	color: var(--color-text-cyan);
	cursor: default;
}

.comment-author .comment-awaiting-moderation {
	margin-left: 5px;
	font-size: 1.2em;
	color: var(--color-text-black);
}

/* comment-content */

.comment-content {
	display: inline-block;
	padding: 1em 2em;
	margin-top: 0.5em;
	margin-right: 2em;
	font-size: 2em;
	line-height: 1.6;
	color: var(--color-text-4);
	word-break: break-all;
	background-color: var(--color-wrap-2);
	border-top-left-radius: 0.5em;
	border-top-right-radius: 3em;
	border-bottom-left-radius: 3em;
	border-bottom-right-radius: 3em;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.comment-content:hover {
	background-color: var(--color-wrap-3);
}

.comment-content .at a {
	display: inline-block;
	margin-bottom: 15px;
	color: var(--color-text-1);
	font-size: 0.8em;
	text-align: justify;
}

.comment-content .at a:hover {
	color: var(--color-wrap-4);
}

.comment-content .at:after {
	width: auto;
	max-width: 50vw;
}

/* comment-plugin */

.pinchat {
	margin: 2em 0 10em 0;
	color: var(--color-text-red);
	font-size: 1.8em;
	text-align: center;
}

.prize {
	color: rgb(117, 117, 117) !important;
}

select[type="prize"]::-ms-expand,
select[type="prize"] option::-ms-expand {
	display: none;
}

select[type="prize"] {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-size: 24px;
	background-position: calc(100% - 1em) 50%;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+");
}

/* comment-other */

.comments h3 {
	font-size: 2em;
	font-weight: normal;
}

.comments .jump {
	padding-top: 3em;
}

.comments .notice {
	position: absolute;
	top: -5px;
	right: 0;
	padding-right: 15px;
	border-right: 3px solid var(--color-text-orange);
	cursor: pointer;
}

.comments .closing {
	margin-top: 2em;
	padding-top: 2em;
	text-align: center;
	color: var(--color-text-1);
	clear: both;
}

.comments .cancelreply a,
.comments .comment-logout {
	margin-left: 15px;
	font-size: 1.2em;
	color: var(--color-text-4);
}

.comments .cancelreply a:hover,
.comments .comment-logout a:hover {
	color: var(--color-text-cyan);
}

.comments .comment-reply {
	position: absolute;
	display: inline-block;
	margin-top: 0.5em;
	margin-left: -3.5em;
	background-color: var(--color-wrap-2);
	border-radius: 50%;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.comments .comment-reply:hover {
	background-color: var(--color-wrap-3);
}

.comments .icon-reply {
	display: block;
	width: 24px;
	height: 24px;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../img/ico-reply.png);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: .3;
}

.comments .icon-reply:hover {
	opacity: 1;
}

.comments .respond {
	padding-top: 3em;
}

.comments .respond form {
	padding: 1em 0;
}

/* comment-form */

#comment-form .comment-textarea {
	position: relative;
}

#comment-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="submit"],
select[type="prize"],
button[type="submit"],
textarea,
#comment-form .donate {
	margin: 0.5em 0;
	padding: 1em;
	height: 4em;
	font-size: 1.8em;
	line-height: 1.8;
	color: var(--color-text-1);
	border: 0;
	border-radius: 0.5em;
	background-color: var(--color-wrap-2);
	outline: none !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="submit"]:focus,
select[type="prize"]:focus,
button[type="submit"]:focus,
textarea:focus {
	color: var(--color-text-3);
	border: 1px dashed var(--color-border-5);
	background-color: var(--color-wrap-3);
}

#comment-form .textarea {
	height: 7.5em;
}

#comment-form .text {
	float: left;
	margin-right: 0.5em;
}

#comment-form .submit {
	float: right;
	color: var(--color-text-3);
	cursor: pointer;
}

#comment-form .submit:hover {
	color: var(--color-text-1);
	background-color: var(--color-wrap-4);
}

/* comment-grid */

.grid-full {
	width: 100%;
}

.grid-item {
	width: calc(25% - 0.5em);
}

/* comment-donate */

#comment-form .donate {
    display: flex;
    align-items: center;
    justify-content: center;
	color: var(--color-text-orange);
}

#comment-form .donate:hover {
	color: var(--color-text-3);
	background-color: var(--color-wrap-3);
}

/* -------------------------------------------------------------------
* masonry
* ------------------------------------------------------------------- */

#main {
	display: flex;
	flex-wrap: wrap;
}

.content {
	flex: 1;
	max-width: 1920px;
	margin: 0 auto;
}

.masonry {
	margin: 10px auto;
}

.error {
	font-size: 1.6em;
	line-height: 55px;
	text-align: center;
	color: var(--color-text-1);
	height: 55px;
}

.error :hover {
	color: var(--color-text-white);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.snapic-meta {
	position: relative;
	padding: 0 15px;
	text-align: center;
	word-wrap: break-word;
}

.snapic-title {
	display: inline-block;
	margin: 1em 0;
	font-size: 1.6em;
	color: var(--color-text-4);
	text-align: left;
	font-weight: normal;
}

.snapic-meta sup {
	position: absolute;
	top: 1.5em;
	left: calc(50% + 3.5em);
	padding: 7px;
	font-size: 50%;
	color: var(--color-text-white);
	line-height: 1;
	border-radius: 3em;
	background-color: var(--color-btn-4);
}

.snapic-time,
.snapic-ago {
	margin-bottom: 1em;
	font-size: 1.2em;
	text-align: center;
}

.snapic-time {
	color: var(--color-text-2);
}

.snapic-ago {
	color: var(--color-text-orange);
}

.snapic-excerpt {
	display: inline-block;
	margin: 1em 0 2em 0;
	font-size: 1.4em;
	line-height: 1.4;
	color: var(--color-text-3);
	text-align: justify;
}

.snapic-meta:hover .snapic-title {
	color: var(--color-text-white) !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.snapic-meta:hover .snapic-time {
	color: var(--color-text-2) !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.snapic-meta:hover .snapic-excerpt {
	color: var(--color-text-1) !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.grid .grid__item:hover .snapic-title {
	color: var(--color-text-1);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.grid .grid__item:hover .snapic-time {
	color: var(--color-text-3);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.grid .grid__item:hover .snapic-excerpt {
	color: var(--color-text-2);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.category {
	position: absolute !important;
	display: none;
	top: 1.2em;
	right: 0.7em;
	font-size: 1.6em;
	line-height: 1.2;
	padding: 0.25em 0.5em;
	background-color: rgba(50 50 50 / 70%);
	border-radius: 1em;
	z-index: 9;
}

.category a {
	color: var(--color-text-white);
}

.category:hover {
	background-color: var(--color-text-orange);
}

.category-description {
	margin: 0 0 2em 0;
	text-align: center;
}

.category-description a {
	color: var(--color-text-orange);
}

#play-ico {
	position: relative;
}

.tv-ico {
	position: absolute;
	width: 100px;
	height: 100px;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	background: url(../img/ico-tv.png) no-repeat center center;
	background-size: 75% 75%;
	z-index: 9;
}

.vcr-ico {
	position: absolute;
	width: 100px;
	height: 100px;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	background: url(../img/ico-vcr.png) no-repeat center center;
	background-size: 75% 75%;
	z-index: 9;
}

.vol-ico {
	position: absolute;
	width: 180px;
	height: 120px;
	top: calc(50% - 75px);
	left: calc(50% - 90px);
	background: url(../img/ico-vol.png) no-repeat center center;
	background-size: 100% 100%;
	z-index: 9;
}

#play-ico:hover .tv-ico,
#play-ico:hover .vcr-ico,
#play-ico:hover .vol-ico {
	-webkit-transform: scale(.79);
	-moz-transform: scale(.79);
	-ms-transform: scale(.79);
	-o-transform: scale(.79);
	transform: scale(.79);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#play-ico .tv-ico,
#play-ico .vcr-ico,
#play-ico .vol-ico {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.music-ico {
	position: absolute !important;
	top: calc(100% - 18px);
	right: calc(0% + 13px);
	background: url(../img/ico-music.png) no-repeat center center;
	background-size: 36px 36px;
	background-color: rgba(255 136 0 / 70%);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	z-index: 9;
}

.music-ico:hover {
	background-color: rgba(255 136 0 / 100%);
}

.grid__item:hover .category {
	display: block;
}

.thumb {
	position: absolute !important;
	top: 1em;
	left: 0.7em;
	font-size: 1.8em;
	line-height: 1.4;
	color: var(--color-text-white);
	padding: 2px 7px 1px;
	background-color: rgba(2 203 171 / 70%);
	border-radius: 3em;
	cursor: default;
	z-index: 9;
}

.thumb:hover {
	background-color: var(--color-text-cyan);
}

#search {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
	width: 100%;
	height: 55px;
}

.search input[type="text"],
.search button[type="submit"] {
	padding: 0.5em;
	height: 2.5em;
	font-size: 1.4em;
	line-height: 1;
}

.search input[type="text"] {
	width: 70%;
    text-align: center;
}

.search button[type="submit"] {
	width: 20%;
	color: var(--color-text-3);
	cursor: pointer;
}

.search button[type="submit"]:hover {
	color: var(--color-text-1);
	background-color: var(--color-wrap-4);
}

.poster {
	margin: 0 auto;
	padding: 2em 0;
	max-width: 960px;
	min-height: 55px;
	border-radius: 1em;
	background-color: var(--color-wrap-white) !important;
/*	opacity: .5; 屏蔽ad时显示 */
}

/* 屏蔽ad时显示
.poster:before {
	content: 'Please consider disabling adblock';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 55px;
}

.poster:hover {
	color: var(--color-text-white);
	background-color: var(--color-wrap-white) !important;
	opacity: 1;
}
*/

.poster p {
	padding: 0;
	font-size: 1.2em;
	word-wrap: break-word;
	overflow: hidden;
}

/* grid */

.grid {
	position: relative;
	z-index: 2;
	display: block;
	margin: 0 auto;
	height: auto !important;
}

.grid--hidden {
	position: fixed !important;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	opacity: 0;
}
/* 加载动画，与音频拖动进度加载冲突
.js .grid--loading::before,
.js .grid--loading::after {
	content: '';
	z-index: 1000;
}

.js .grid--loading::before {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--color-wrap-4);
}

.js .grid--loading::after {
	position: absolute;
	top: calc(25vh - 20px);
	left: 50%;
	width: 40px;
	height: 40px;
	margin: 0 0 0 -20px;
	border: 5px solid var(--color-border-3);
	border-bottom-color: var(--color-border-5);
	border-radius: 50%;
	animation: animLoader 0.8s linear forwards infinite;
}*/

.grid__sizer {
	margin-bottom: 0 !important;
}

.grid__link,
.grid__img {
	display: block;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

.grid__link {
	max-height: 1280px;
	overflow: hidden;
}

.grid__img {
	width: 100%;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.grid__img:hover {
	-webkit-transform: scale(.97);
	-moz-transform: scale(.97);
	-ms-transform: scale(.97);
	-o-transform: scale(.97);
	transform: scale(.97);
}

.grid__deco {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.grid__deco path {
	fill: none;
	stroke: var(--color-wrap-white);
	stroke-width: 2px;
}

.grid__reveal {
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	background-color: var(--color-wrap-4);
}

.grid .grid__item {
	background-color: var(--color-wrap-white);
}

.grid .grid__item,
.grid .grid__sizer {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: calc(50% - 10px);
	margin: 5px 5px 5px;
	/*-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;*/
	border-radius: 0.5em;
	overflow: hidden;
}

.grid .grid__item:hover,
.grid .grid__sizer:hover {
	background-color: var(--color-wrap-4);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	box-shadow: 1px 3px 15px -5px var(--color-border-black);
}

/* -------------------------------------------------------------------
* media
* ------------------------------------------------------------------- */

/* music */

.music {
	display: none;
	padding: 0 !important;
}

.music .holder .loading .loading__spinner {
	left: 10px !important;
	border: 2px solid var(--color-border-white) !important;
	border-right-color: rgba(0 0 0 / 0%) !important;
	animation: spin 0.4s linear infinite !important;
}

.music .holder {
	position: fixed !important;
	bottom: 118px !important;
	right: 18px;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	background-color: var(--color-text-orange) !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	z-index: 99;
}

.music .holder:hover {
	opacity: .7 !important;
}

.music .holder svg {
	width: 9px !important;
	height: 12px !important;
	padding-left: 0 !important;
	opacity: 1 !important;
}

.music .holder svg path {
	fill: var(--color-wrap-white) !important;
}

.music .holder .play-pause-btn {
	width: 36px !important;
	height: 36px !important;
}

.music .controls,
.music .volume {
	display: none !important;
}

/* soundstory-post */

.sound {
	display: flex !important;
}

.sound .holder .loading .loading__spinner {
	border: 2px solid var(--color-border-white) !important;
	border-right-color: rgba(0 0 0 / 0%) !important;
	animation: spin 0.4s linear infinite !important;
}

.sound .holder {
	border-radius: 1.5em !important;
	width: 48px !important;
	height: 36px !important;
	background-color: var(--color-text-orange) !important;
}

.sound .holder svg {
	width: 12px !important;
	height: 18px !important;
	padding-left: 1px !important;
	opacity: 1 !important;
}

.sound .holder svg path {
	fill: var(--color-text-white) !important;
}

.sound .holder .play-pause-btn {
	width: 48px !important;
	height: 36px !important;
}

.sound .volume {
	display: none !important;
}

/* soundstory-category */

.soundstory {
	display: flex !important;
	max-width: 600px !important;
	height: 56px !important;
}

.soundstory .volume {
	display: block !important;
}

/* -------------------------------------------------------------------
* navigator
* ------------------------------------------------------------------- */

.page-navigator {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
	justify-content: center;
	font-size: 1.2em;
}

.page-navigator li {
	margin: 0 0.25em;
}

.page-navigator a,
.page-navigator span {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.25em;
	width: auto;
	height: 3em;
}

.page-navigator a {
	padding: 0.5em;
	min-width: 3em;
}

.page-navigator span {
	padding: 0;
	min-width: auto;
}

.page-navigator .prev a {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 2em;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAFVBMVEVHcEz///////////////////////+3ygHaAAAABnRSTlMAgKnhlHObIjSDAAAAaklEQVRIx2NgGAWjgALAaCxAWJFYWiJhg9LSkokwiLAioEFpKUQYlCZAhEGJowZRxyAHasUa1QxSIKTILC0tiYEqioiyDuTwUaMGxKgUBmqkPBKMEiDGqFSqFIfEFaxEFdHEFfajYBRgAAAtKjnNh/YM0wAAAABJRU5ErkJggg==");
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.page-navigator .current a,
.grid__item:hover .current a {
	color: var(--color-text-orange);
}

.page-navigator .next a {
	padding: 1.5em;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 2em;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAFVBMVEVHcEz///////////////////////+3ygHaAAAABnRSTlMAgKnhlHObIjSDAAAAbElEQVRIx2NgGAWjgHTAaCxAWJFYWiJhRWZpaQLEKCJslFsaEUYxphFjlNioUdQ1iiWNajFIRaOYiDJKLS0tmSqKiLJOjQiHjxpEJYOISSUs1DKIqOwURky6Jao4JKpgJaqIJqqwHwWjADcAALCFOicLBA7VAAAAAElFTkSuQmCC");
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.page-navigator .next a:hover {
	border-radius: 50%;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/* category */

.grid__item .page-navigator {
	height: 55px;
}

.grid__item .page-navigator:hover span {
	color: var(--color-text-3);
}

.grid__item .page-navigator a:hover {
	color: var(--color-text-white);
}

.grid__item .page-navigator .next a {
	background-color: var(--color-text-orange);
}

.grid__item .page-navigator .next a:hover {
	border-radius: 50%;
}

.grid__item .page-navigator .prev a {
	background-color: var(--color-btn-3);
}

.grid__item .page-navigator .prev a:hover {
	border-radius: 50%;
	background-color: var(--color-text-orange);
}

/* single */

#comments .page-navigator {
	padding: 5em 0;
}

#comments .page-navigator a:hover {
	color: var(--color-text-white);
	background-color: var(--color-btn-3);
}

#comments .page-navigator .prev a,
#comments .cid-2 .page-navigator .next a {
	background-color: var(--color-btn-3);
}

#comments .page-navigator .prev a:hover,
#comments .cid-2 .page-navigator .next a:hover {
	border-radius: 50%;
	background-color: var(--color-text-orange);
}

#comments .page-navigator .next a,
#comments .cid-2 .page-navigator .prev a {
	background-color: var(--color-text-orange);
}

#comments .page-navigator .next a:hover,
#comments .cid-2 .page-navigator .prev a:hover {
	border-radius: 50%;
}

/* -------------------------------------------------------------------
* animation
* ------------------------------------------------------------------- */

.single-title {
	-webkit-animation: 2s ease-out backwards;
	-moz-animation: 2s ease-out backwards;
	-ms-animation: 2s ease-out backwards;
	-o-animation: 2s ease-out backwards;
	animation: 2s ease-out backwards;
}

.single-title {
	-webkit-animation-name: fadein ;
	-moz-animation-name: fadein;
	-ms-animation-name: fadein;
	-o-animation-name: fadein;
	animation-name: fadein;
}

@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {opacity: 1;}
}

@-moz-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------
* markdown
* ------------------------------------------------------------------- */

.article sup[id*="fnref-"] {
	top: -0.7em;
	padding: 7em 0.25em 0.1em 0.15em;
	font-weight: bold;
	line-height: 1.2;
	border-radius: 0.25em;
}

.article .footnotes li[id*="fn-"] {
	margin-bottom: -7em;
	padding: 7em 0.5em 1em;
	font-size: 0.95em;
	color: var(--color-text-2);
	border-radius: 0.25em;
}

.article .footnotes li[id*="fn-"]:first-child {
	margin-top: -7em !important;
}

.article .footnotes li[id*="fn-"]:last-child {
	margin-bottom: 0 !important;
}

.article sup[id*="fnref-"]:target a,
.article .footnotes li[id*="fn-"]:target,
.article .footnotes li[id*="fn-"]:target a {
	color: var(--color-text-orange);
}

.article sup[id*="fnref-"]:target a:hover,
.article .footnotes li[id*="fn-"]:target a:hover {
	color: var(--color-text-4);
}

.article .footnotes li[id*="fn-"]::marker {
	font-style: italic;
	font-weight: bold;
}

.article sup[id*="fnref-"] a,
.article .footnotes li[id*="fn-"] a {
	border-bottom: 0 !important;
}

.article center,
.article table,
.article pre,
.article ol,
.article ul {
	font-size: 1.6em;
	line-height: 1.4;
}

.article code {
	font-family: "Arial","Microsoft JhengHei",Apple LiGothic Medium,sans-serif;
	text-indent: 0;
	overflow: hidden;
	text-align: justify;
	word-break: break-all;
	word-wrap: break-word;/* Internet Explorer 5.5+ */
	white-space: break-spaces; /* Firefox */
}

.article table,
.article table th,
.article p code {
	color: var(--color-text-4);
	border-radius: 1.5em;
	background-color: var(--color-wrap-3);
}

.article pre {
	margin: 2em 0;
	padding: 0 1em;
	border-radius: 0 1.5em 1.5em 0;
	border-left: 1px solid var(--color-border-3);
	background-color: transparent;
}

.article pre code {
	padding: 0;
	font-size: 0.95em;
	color: var(--color-text-2);
}

pre[class*=language-] {
	background-color: var(--color-wrap-1) !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.article pre[class*=language-]:hover {
    background-color: var(--color-wrap-2) !important;/* 代码高亮底色hover */
}

.article blockquote {
	display: inline-block;
	margin: 0;
	padding: 7px 1.5em 5px;
	font-size: 1.4em;
	color: var(--color-text-4);
	background-color: var(--color-wrap-2);
	border-left: 3px solid var(--color-text-orange);
	border-radius: 0.25em;
}

.article blockquote p {
	color: var(--color-text-1);
	margin: 0;
}

.article blockquote p a:hover {
	color: var(--color-text-white);
}

.article ol,
.article ul {
	margin: 1.5em 0;
	padding-left: 2.2em;
}

.article hr {
	margin: 5em 0 5.5em;
	width: 30px;
	border: 1px dashed var(--color-border-3);
	border-width: 1px 0 0 0;
}

/* -------------------------------------------------------------------
* mobile
* ------------------------------------------------------------------- */

@media screen and (min-width: 60em) {

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc((100% / 3) - 10px);
		margin: 5px 5px 5px;
	}

}

@media screen and (min-width: 70em) {

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc(25% - 20px);
		margin: 5px 10px 15px;
	}

}

@media screen and (min-width: 120em) {

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc(20% - 20px);
		margin: 5px 10px 10px;
	}

	.recommend .grid__item,
	.recommend .grid__sizer {
		width: calc(25% - 20px);
		margin: 5px 10px 15px;
	}

	.logo,
	.logo a {
		left: calc(50% - 930px);
	}

	.music .holder,
	#gotop {
		right: calc(50% - 930px);
	}

}

@media screen and (max-width: 50em) {

	#main {
		display: block;
	}

	.content {
		max-width: 100vw;
	}

	.grid__img:hover {
		-webkit-transform: scale(1);/* 移动端禁止滑过图片缩放效果 */
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

}

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

	.album-item-last .album-title,
	.album-item-last .album-info {
		font-size: 1.6em;
	}

	.cafe span,
	.links span,
	.website span {
		width: calc(20% - 10px);
	}

}

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

	.about-bgimg.bgimg-1599 {
		background-position: 20% 80%;
	}

	.about-bgimg.bgimg-2863 {
		background-position: 50% 80%;
	}
	
	.about-bgimg.bgimg-2864 {
		background-position: 80% 80%;
	}	

	.single-title {
		font-size: 3em;
		text-align: center;
	}

	.single-title p {
		text-align: justify;
	}

	.single-meta {
		justify-content: center;
	}

	.fancybox-stage #download,
	.fancybox-stage #Pay,
	.fancybox-stage [id*="Snapic"] {
		flex-wrap: wrap;
		max-width: 360px;
	}

	.fancybox-stage #download p,
	.fancybox-stage #Pay div,
	.fancybox-stage [id*="Snapic"] div {
		width: 100% !important;
	}

	.fancybox-stage #download p:last-child {
		margin: 2em 0;
	}

	.topic-item {
		width: 50%;
	}

	.topic-title {
		font-size: 1.4em;
	}

	.album-item-last .album-title,
	.album-item-last .album-info {
		font-size: 1.4em;
	}

	.cafe span,
	.links span,
	.website span {
		width: calc(25% - 10px);
	}

}

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

	.header {
		height: calc(100vh - 55px);
		min-height: 480px;
		max-height: 1200px;
	}

	.leadstory-title {
		font-size: 4.8em;
	}

	.masonry {
		margin: 5px auto;
	}

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc(50% - 10px);
		margin: 5px 5px 5px;
	}

	.category {
		display: block !important;/* 移动端固定显示分类 */
		padding: 3px 7px 2px;
	}

	.category {
		font-size: 1.4em;
	}

	.thumb {
		top: 0.75em;
	}

	#prev-next {
		padding: 1em 2em;
	}

	.trip-info.about-me div:first-child {
		margin: 5px 5px 5px 0;
		width: calc(33.33333% - 5px) !important;
	}

	.trip-info.about-me div {
		margin: 5px;
		width: calc(33.33333% - 10px) !important;
	}

	.trip-info.about-me div:last-child {
		margin: 5px 0 5px 5px;
		width: calc(33.33333% - 5px) !important;
	}

	.trip-info-title {
		font-size: 1.6em;
	}

	.album-item-last .album-title,
	.album-item-last .album-info {
		font-size: 1.2em;
	}

	.cafe span,
	.links span,
	.website span {
		width: calc(33.33333% - 10px);
	}

	.bgimg-meta span:before,
	.bgimg-meta span:after,
	.powered a:before,
	.powered a:after,
	#gotop a:before,
	#gotop a:after,
	.my-album:before,
	.my-album:after,
	.my-gear:before,
	.my-gear:after,
	.my-tags:before,
	.my-tags:after,
	.comments .notice:before,
	.comments .notice:after,
	.comments .icon-reply:before,
	.comments .icon-reply:after,
	.comment-content .at:before,
	.comment-content .at:after,
	#Lopwon_Prize:before,
	#Lopwon_Prize:after,
	#Lopwon_Status:before,
	#Lopwon_Status:after,
	.trip-grid.about:before,
	.trip-grid.about:after,
	.cafe span:before,
	.cafe span:after,
	.links span:before,
	.links span:after,
	.website span:before,
	.website span:after,
	.comment-ip span:before,
	.comment-ip span:after {
		display: none;/* 隐藏提示 */
	}

	.comment-list>.comment-body {
		padding: 3em 0 5em 40px;
	}

	.comment-author span img,
	.comment-author .noAvater	{
		left: 0;
	}

	.comment-body .comment-children li {
		padding-left: 5px;
	}

	#comment-form .text,
	#comment-form .submit {
		float: none;
	}

	.grid-item {
		width: 100%;
	}

	.music .holder {
		right: 18px !important;
		bottom: 188px !important;
	}

	#gotop {
		bottom: 120px;
	}

}

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

	.leadstory-title {
		font-size: 3.8em;
	}

	.grid .grid__item,
	.grid .grid__sizer {
		width: calc(100% - 10px);
	}

	/* 文章页相册类两栏图文 */
	.grid .trip__item {
		width: calc(50% - 10px) !important;
		margin: 5px 5px 5px !important;
	}

	/* 文章页推荐类两栏图文
	.grid .random__item {
		width: calc(50% - 10px) !important;
		margin: 5px 5px 5px !important;
	}

	.recommend-title {
		font-size: 1.6em !important;
	}*/

	.snapic-meta {
		padding: 0 10px;
	}

	.snapic-excerpt {
		font-size: 1.6em;
	}

	.album-item-last .album-title,
	.album-item-last .album-info {
		font-size: 1em;
	}

	.cafe span,
	.links span,
	.website span {
		width: calc(50% - 10px);
	}

	.selected h2 {
		margin-top: 3em;
	}

	.filing-item-month ul li {
		padding-right: 0;
	}

	.fancybox-slide {
		padding: 6px !important;
	}

}

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

	.leadstory-title {
		font-size: 2.8em;
	}

	#prev-next {
		padding: 1em;
	}

	#prev-next img {
		max-width: 5em;
		max-height: 5em;
	}

}

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

	.leadstory-title {
		font-size: 2.8em;
	}

	.index-prev-next,
	.single-prev-next {
		flex-direction: column;
	}

	#topic {
		padding: 3em 2em;
	}

	.topic {
		border-radius: 38px 0 0 38px;
		box-shadow: 0px 10px 15px -10px rgba(0 0 0 / 5%);
	}

	.topic-item {
		float: left;
		width: 100%;
	}

	.topic__link {
		height: 75px;
	}

	.topic__cover {
		float: left;
		width: 75px;
		height: 75px;
		padding-top: 75px;
	}

	.topic-thumb {
		top: 0;
		left: 0;
		padding: 0 5px;
		line-height: 1.5;
		background-color: rgba(2 203 171 / 70%);
		border-top-left-radius: 0;
	}

	.topic__img {
		border-radius: 38px;
	}

	.topic-info {
		float: right;
		width: calc(100% - 75px);
		height: 75px;
		padding: 0 0 0 10px;
	}

	.topic-title {
		margin: 0;
		line-height: 75px;
	}

}