ul {font-size: 2rem; ul {font-size: .75em;}}

.項 {
	box-sizing: border-box;
	display: inline-flex;
	align-items: right;
	height: 9rem;
	width: 3rem;
	margin: .5rem .25rem;
	overflow: hidden;
	background: #fff;
	border-radius: 1.5rem;
	box-shadow: 0 .5rem .75rem rgba(0, 0, 0, .24);
	transition: all .48s;
}

.項:hover {width: 10rem; border: none;}
.靑:hover .幖, .灻:hover .幖, .白:hover .幖, .玄:hover .幖 {background-color: var(--褾面); text-shadow: 0 0 .0625em var(--藏靑);}
.幖:hover::after {text-decoration: underline;}
.幖 {
	width: 3rem;
	height: 9rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 2rem;
	font-size: 2rem;
	position: relative;
	transition: all .48s;
	pointer-events: none;
}
.項:nth-child(1) .幖::after {
	position: absolute;
	content: '橫輸縱閱';
	width: fit-content;
	font-size: 1.5rem;
	line-height: 1.5em;
	right: 2em;
	pointer-events: auto;
	cursor: pointer;
}.項:nth-child(2) .幖::after {
	position: absolute;
	content: '漢字圈\A司天監\A輿地署';
	width: fit-content;
	white-space: pre;
	font-size: 1.5rem;
	line-height: 1.5em;
	right: 2em;
	pointer-events: auto;
	cursor: pointer;
}.項:nth-child(3) .幖::after {
	position: absolute;
	content: '圕圖藏\A圕書藏\A圕舘藏';
	width: fit-content;
	white-space: pre;
	font-size: 1.5rem;
	line-height: 1.5em;
	right: 2em;
	pointer-events: auto;
	cursor: pointer;
}.項:nth-child(4) .幖::after {
	position: absolute;
	content: '旦夕棧';
	width: fit-content;
	font-size: 1.5rem;
	line-height: 1.5em;
	right: 2em;
	pointer-events: auto;
	cursor: pointer;
}