@charset "utf-8";



.detail-breadcrumb {
	display: flex;
	align-items: center;
	padding: 12px 0;
	margin-bottom: 50px;
	background-size: 100% 100%;
	color: #A6ACBC;
}

.detail-breadcrumb img {
	margin-right: 4px;
}

.detail-breadcrumb-home {
	cursor: pointer;
}

.detail-breadcrumb-next {
	margin: 0 4px;
}

.detail-breadcrumb-last {
	color: #677390;
}


.demo-main .book-header {
	padding-top: 60px;
	height: 459px;
	background-image: url(../static/detail-bg.jpg);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
}

.detail-result-list-card {
	display: flex;
	column-gap: 40px;
	padding-bottom: 38px;
}

.detail-list-card-cover {
	width: 160px;
	height: 217px;
	flex-shrink: 0;
	/* box-shadow: 7px 5px 10px #A6ACBC; */
	box-shadow:
		6px 6px 10px rgba(100, 100, 100, 0.2),
		10px 10px 20px rgba(120, 120, 120, 0.15),
		0 8px 15px rgba(150, 150, 150, 0.1);
}

.detail-list-card-cover img {
	width: 100%;
	height: 100%;
}

.detail-list-card-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.detail-list-card-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #384572;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

/* .detail-list-card-title:hover {
	cursor: pointer;
	color: #1549C0;
} */

.book-directory-title-nodata {
	color: #A6ACBC;
	text-indent: 0;
	padding-left: 20px;
	font-size: 14px;
}

.detail-list-card-msg {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #677390;
}

.detail-list-card-msg .detail-list-card-msg-block {
	display: flex;
	align-items: center;
}

.detail-list-card-msg-block img {
	margin-right: 4px;
}



.detail-list-card-btns {
	display: flex;
	column-gap: 12px;
}

.detail-list-card-btn {
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	height: 32px;
	color: #1549C0;
	padding: 4px 16px;
	border: 1px solid #1549C0;
	border-radius: 20px;
}

.demo-main .fill-btn {
	color: white;
	background-color: #1549C0;
}

.detail-list-card-btn img {
	margin-right: 4px;
}

.detail-list-card-btn:hover {
	background: rgba(21, 73, 192, 0.1);
}

.demo-main .fill-btn:hover {
	background-color: rgba(21, 73, 192, .8);
}

.card-btns-content {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 20px;
}

.btns-box {
	user-select: none;
	position: relative;
	cursor: pointer;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 50%;
}

.tooltips {
	display: none;
	user-select: none;
	pointer-events: none;
	position: absolute;
	color: white;
	width: 40px;
	height: 36px;
	/* display: flex; */
	top: 45px;
	border-radius: 4px;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.8);
}

.tooltips::before {
	content: '';
	width: 10px;
	height: 10px;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	background-image: url(../static/tooltip.png);
	background-repeat: no-repeat;

}

.btns-box:hover {
	box-shadow: 0px 4px 8px 0px #1D1E551A;
}

.btns-box img:nth-child(2) {
	display: none;
}

.btns-box.actived img:nth-child(1) {
	display: none;
}

.btns-box.actived img:nth-child(2) {
	display: inline-block;
}

.card-total-info {
	display: flex;
	gap: 12px;
}

.total-info {
	border-radius: 16px;
	width: 92px;
	height: 123px;
	background: rgba(255, 255, 255, .8);
}

.total-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.total-infot-title {
	color: #677390;
	font-size: 14px;
}

.total-infot-num {
	font-size: 26px;
	font-weight: 700;
	line-height: 26px;

}

.total-info:nth-child(1) .total-infot-num {
	color: #7ED74E;
}

.total-info:nth-child(2) .total-infot-num {
	color: #FFB640;
}

.total-info:nth-child(3) .total-infot-num {
	color: #57CAFF;
}

.fixed-btns {
	display: none;
	position: fixed;
	bottom: 277px;
	left: 13%;
}

.upload-btn img {
	width: 16px;
	height: 16px;
}

.fixed-btn .btns-box {
	border: 1px solid #DAE0EE;
}

.fixed-btns .card-btns-content {
	display: flex;
	flex-direction: column;
}

.fixed-title {
	font-size: 12px;
	color: #677390;
	margin-top: 4px;
	text-align: center;
}

.detail-book-content {
	flex: 1;
	display: flex;
	margin: 32px 0 58px 0;
	column-gap: 40px;
}

.detail-book-content>div {
	flex-shrink: 0;
}

.book-main-info {
	flex: 1;
}

.book-publish-info {
	width: 300px;
	padding: 0 24px 24px;
	background-color: rgba(21, 73, 192, 0.05);
}

.book-area-title {
	position: relative;
	padding: 24px 12px;
	font-size: 20px;
	line-height: 20px;
	font-weight: 600;
	color: #384572;
	border-bottom: 1px solid #1549C0;
}

.book-area-title::after {
	position: absolute;
	content: '';
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 18px;
	border-radius: 13px;
	background: #1549C0;
}

.book-publish-area {
	display: flex;
	flex-direction: column;
	padding-top: 24px;
	gap: 16px;
}

