html{
	height: 100%;
	width: 100%;
}

body{
	margin: 0;
	overflow: hidden;
}




.width-min-1280 #目录_外{
	left: 4px;
}

.width-min-1280 #目录按钮{
	display:none;
}
.width-min-1280 #正文_留白,.width-min-1280 #加载提示,.width-min-1280 #失败提示{
	padding-left: 252px;
}

.width-min-1280 #首次提示{
	margin-left: 252px;
}

.width-min-1280 #目录遮罩{
	display: none;
}


.width-min-1280 #返回按钮{
	left: 64px;
}

.width-min-1280 #返回按钮_1{
	transform: rotate(-34deg);
	width: 10px;
	top: 3px;
}

.width-min-1280 #返回按钮_3{
	transform: rotate(34deg);
	width: 10px;
	top: -3px;
}




.width-max-1280 #目录按钮{
	display:block;
}

.width-max-1280 #正文_内容{
	padding-top: 64px;
}



#外框{
	overflow-x: hidden;
	overflow-y: scroll;
}



#首次提示{
	border: 1px;
	border-color: rgba(0,0,0,0.47);
	border-style: solid;
	padding:16px;
	display: none;
	position: sticky;
	z-index: 1;
	top: 0;
	background: rgba(255,255,255,0.47);
	backdrop-filter: blur(16px);
}


#背景{
	z-index:-1;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#失败提示{
	margin: 16px;
	margin-top: 64px;
	color: red;
}

#加载提示{
	padding: 0 18px;
}

#返回按钮,#目录按钮{
	left:-8px;
	top:-4px;
	width: 28px;
	height:28px;
	padding:12px;
	cursor:pointer;
	position:fixed;
	z-index:2;
	transition:left 0.5s;
}


#目录按钮>div,#返回按钮>div{
	transition: width 0.5s, top 0.5s, transform 0.5s;
	height:2px;
	width: 20px;
	margin: 4px;
	position: relative;
	top: 0px;
}

#目录按钮_1,#目录按钮_3,
#返回按钮_1,#返回按钮_2,#返回按钮_3{
	background-color: rgba(0,0,0,0.7);;
}

.已显示目录 #返回按钮{
	left: 64px;
}

.已显示目录 #返回按钮_1{
	transform: rotate(-34deg);
	width: 10px;
	top: 3px;
}

.已显示目录 #返回按钮_3{
	transform: rotate(34deg);
	width: 10px;
	top: -3px;
}



.已显示目录 #目录按钮_1{
	transform: rotate(-45deg);
	top: 6px;
}

.已显示目录 #目录按钮_3{
	transform: rotate(45deg);
	top: -6px;
}


#目录_外{
	top: 4px;
	left: -240px;
	width: 240px;
	transition: left 0.5s;
	background-color: rgba(235,235,235,0.6);
	backdrop-filter: blur(16px);
	position:fixed;
	height:calc(100% - 8px);
	z-index:2;
	color:rgba(0,0,0,0.7);
	
}

.已显示目录 #目录_外{
	left: 4px;
	
}

#目录{
	overflow: auto;
	height: calc(100% - 194px);
	
}

#目录_上填{
	height: 28px;
}
#功能{
	margin: 18px;
}
#功能>input,#功能>label{
	margin-bottom: 10px;
	cursor: pointer;
}

#功能>input[type="button"]:disabled{
	cursor: not-allowed;
}

#目录>li{
	padding: 4px;
	padding-left: 16px;
	padding-right: 16px;
}
#目录>li>a{
	color: rgba(0,0,0,0.7);;
	text-decoration-color: rgba(0,0,0,0.7);
	text-underline-offset: 0.2em;
}

#目录_外>h3{
	text-align: center;
	position: sticky;
	margin: 18px;
}

#目录遮罩{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: #000000;
	transition: opacity 0.5s;
	pointer-events: none;
	z-index: 2;
}

.已显示目录 #目录遮罩{
	pointer-events: auto;
	opacity: 0.4;
}

.没有目录 #目录_外{
	left:-300px;
}

.没有目录 #返回按钮, .没有目录 #目录按钮{
	left:-40px;
}

#正文{
	display:flex;
}

#正文_内容{
    padding: 12px;
	font-size: 18px;
	flex: 1;
	padding-bottom: 0;
}


