/* Pin front-end template. Kept outside compiled Discuz CSS so source hooks stay untouched. */
html {
	background: #f4f0e8;
}

body {
	background: linear-gradient(180deg, #fbf8f2 0, #f4f0e8 260px, #f7f7f5 720px);
	color: #2b2d32;
	-webkit-font-smoothing: antialiased;
	min-width: 0;
}

a {
	color: #9a1f18;
}

a:hover {
	color: #c83a2a;
}

#toptb {
	min-width: 0;
	border-bottom-color: #e4ddd5;
	background: rgba(255, 255, 255, 0.92);
	color: #64666d;
}

.wp {
	box-sizing: border-box;
	width: auto;
	max-width: 1200px;
}

#toptb a {
	color: #4b4f58;
}

#toptb a:hover {
	color: #9a1f18;
	text-decoration: none;
}

#hd {
	border-bottom: 0;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 1px 0 rgba(38, 29, 20, 0.08);
}

#hd .wp {
	padding-top: 14px;
}

#nv {
	height: 38px;
	border-radius: 6px;
	background: #b63126;
	box-shadow: 0 10px 24px rgba(154, 31, 24, 0.18);
}

#nv li {
	height: 38px;
	line-height: 38px;
	background: none;
	font-size: 14px;
}

#nv li a {
	height: 38px;
	padding: 0 17px;
	color: #fff;
}

#nv li.a,
#nv li a:hover,
#nv li.hover a,
#nv li.hover a:hover {
	background: #8f211a;
}

#nv li:first-child.a,
#nv li:first-child a:hover {
	border-radius: 6px 0 0 6px;
}

#scbar {
	margin-top: 12px;
	border: 1px solid #eadfd8;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(52, 35, 20, 0.05);
}

#scbar_txt,
#scbar_type {
	border-color: #e4ddd5;
}

#scbar_btn,
#scform_submit,
.pnc,
a.pnc {
	background: #b63126;
	border-color: #9a1f18;
}

#pt,
#chart,
.bm,
.fl {
	border-color: #e4ddd5;
	background: rgba(255, 255, 255, 0.9);
}

.bm,
.fl,
.bmw {
	border-radius: 8px;
	box-shadow: 0 8px 18px rgba(52, 35, 20, 0.04);
}

.bm_h,
.fl .bm_h,
.bmw .bm_h {
	border-color: #eadfd8;
	background: #fff5ef;
}

#ct {
	margin-top: 14px;
}

#toptb .pin-mode-toggle {
	position: relative;
	float: right;
	box-sizing: border-box;
	width: 38px;
	height: 18px !important;
	margin: 5px 5px 5px 6px;
	padding: 0 !important;
	border: 1px solid #d8c9bb;
	border-radius: 9px;
	background: #fff7df;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
	overflow: hidden;
	text-decoration: none;
	transform: translateX(-87px);
	z-index: 3;
}

#toptb #i18n-switch {
	position: relative;
	transform: translateX(45px);
	z-index: 2;
}

#toptb #i18n-switch_menu {
	transform: translateX(45px);
}

#toptb .pin-mode-toggle:before {
	position: absolute;
	top: 4px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d98b12;
	box-shadow: 0 0 0 3px rgba(217, 139, 18, 0.16);
	content: "";
}

#toptb .pin-mode-toggle span {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border: 1px solid rgba(120, 88, 48, 0.18);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(89, 61, 34, 0.24);
	transition: left 0.18s ease;
}

#toptb .pin-mode-toggle-dark {
	border-color: #455064;
	background: #202636;
}

#toptb .pin-mode-toggle-dark:before {
	left: auto;
	right: 7px;
	background: #d7e0ff;
	box-shadow: -3px 0 0 #202636, 0 0 0 2px rgba(215, 224, 255, 0.14);
}

#toptb .pin-mode-toggle-dark span {
	left: 20px;
	border-color: rgba(255, 255, 255, 0.18);
	background: #f0f3ff;
}

.fansbar_xh {
	margin: 0 0 18px;
	padding: 10px;
	border: 1px solid #e6d8ce;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 18px 36px rgba(52, 35, 20, 0.08);
}

.fansbar_xh .mrmy {
	padding: 0 2px 8px;
	color: #6f6257;
	line-height: 24px;
}

.fansbox {
	width: 100%;
	border: 0;
}

