html, body {
    margin:0;
    padding:0;
    width:100%;
    min-height: 100vh; /* 确保页面高度与视口相同，必须是min-height，也必须是100vh */
    font-size: 16px;/*1rem*/
	word-wrap: break-word;
}
* {
    /*禁止当一个可点击元素被点击时，一小会儿变暗的效果*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
    /* touch-action: none; /*css禁止页面缩放，禁止缩放后不能拖拽浏览页面了*/
    /* touch-action: pan-y;  */
    /*css禁止页面缩放，但允许y轴拖动，touch-action的取值有（可以取多个）：auto（自动）、none（禁止所有动作）、pan-x、pan-y、manipulation（只允许滚动和手势缩放）、pinch-zoom（启用双击缩放）*/
}
body {
    word-spacing: 0.2rem;
    background-color: #ffffff; /* 添加自定义背景色（可选）*/
}

a {
    color: black;
    text-decoration: none;
}
a:visited{
    color: black;
}
a:hover{
    color: black;
    text-decoration: underline;
}

/*重要内容*/
.div-container-center {
    display: flex; /* 设置容器为 Flexbox */
    justify-content: center; /* 水平居中对齐子项目 */
    align-items: center; /* 垂直居中对齐子项目 */
    height: 100%; /* 设置高度为视口的高度，保证能够占据全部空间 100vh*/
    text-align: center;
}
.div-container-right-middle {
    display: flex; /* 设置容器为 Flexbox */
    justify-content: right; /* 水平居中对齐子项目 */
    align-items: center; /* 垂直居中对齐子项目 */
    height: 100%; /* 设置高度为视口的高度，保证能够占据全部空间 100vh*/
    text-align: center;
}