.横向{
	display: flex;
	flex-wrap: wrap;
}
.媒体{
	margin: 4px;
}

audio{
	width: 100%;
}

#索引{
	padding: 12px;
    position: absolute;
    width: calc( 100% - 24px );
}

#索引>h2,#正文_内容>h1{
	margin-block-start:0px;
}
#索引>h2{
	padding-block-start: 0.83em;
	margin-block-end:0;
	padding-block-end: calc(0.83em + 12px );
}

#索引>div{
	font-size: 18px;
}

#索引_内容{
	/*
	display: flex;
	flex-wrap: wrap;
	*/
	display: grid;
	grid-template-columns: repeat(auto-fit,236px);
	justify-content: center;
}
#索引_内容>div{
	width:236px;
	height:232px;
}
#索引_内容>div>div{
	border: 2px;
	border-style: solid;
	border-color: #c9c9c9;
	margin: 4px;
	margin-bottom: 12px;
	color: #000000;
	text-align: center;
	font-size: 0;
    cursor: pointer;
    border-radius: 4px;
}

#索引_内容>div>div>img{
	height: 160px;
	width: 100%;
	object-fit: cover;
}
#索引_内容>div>div>div{
	font-size: 18px;
	margin: 2px;
}
.过渡文本>span{
	/*文本位置大小变换过渡*/
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    transition-duration: 1.2s;
    transition-property: font, left, top;
	font-size: 18px;
	font-weight: 400;
	
}

.过渡文本.标题>span{
	font-size: 32px;

}


#索引_内容>div.准备旋转,#外框.准备旋转{
    perspective: 3000px;
}
#索引_内容>div.可旋转>div{
    backface-visibility: hidden;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-property: transform, left, top, width, height;
    transform-style: preserve-3d;
    transform-origin: center center;

}
#索引_内容>div>div.正面{
    transform: rotateX(0deg);
    background:#ffffff;
}
#索引_内容>div>div.反面{
    transform: rotateX(180deg);
    background:#ffffff;
}
#索引_内容>div.可旋转.已旋转>div.正面{
    transform: rotateX(180deg);
}
#索引_内容>div.可旋转.已旋转>div.反面{
    transform: rotateX(360deg);
}

#正文{
    backface-visibility: hidden;
    opacity: 1;
    /*变换的中心为视口的中心*/
    /*transform-origin: 50vw 50vh;*/
	transform-origin: center center;
}

#正文.准备过渡{
    overflow: hidden;
    padding-bottom: 0;
	position: relative;
	transform:rotateX(180deg);
}
#正文.过渡,#索引.过渡{
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);;
    transition-property: transform, left, top, width, height;
    overflow: hidden;
    padding-bottom: 0;
    transform-style: preserve-3d;
    transform-origin: center center;
}
#正文.已过渡{
	transform:rotateX(360deg);
}

#正文_内容>h1{
	font-size: 32px;
	font-weight: 400;
}


.视频外框{
	position:relative;
	width:min-content;
	height:min-content;
	font-size: 0;/*防止空白占位*/
}

.播放{
	position: relative;
}
.可播放提示::after{
	content: '';
	margin: auto;
	position: absolute;
	width: 72px;
	height: 72px;
	background-size: 50%;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+);
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: opacity 600ms cubic-bezier(0.4, 0, 0.6, 1) 0s;
	display: block;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
.播放>video{
	position: absolute;
	z-index: -1
}


img.自调整_图片,img.自调整_视频{
	cursor: pointer;
}

@media print{
	#正文{
		margin: 0!important;
	}

	#目录_外,#返回按钮,#目录按钮,.可播放提示::after{
		display: none!important;
	}
}

/*
@media (min-width: 1280px){/*大于1280px* /
	#目录按钮{
		display:none;
	}
	#正文,#加载提示{
		margin-left: 280px;
	}

	#目录遮罩{
		display: none;
	}


	#返回按钮{
		left: 64px;
	}
	
	#返回按钮_1{
		transform: rotate(-34deg);
		width: 10px;
		top: 3px;
	}

	#返回按钮_3{
		transform: rotate(34deg);
		width: 10px;
		top: -3px;
	}

}

@media (max-width: 1280px){/* 小于1280px * /
	#目录按钮{
		display:block;
	}
	#目录_外{
		left: -240px;
	}
	#正文,#加载提示{
		margin-top: 64px;
	}
}
*/