.publish-title {
	font-size: 14px;
	color: #384572;
	font-weight: 600;
}

.publish-msg {
	font-size: 14px;
	color: #677390;
	margin-top: 8px;
}

.book-main-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.book-main-desc {
	position: relative;
	font-size: 14px;
	letter-spacing: 1px;
	color: #677390;
	text-indent: 2em;
	line-height: 21px;
	letter-spacing: 1px;
}

.book-overflow-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-clamp: 3;
	-webkit-line-clamp: 3;
}

.book-main-desc-btns {
	display: none;
	position: absolute;
	right: 11px;
    bottom: -18px;
	cursor: pointer;
	color: #1549C0;
	z-index: 1;
}
.book-main-desc-btns.open span:nth-child(1){
	display: none;
}
.book-main-desc-btns.open span:nth-child(2){
	display: block;
}
.book-main-desc-btns span:nth-child(2) {
	display: none;
}
.book-main-desc>div {
	line-height: 21px;
	letter-spacing: 1px;
}

.book-directory-title {
	cursor: pointer;
	position: relative;
	user-select: none;
}

.book-directory-children {
	/* transition: all .2s; */
	/* overflow: hidden; */
}

.book-directory-title>.book-directory-children {
	padding-left: 12px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.directory-on>.book-directory-children {
	max-height: 500px;
	/* 足够大的值以容纳内容 */
	transition: max-height 0.3s ease-in;
}


.directory-on>.directory-title-area>.directory-title::before {
	transform: translateY(-50%) rotate(0);
}

.directory-title-area:has(+.book-directory-children) .directory-title::before {
	opacity: 1;
}

.directory-title {
	position: relative;
	color: #384572;
}

.directory-title::before {
	position: absolute;
	content: '';
	width: 16px;
	height: 16px;
	background-image: url(/staticresource/scioabook/static/tree-down.svg);
	left: -26px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	transition: transform .3s;
	opacity: 0;
}

.directory-title:hover {
	color: #1549C0;
	text-decoration: underline;
}

.directory-title:hover::before {
	background-image: url(/staticresource/scioabook/static/tree-down-hover.svg);
}

.book-directory>.book-directory-title>.directory-title-area .directory-title {

	font-size: 14px;
	font-weight: 600;
	color: #1549C0;
}


.directory-title-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	padding: 0 24px 0 40px;
	border-radius: 8px;
}

.directory-title-area:hover {
	background: rgba(166, 172, 188, .1);
}

.book-directory-children {
	width: 100%;
}

.comment-section-num {
	margin-left: 12px;
}

.comment-section-content {
	margin-top: 24px;
	padding-bottom: 24px;
}

.comment-section-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.my-comment-box,
.comment-box-other {
	display: flex;
	gap: 16px;
}

.left-avatar {
	flex-shrink: 0;
	width: 40px;
}

.left-avatar img {
	display: flex;
	align-items: flex-start;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.right-input {
	flex: 1;
	position: relative;
}

.right-input textarea {
	padding: 16px;
	width: 100%;
	outline: none;
	border: 1px solid #DAE0EE;
	resize: none;
}

.right-input textarea::placeholder {
	font-size: 14px;
	color: #A6ACBC;
	position: relative;
	top: -3px;
}

.submit-btn {
	position: absolute;
	cursor: pointer;
	right: 12px;
	bottom: 12px;
	width: 76px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: #1549C0;
	border-radius: 30px;
	font-size: 14px;
}

.comment-other-detail {
	font-size: 14px;
	color: #384572;
	line-height: 20px;
}

.comment-other-info {
	display: flex;
	height: 40px;
	justify-content: space-between;
	align-items: center;
}

.comment-user-info {
	display: flex;
	gap: 16px;
}

.user-info-name {
	font-size: 14px;
	font-weight: 600;
	color: #384572;
}

.user-info-time {
	font-size: 13px;
	color: #A6ACBC;
}

.comment-user-btn {
	display: flex;
	gap: 24px;
	font-size: 13px;
	color: #384572;
	cursor: pointer;
	user-select: none;
}

.comment-btn-reply,
.comment-btn-delete {
	display: flex;
	align-items: center;
	gap: 4px;
}

.comment-other-reply {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.comment-other-reply:empty {
	margin-top: 0;
}

.reply-tag {
	font-size: 14px;
	color: #A6ACBC;
}

.reply-name {
	color: #384572;
	margin-left: 4px;
}

.disabled {
	cursor: not-allowed;
	opacity: .6;
}

.detail-list-card-btn,
.list-card-btn {
	position: relative;
}

.down-tip {
	transition: all .3s;
	display: none;
	left: 0;
	top: 44px;
	padding: 17px;
	color: rgba(154, 154, 154, 1);
	width: 294px;
	background: white;
	height: 103px;
	position: absolute;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
	border-radius: 8px;
}

.down-tip-show {
	display: block;
}

.down-tip-text {
	margin-bottom: 12px;
}

.down-tip a,
.down-tip a:hover {
	color: #1549C0;
}