.fansbox table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.fansbox td {
	vertical-align: top;
}

.fansbox tr > td:first-child {
	width: 400px;
	padding: 0 !important;
}

.fansbox tr > td + td {
	padding: 0 0 0 12px !important;
}

.fansbox .tabs {
	display: flex;
	height: 33px;
	margin: 0;
	padding: 0;
	border: 1px solid #e5d8ce;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: #fbf8f2;
	overflow: hidden;
}

.fansbox .tabs li {
	height: 33px;
	padding: 0 13px;
	border-right: 1px solid #e5d8ce;
	color: #555b65;
	font-weight: 600;
	line-height: 33px;
}

.fansbox .tabs li a {
	color: inherit;
}

.fansbox .tabs li.current {
	background: #b63126;
	color: #fff;
}

.fansbox .tabs li.current a {
	color: #fff;
}

.fansbox .imagebody,
.fansbox .threadbody {
	height: 285px;
	border: 1px solid #e5d8ce;
	border-radius: 0 0 8px 8px;
	background: #fff;
	overflow: hidden;
}

.fansbox .imagebody {
	width: 400px;
}

.fansbox .imagebody .frame,
.fansbox .imagebody .block,
.fansbox .imagebody .dxb_bc,
.fansbox .imagebody .module,
.fansbox .imagebody .slideshow,
.fansbox .imagebody .slideshow li {
	width: 100% !important;
	height: 100% !important;
}

.fansbox .imagebody img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.fansbox .slideshow span.title {
	height: 34px;
	padding: 0 12px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28));
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 34px;
	text-shadow: none;
}

.slidebar {
	top: 10px !important;
	right: 10px !important;
}

.slidebar li {
	width: 17px;
	height: 17px;
	border-radius: 4px;
	background: rgba(28, 30, 34, 0.8);
	color: #fff;
	font-size: 11px;
	line-height: 17px;
}

.slidebar li.on {
	background: #e84a2a;
}

.fansbox .threadbody {
	width: auto;
}

.fansbox .threadbox {
	width: 100%;
	height: 252px;
	padding: 4px 0;
}

.threadprefix ul {
	background: none;
	counter-reset: pin-thread;
}

.threadbox li {
	position: relative;
	height: 26px;
	margin: 0;
	padding: 0 10px 0 32px;
	border-bottom: 1px dashed #e5d8ce;
	line-height: 26px;
}

.threadbox li:before {
	position: absolute;
	top: 6px;
	left: 9px;
	width: 16px;
	height: 14px;
	border-radius: 4px;
	background: #f0a21f;
	color: #fff;
	content: counter(pin-thread);
	counter-increment: pin-thread;
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
}