.search-input{
    padding-top:1px;
    color: white;
    border-style: solid;
    border-width: 1pt;
    border-color: cornflowerblue;
    font-size: 14pt;
    width: calc(80vw - 100pt);;
    height: 35pt;
}
.search-button{
    color: white;
    background-color: cornflowerblue;
    border-width: 0pt;
    border-color: cornflowerblue;
    font-size: 14pt;
    width: 60pt;
    height: 35pt;
}
.book-container {
    display: flex; /* 设置容器为 Flexbox */
    min-height: 100vh; /* 设置高度为视口的高度，保证能够占据全部空间 */
    width: 100%;
    flex-direction: column; /*排列方式：纵向*/
    justify-content: flex-start; /* 调整内容：顶端对齐 */
}
.container-book-sheet{
    width: calc(100% - 100pt);
    padding-left: 50pt;
    flex-grow: 1;
    /* word-break: break-all;
    word-wrap: break-word; */
}
.banner{
    height: 60pt;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.site-name{
    flex-grow: 0;
    width: 150pt;
    font-size:30pt;
    font-family: Impact, Charcoal, sans-serif;
}
.site-name-link{
    color: black;
    text-decoration: none;
}
.banner-other-content{
    flex-grow: 1;
    height:100%;
}
.subject{
    background-color: darkseagreen;
    padding:5pt;
    position: relative;
}
.content{
    display: flex;
    flex-direction: row;
    width: calc(100% - 20pt);
    padding: 0 10pt;
}
.content pre{
    font-family: auto;
    line-height: 20pt;
    white-space: pre-wrap;
}
.page-index{
    margin: 5pt;
    padding: 2pt;
    width: 240pt;
    z-index:99999;
}
.page-index div.current{
    padding:2pt;
    background-color: rgb(194, 230, 194);
}
.page-index div{
    padding:2pt;
}
.page-index-arrow {
    display: none;
    font-size: 20pt;
}
.page-index-arrow-right {
    display: none;
    font-size: 20pt;
}
.page-v-line{
    width: 1pt;
    background-color: darkseagreen;
}
.page-sheet{
    flex-grow: 1;
    width: calc(100% - 15rem);
}
.site-info{
    text-align: center;
    bottom:0pt;
    padding-bottom: 20pt;
    font-size: 10pt;
    flex-grow: 0;
}
.emphasize{
    color:maroon;
    font-weight: bolder;
}
.v-signon-pre-end{
    opacity: 0;
}
pre{
    text-indent: 0.2rem;
}
.websiteSign{
    text-align: right;
    position: relative;
    padding-right: 20pt;
    bottom: 1.5rem;
    right: 2rem;
}
.historyBack{
    text-align: right;
    position: relative;
    padding-right: 20pt;
    bottom: 1rem;
    right: 3rem;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /*background-color: #ddd;*/
}
/*滑块*/
::-webkit-scrollbar-thumb {
    background-color: silver;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(174, 174, 174);
}
/*滑道*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #eee;
    border-radius: 10px;
}
.title-bar-language{
    position: absolute;
    top: calc(50% - 8px);
    line-height: 100%;
    right: 0;
    height: 100%;
    vertical-align: middle;
}
.subject-name{
    width: calc(100% - 50px);
}
@media (max-width : 1920px) {
    .banner {
        height: 60pt;
        width: calc(100% - 30pt);
        display: flex;
        flex-direction: row;
        margin: 10pt;
        padding: 5pt;
        border-radius: 5pt;
        box-shadow: 0 0 5pt silver;
    }
    .site-name{
        width: 100pt;
        font-size:20pt;
        text-align: left;
        padding-left: 2pt;
    }
    .div-container-center {
        justify-content: flex-start;
        margin-left: 4pt;
    }
    .div-container-right-middle {
        margin-right: 4pt;
    }
    .banner-other-content{
        font-size: 9pt;
        padding-right: 2pt;
    }
    .container-book-sheet{
        width: 100%;
        padding-left: 0pt;
    }
    .container-center {
        text-align: center;
    }
    .search-input{
        width: calc(100vw - 100pt);;
    }
    .page-sheet{
        padding-left: 5pt;
    }
    a:visited {
        color: rgb(180 180 230);
    }
    a:hover{
        color: rgb(180 180 230);
        text-decoration: underline;
    }
    a {
        color: rgb(180 180 230);
        text-decoration: none;
    }
    .page-index {
        display: none;
        margin: 5pt;
        padding: 2pt;
        width: 340pt;
        position: absolute;
        background-color: darkslateblue;
        border-radius: 5pt;
        box-shadow: 0 0 5pt salmon;
    }
    .page-index div.current {
        padding: 2pt;
        background-color: rgb(194, 230, 194);
        color: blueviolet;
    }
    .page-index-arrow {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        margin-left: -10pt;
    }
    .page-index-arrow-right {
        text-align: right;
        padding-right: 0.2rem;
        display: block;
        font-size: 20pt;
        bottom: 2rem;
        position: relative;
    }   
    .page-v-line{
        margin-left: unset;
    } 
    .site-name-link{
        color: silver!important;
    }
    .subject {
        color: rgb(180 180 230);
        background-color: darkslateblue;
        padding: 5pt;
    }
    .site-info {
        text-align: center;
        bottom: 0pt;
        font-size: 10pt;
        flex-grow: 0;
        background-color: darkslateblue;
        color: white;
        padding-bottom: 0pt;
    }
    .site-info a{
        color: white;
    }
} 
@media (max-width : 640px){
	.page-index{
		margin: 5pt;
		padding: 2pt;
		width: 240pt;
		z-index:99999;
	}
}

.dot {
	position: relative;
	display: inline-block;
	text-indent: 0;
}
.dot::before {
	content: '';
	position: absolute;
	top: 4px; /* 根据需要调整位置 */
	left: 50%; /* 根据需要调整位置 */
	transform: translateX(-50%);
	width: 2px; /* 点的大小 */
	height: 2px; /* 点的大小 */
	background-color: black; /* 点的颜色 */
	border-radius: 50%; /* 使点看起来更圆 */
}