.card-abc {
	display: flex;
	flex-direction: column
}

.card-abc .title {
	padding: 20px 0
}

.card-abc h2 {
	font-size: 1.25rem;
	top: 0;
	position: sticky
}

.card-abc p.alert-dismissible {
	padding-right: 1.25rem
}

.card-abc p.alert-dismissible .close {
	padding: .25rem
}

.abc-item {
	--line-color: #FFC5AA;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	margin-bottom: .75rem
}

html[data-theme=dark] .abc-item {
	--line-color: #444
}

.abc-item:hover {
	color: red
}

.font-lg {
	font-size: 1.125rem!important;
	color:#2196f3;
}

.pt-3 {
	padding-top: 20px!important
}

.title-line-cross {
	display: flex;
	align-items: center
}
.abc-item .line>span {
	overflow: hidden;
	width: 100%
}


.abc-item .line>span:last-child {
	border-bottom: none;
	height: 11px
}


.abc-item .zi {
	text-align: center;
	font-size: 1rem;
	padding: .75rem 0
}

.abc-item .zi:before {
	content: "🔊"
}

.abc-container ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex
}

.abc-container li {
	margin-left: 1rem;
	width: calc(10% - 1rem)
}

.abc-sanpin-list ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin-bottom: 0
}

.abc-sanpin-list li {
	width: 12.5%;
	padding: 0 .5rem
}

.abc-sanpin-list li .letter {
	letter-spacing: 0!important
}

.abc-yinjie-list {
	display: flex;
	padding-bottom: .5rem
}

.abc-yinjie-list:nth-child(2n+1) {
	border-top: 1px dotted #ebd187;
	border-bottom: 1px dotted #ebd187
}

.abc-yinjie-list+.abc-yinjie-list {
	padding-top: 1rem
}

.abc-yinjie-list>p {
	width: 30px;
	font-weight: 700;
	color: red;
	flex-shrink: 0
}

.abc-yinjie-list>ul {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1
}

.abc-yinjie-list>ul li {
	width: auto;
	margin: .25rem
}

.abc-yinjie-list>ul li>a {
	display: block;
	padding: 2px 15px!important;
	border: 1px solid #e0e0e0;
	border-radius: 18px;
	font-size: 15px
}

.abc-shengdiao-list ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.abc-shengdiao-list li {
	display: flex
}

.abc-shengdiao-list li.row-head {
	background-color: #f8f9fa;
	color: #343a40;
	font-weight: 700;
	border: 1px solid #dee2e6;
	border-radius: .25rem;
	box-shadow: 0 .125rem .25rem var(--shadow-color);
	font-size: .875rem
}

.abc-shengdiao-list li.row-head>div {
	border-right: 1px solid #dee2e6;
	padding: .25rem 0
}

.abc-shengdiao-list li.row-head>div:last-child {
	border-right: none
}

.abc-shengdiao-list li.row-body {
	padding-top: 1rem
}

.abc-shengdiao-list li>div {
	text-align: center;
	width: 20%
}

.abc-shengdiao-list li:last-child {
	padding-bottom: 0
}

.abc-shengdiao-list li .abc-item .line {
	border-right: 0
}

.abc-shengdiao-list li .abc-item:first-child {
	background-color: #f8f9fa
}

.abc-shengdiao-list li .abc-item:first-child .line {
	border-left: none
}

.abc-fayin-container {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	padding-top: 1rem;
	border-bottom: 1px dashed #ebd187
}

.abc-fayin-container dl {
	display: flex;
	align-items: flex-start;
	width: 50%;
	padding: 1rem;
	border: 1px solid var(--border-color);
	margin: -1px 0 0 -1px
}

.abc-fayin-container dl dt {
	width: 80px;
	font-weight: lighter;
	margin: 0;
	flex-shrink: 0
}

.abc-fayin-container dl dd {
	margin: 0;
	padding-left: 1rem;
	flex-grow: 1
}

.abc-fayin-container:first-child {
	padding-top: 0
}

.abc-fayin-container:last-child {
	padding-bottom: 0;
	border-bottom: none
}

.pinyin-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: section
}

.pinyin-links ul li {
	padding: 10px 0;
	font-size: .9375rem;
	border-bottom: 1px solid var(--border-color)
}

.pinyin-links ul li a::before {
	counter-increment: section;
	content: counter(section) ".";
	display: inline-block;
	margin-right: 10px;
	font-size: .875rem;
	font-weight: 700;
	color: #6c757d
}

.mt-2 {
	margin-top: 10px!important
}
.flex-wrap {
	flex-wrap: wrap!important
}

.justify-content-start {
	justify-content: flex-start!important
}

@media (max-width:1419.98px) {
	.abc-sanpin-list li {
		width: 16.6666%
	}
}

@media (max-width:1199.98px) {
	.abc-list li {
		width: calc(16.6666% - 1rem)
	}

	.abc-sanpin-list li {
		width: 20%
	}
}

@media (max-width:991.98px) {
	.abc-list li {
		width: calc(20% - 1rem)
	}

	.abc-fayin-container dl {
		width: 100%
	}

	.abc-sanpin-list li {
		width: 20%
	}
}

@media (max-width:767.98px) {
	.abc-shengdiao-list .row-head {
		font-size: .875rem
	}

	.abc-shengdiao-list .row-head span {
		display: block;
		text-align: center
	}

	.abc-sanpin-list ul {
		margin-left: -.5rem!important;
		margin-right: -.5rem!important
	}

	.abc-sanpin-list li {
		width: 25%
	}
}

@media (max-width:575.98px) {
	.abc-list li {
		margin-left: .5rem;
		width: calc(25% - .5rem)
	}

	.abc-sanpin-list li {
		width: 33.3333%
	}

	.card-abc .card-body p {
		margin-left: .5rem
	}

	.card-abc .card-body p.alert-dismissible {
		padding: 1rem
	}

	.card-abc .card-body p.alert-dismissible .close {
		padding: .25rem
	}
}