.threadbox li:nth-of-type(2):before { background: #e08421; }
.threadbox li:nth-of-type(3):before { background: #37a665; }
.threadbox li:nth-of-type(4):before { background: #42a36e; }
.threadbox li:nth-of-type(5):before { background: #d65f91; }
.threadbox li:nth-of-type(6):before { background: #cf6688; }
.threadbox li:nth-of-type(7):before { background: #579fe3; }
.threadbox li:nth-of-type(8):before { background: #6f9de0; }
.threadbox li:nth-of-type(9):before { background: #9d74dd; }
.threadbox li:nth-of-type(10):before { background: #d56e9e; }

.fansbox .threadbox li cite {
	display: none;
}

.fansbox .threadbox li em {
	height: 26px;
	color: #252a32;
	font-size: 13px;
}

.fansbox .threadbox li label,
.fansbox .threadbox li label a {
	color: #5c6572;
}

.threadinfo {
	border-color: #dfd1c6;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 12px 30px rgba(52, 35, 20, 0.14);
}

html.pin-mode-dark {
	background: #0f1218;
}

html.pin-mode-dark body {
	background: linear-gradient(180deg, #161a22 0, #10131a 360px, #0e1116 100%);
	color: #d9dde6;
}

html.pin-mode-dark a {
	color: #f09787;
}

html.pin-mode-dark a:hover {
	color: #ffb4a6;
}

html.pin-mode-dark #toptb,
html.pin-mode-dark #hd,
html.pin-mode-dark #pt,
html.pin-mode-dark #chart,
html.pin-mode-dark .bm,
html.pin-mode-dark .fl,
html.pin-mode-dark .fansbar_xh {
	border-color: #2b3340;
	background: rgba(23, 27, 35, 0.94);
	color: #d9dde6;
	box-shadow: none;
}

html.pin-mode-dark #toptb a {
	color: #d9dde6;
}

html.pin-mode-dark #nv {
	background: #b94838;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

html.pin-mode-dark #nv li.a,
html.pin-mode-dark #nv li a:hover,
html.pin-mode-dark #nv li.hover a,
html.pin-mode-dark #nv li.hover a:hover {
	background: #7f2a24;
}

html.pin-mode-dark #scbar,
html.pin-mode-dark .fansbox .imagebody,
html.pin-mode-dark .fansbox .threadbody {
	border-color: #2b3340;
	background: #171b23;
}

html.pin-mode-dark #scbar_txt,
html.pin-mode-dark #scbar_type,
html.pin-mode-dark input,
html.pin-mode-dark textarea,
html.pin-mode-dark select {
	border-color: #303846;
	background: #11151d;
	color: #d9dde6;
}

html.pin-mode-dark .bm_h,
html.pin-mode-dark .fl .bm_h,
html.pin-mode-dark .bmw .bm_h,
html.pin-mode-dark .fansbox .tabs {
	border-color: #2b3340;
	background: #1d232d;
}

html.pin-mode-dark .fansbar_xh .mrmy,
html.pin-mode-dark .fansbox .tabs li,
html.pin-mode-dark .fansbox .threadbox li label,
html.pin-mode-dark .fansbox .threadbox li label a {
	color: #b8c0cc;
}

html.pin-mode-dark .fansbox .threadbox li em {
	color: #eef2f8;
}

html.pin-mode-dark .threadbox li {
	border-bottom-color: #2b3340;
}

html.pin-mode-dark .threadinfo,
html.pin-mode-dark .p_pop,
html.pin-mode-dark .p_pof,
html.pin-mode-dark .sllt {
	border-color: #303846;
	background: #171b23;
	color: #d9dde6;
}

@media screen and (max-width: 1220px) {
	.wp {
		width: calc(var(--pin-vw, 100vw) - 24px);
		min-width: 0 !important;
		max-width: calc(var(--pin-vw, 100vw) - 24px);
		margin-right: 12px;
		margin-left: 12px;
	}

	#wp,
	#ct,
	.mn,
	.ct2 .mn,
	.ct2 .sd {
		float: none;
		box-sizing: border-box;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100%;
	}

	#ct.wp {
		width: calc(var(--pin-vw, 100vw) - 24px) !important;
		min-width: 0 !important;
		max-width: calc(var(--pin-vw, 100vw) - 24px) !important;
	}

	#hd .wp,
	#wp.wp {
		width: calc(var(--pin-vw, 100vw) - 24px) !important;
		min-width: 0 !important;
		max-width: calc(var(--pin-vw, 100vw) - 24px) !important;
		margin-right: 12px;
		margin-left: 12px;
	}

	.hdc,
	#nv,
	#nv_ph,
	#mu,
	#scbar,
	#scbar_form,
	#pt,
	#an,
	#an dl,
	#an dd,
	#anc,
	#ancl {
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.hdc .fastlg,
	#lsform {
		display: none;
	}

	#pt .y,
	#an .y {
		float: none;
		width: auto !important;
	}

	.mn {
		overflow: visible;
	}

	#toptb {
		min-width: 0;
	}

	.fansbar_xh {
		padding: 8px;
	}

	.fansbox table,
	.fansbox tbody,
	.fansbox tr,
	.fansbox td {
		display: block;
		width: 100% !important;
	}

	.fansbox tr > td + td {
		padding: 12px 0 0 !important;
	}

	.fansbox .imagebody {
		width: 100%;
		height: 230px;
	}

	.fansbox .threadbody {
		height: 300px;
	}

	.fansbox .tabs {
		overflow-x: auto;
	}

	.fansbox .tabs li {
		flex: 0 0 auto;
	}
}

@media screen and (max-width: 800px) {
	#hd .wp {
		padding-top: 10px;
	}

	#nv {
		height: auto;
		overflow-x: auto;
		white-space: nowrap;
	}

	#nv ul {
		display: flex;
		min-width: max-content;
	}

	#nv li {
		float: none;
	}
}