/* ===== About section v4 — gold editorial ===== */
body.about-page{
	margin:0;
	color:#111;
	background:#FFFFFA;
	font-family:"Microsoft YaHei","PingFang SC",sans-serif;
	overflow-x:hidden;
}

.about-v4{
	position:relative;
	min-height:100vh;
}

.about-v4-scene{
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:0;
	overflow:hidden;
	perspective:900px;
}
.about-v4-scene-inner{
	position:absolute;
	inset:-8%;
	transform-style:preserve-3d;
	transition:transform .12s ease-out;
}
.about-v4-grid{
	position:absolute;
	inset:0;
	background-image:
		linear-gradient(rgba(238,193,73,.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(238,193,73,.07) 1px, transparent 1px);
	background-size:44px 44px;
	transform:rotateX(68deg) translateZ(-100px) scale(1.35);
	transform-origin:center 82%;
	opacity:.5;
}
.about-v4-slab{
	position:absolute;
	border:2px solid #111;
	background:linear-gradient(135deg, #FFDD95, #EEC149);
	box-shadow:8px 8px 0 rgba(17,17,17,.8);
	animation:aboutV4SlabFloat 7s ease-in-out infinite;
}
.about-v4-slab-1{
	width:160px;
	height:160px;
	left:5%;
	top:12%;
	transform:rotate(-16deg) translateZ(30px);
}
.about-v4-slab-2{
	width:200px;
	height:56px;
	right:8%;
	bottom:18%;
	transform:rotate(10deg) translateZ(50px);
	animation-delay:-3s;
}
.about-v4-ring{
	position:absolute;
	right:12%;
	top:20%;
	width:120px;
	height:120px;
	border:3px solid rgba(238,193,73,.4);
	border-radius:50%;
	transform:translateZ(40px) rotateX(72deg);
	animation:aboutV4RingSpin 14s linear infinite;
}

.about-v4-header,
.about-v4-main,
.about-v4-foot{
	position:relative;
	z-index:2;
}

.about-v4-header{
	max-width:1240px;
	margin:0 auto;
	padding:24px 32px 0;
}
.about-v4-header-inner{
	padding:18px 20px;
	border:2px solid #111;
	background:rgba(255,255,255,.92);
	box-shadow:10px 10px 0 #111;
}
.about-v4-brand-row{
	display:flex;
	align-items:center;
	gap:18px;
	margin-bottom:16px;
	padding-bottom:16px;
	border-bottom:2px dashed rgba(238,193,73,.65);
}
.about-v4-logo img{
	display:block;
	max-height:52px;
	width:auto;
}
.about-v4-mark strong{
	display:block;
	font-size:20px;
	font-weight:900;
	color:#111;
	letter-spacing:1px;
}
.about-v4-mark span{
	display:block;
	margin-top:4px;
	font-size:11px;
	font-weight:700;
	letter-spacing:3px;
	color:#C9A030;
}

.about-v4-nav{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.about-v4-nav-item{
	flex:1;
	min-width:140px;
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 14px;
	border:2px solid #111;
	background:#FFFFFA;
	text-decoration:none;
	color:#444;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.about-v4-nav-item em{
	font-style:normal;
	font-size:18px;
	font-weight:900;
	color:#EEC149;
	line-height:1;
}
.about-v4-nav-item span{
	font-size:13px;
	font-weight:800;
	letter-spacing:1px;
}
.about-v4-nav-item:hover{
	transform:translate(-2px,-2px);
	box-shadow:4px 4px 0 #111;
	background:#fff;
	color:#111;
}
.about-v4-nav-item.is-active{
	background:#EEC149;
	box-shadow:6px 6px 0 #111;
	color:#111;
	transform:translate(-3px,-3px);
}
.about-v4-nav-item.is-active em{
	color:#111;
}

.about-v4-main{
	max-width:1240px;
	margin:0 auto;
	padding:24px 32px 40px;
}

.about-v4-hero{
	margin-bottom:24px;
	padding:28px 30px;
	border:2px solid #111;
	border-left:8px solid #EEC149;
	background:#fff;
	box-shadow:12px 12px 0 #111;
	animation:aboutV4In .65s cubic-bezier(.16,1,.3,1) both;
}
.about-v4-kicker{
	display:inline-block;
	margin-bottom:10px;
	padding:5px 12px;
	border:2px solid #111;
	background:#FFFFFA;
	font-size:11px;
	font-weight:800;
	letter-spacing:3px;
	box-shadow:3px 3px 0 #EEC149;
}
.about-v4-hero h1{
	margin:0 0 10px;
	font-size:clamp(30px, 4vw, 44px);
	font-weight:900;
	line-height:1.15;
	color:#111;
}
.about-v4-hero p{
	margin:0;
	font-size:14px;
	line-height:1.85;
	color:#666;
	max-width:720px;
}

.about-v4-layout{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.about-v4-subnav{
	padding:16px 18px;
	border:2px solid #111;
	background:#fff;
	box-shadow:8px 8px 0 rgba(238,193,73,.85);
}
.about-v4-subnav-label{
	display:block;
	margin-bottom:12px;
	font-size:11px;
	font-weight:800;
	letter-spacing:2px;
	color:#C9A030;
}
.about-v4-subnav-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.about-v4-subnav-item{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 16px;
	border:2px solid #111;
	background:#FFFFFA;
	color:#444;
	font-size:13px;
	font-weight:700;
	text-decoration:none;
	white-space:nowrap;
	transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.about-v4-subnav-item:hover{
	background:#FFDD95;
	transform:translate(-2px,-2px);
	box-shadow:3px 3px 0 #111;
}
.about-v4-subnav-item.is-active{
	background:#EEC149;
	box-shadow:4px 4px 0 #111;
	color:#111;
}
.about-v4-subnav-back{
	background:#fff;
	color:#111;
}

.about-v4-panel{
	padding:24px 28px;
	border:2px solid #111;
	background:#fff;
	box-shadow:14px 14px 0 #111;
	min-height:420px;
	animation:aboutV4In .7s cubic-bezier(.16,1,.3,1) .08s both;
}
.about-v4-rich,
.about-panel,
.about-v4-panel{
	font-size:14px;
	line-height:1.9;
	color:#444;
	text-align:left;
}
.about-v4-rich img,
.about-panel img{
	max-width:100%;
	height:auto;
}
.about-v4-rich a,
.about-panel a{
	color:#111;
	border-bottom:2px solid #EEC149;
	text-decoration:none;
}
.about-v4-rich a:hover,
.about-panel a:hover{
	color:#C9A030;
}

/* FAQ */
.about-v4-faq{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
	gap:20px;
	align-items:start;
}
.about-v4-faq-group{
	margin:0 0 14px;
	padding:16px;
	border:2px solid #111;
	background:#fff;
	box-shadow:6px 6px 0 rgba(238,193,73,.75);
}
.about-v4-faq-group dt{
	margin:0 0 12px;
	padding-bottom:10px;
	border-bottom:2px dashed rgba(238,193,73,.6);
	font-size:18px;
	font-weight:900;
	color:#111;
	text-align:left;
}
.about-v4-faq-group dt i{
	display:inline-block;
	width:10px;
	height:10px;
	margin-right:8px;
	background:#EEC149;
	border:2px solid #111;
	vertical-align:middle;
}
.about-v4-faq-group dd{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
}
.about-v4-faq-link{
	display:inline-block;
	padding:8px 12px;
	border:2px solid #111;
	background:#FFFFFA;
	color:#444;
	font-size:13px;
	font-weight:600;
	text-decoration:none;
	transition:transform .14s ease, background .14s ease;
}
.about-v4-faq-link:hover,
.about-v4-faq-link.is-active{
	background:#EEC149;
	color:#111;
	box-shadow:3px 3px 0 #111;
	transform:translate(-2px,-2px);
}
.faqcontent h1{
	margin:0 0 16px;
	padding-bottom:12px;
	border-bottom:2px solid #111;
	font-size:24px;
	font-weight:900;
	color:#111;
}

/* Announce */
.about-v4-announce-card{
	margin-bottom:16px;
	padding:20px 22px;
	border:2px solid #111;
	background:#fff;
	box-shadow:8px 8px 0 rgba(238,193,73,.8);
}
.about-v4-announce-card:last-child{
	margin-bottom:0;
}
.about-v4-announce-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:16px;
	margin-bottom:14px;
	padding-bottom:12px;
	border-bottom:2px dashed rgba(238,193,73,.55);
}
.about-v4-announce-head .l{
	font-size:20px;
	font-weight:900;
	color:#111;
	line-height:1.4;
}
.about-v4-announce-head .r{
	flex-shrink:0;
	font-size:12px;
	color:#888;
	line-height:1.6;
	text-align:right;
}

/* Friendlink */
.about-v4-link-block{
	margin-bottom:18px;
	padding:20px 22px;
	border:2px solid #111;
	background:#fff;
	box-shadow:8px 8px 0 #111;
}
.about-v4-link-block .tit{
	margin:0 0 14px;
	padding:8px 14px;
	display:inline-block;
	border:2px solid #111;
	background:#EEC149;
	font-size:16px;
	font-weight:900;
	color:#111;
	box-shadow:4px 4px 0 #111;
}
.about-v4-imglinks a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:148px;
	height:56px;
	margin:0 10px 10px 0;
	padding:8px;
	border:2px solid #111;
	background:#FFFFFA;
	transition:transform .15s ease, box-shadow .15s ease;
}
.about-v4-imglinks a:hover{
	transform:translate(-2px,-2px);
	box-shadow:4px 4px 0 #EEC149;
}
.about-v4-imglinks img{
	max-width:100px;
	max-height:32px;
}
.about-v4-txtlinks a{
	display:inline-block;
	margin:0 10px 10px 0;
	padding:8px 14px;
	border:2px solid #111;
	background:#FFFFFA;
	color:#444;
	font-size:13px;
	font-weight:600;
	text-decoration:none;
}
.about-v4-txtlinks a:hover{
	background:#FFDD95;
	color:#111;
	box-shadow:3px 3px 0 #111;
}

.about-v4-form{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px 18px;
}
.about-v4-field{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.about-v4-field label{
	font-size:12px;
	font-weight:800;
	letter-spacing:1px;
	color:#555;
}
.about-v4-field input,
.about-v4-field select,
.about-v4-field textarea{
	width:100%;
	padding:10px 12px;
	border:2px solid #111;
	background:#FFFFFA;
	font-size:14px;
	color:#111;
	box-sizing:border-box;
	border-radius:0;
}
.about-v4-field input:focus,
.about-v4-field select:focus,
.about-v4-field textarea:focus{
	outline:none;
	background:#fff;
	box-shadow:4px 4px 0 #EEC149;
}
.about-v4-field textarea{
	min-height:110px;
	resize:vertical;
}
.about-v4-field-code{
	grid-column:1 / -1;
}
.about-v4-code-row{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
}
.about-v4-code-row .authcode{
	height:42px;
	border:2px solid #111;
	cursor:pointer;
}
.about-v4-submit-row{
	grid-column:1 / -1;
	padding-top:6px;
}
.about-v4-form .submit{
	min-width:180px;
	height:48px;
	padding:0 28px;
	border:2px solid #111;
	background:#EEC149;
	color:#111;
	font-size:15px;
	font-weight:900;
	letter-spacing:2px;
	cursor:pointer;
	box-shadow:6px 6px 0 #111;
	transition:transform .15s ease, box-shadow .15s ease;
}
.about-v4-form .submit:hover{
	transform:translate(3px,3px);
	box-shadow:3px 3px 0 #111;
	background:#FFDD95;
}

/* Sitemap */
.about-v4-sitemap-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	gap:16px;
}
.about-v4-sitemap-group{
	padding:16px;
	border:2px solid #111;
	background:#fff;
	box-shadow:6px 6px 0 rgba(238,193,73,.8);
}
.about-v4-sitemap-group .h3{
	margin:0 0 12px;
}
.about-v4-sitemap-group .h3 a{
	display:block;
	padding:10px 12px;
	border:2px solid #111;
	background:#EEC149;
	color:#111;
	font-size:15px;
	font-weight:900;
	text-decoration:none;
	box-shadow:4px 4px 0 #111;
}
.about-v4-sitemap-group .h3 a:hover{
	background:#FFDD95;
}
.about-v4-sitemap-group ul{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
	padding:0;
	list-style:none;
}
.about-v4-sitemap-group li a{
	display:block;
	padding:7px 10px;
	border:2px solid #111;
	background:#FFFFFA;
	color:#444;
	font-size:12px;
	font-weight:600;
	text-decoration:none;
}
.about-v4-sitemap-group li a:hover{
	background:#FFDD95;
	color:#111;
	transform:translate(-2px,-2px);
	box-shadow:3px 3px 0 #111;
}

.about-v4-foot{
	max-width:1240px;
	margin:0 auto;
	padding:0 32px 28px;
}
.about-v4-foot .footer{
	width:auto!important;
	margin:0!important;
	padding:18px 0!important;
	text-align:center!important;
	color:#888!important;
	border-top:2px solid #111!important;
	background:transparent!important;
}
.about-v4-foot .footer a{
	color:#111!important;
	border-bottom:1px solid #EEC149;
	text-decoration:none!important;
}

.none{display:none!important}

@keyframes aboutV4In{
	from{opacity:0;transform:translateY(18px)}
	to{opacity:1;transform:translateY(0)}
}
@keyframes aboutV4SlabFloat{
	0%,100%{transform:rotate(-16deg) translateZ(30px) translateY(0)}
	50%{transform:rotate(-12deg) translateZ(45px) translateY(-12px)}
}
@keyframes aboutV4RingSpin{
	from{transform:translateZ(40px) rotateX(72deg) rotateZ(0deg)}
	to{transform:translateZ(40px) rotateX(72deg) rotateZ(360deg)}
}

@media (max-width:1024px){
	.about-v4-faq{
		grid-template-columns:1fr;
	}
}
@media (max-width:760px){
	.about-v4-header,
	.about-v4-main,
	.about-v4-foot{
		padding-left:16px;
		padding-right:16px;
	}
	.about-v4-nav-item{
		min-width:calc(50% - 5px);
		flex:1 1 calc(50% - 5px);
	}
	.about-v4-hero{
		padding:22px 18px;
		box-shadow:8px 8px 0 #111;
	}
	.about-v4-panel{
		padding:18px 16px;
		box-shadow:10px 10px 0 #111;
	}
	.about-v4-form{
		grid-template-columns:1fr;
	}
	.about-v4-announce-head{
		flex-direction:column;
	}
	.about-v4-announce-head .r{
		text-align:left;
	}
	.about-v4-subnav-item{
		flex:1 1 calc(50% - 5px);
		white-space:normal;
		text-align:center;
	}
}
@media (max-width:480px){
	.about-v4-nav-item{
		min-width:100%;
	}
}