.page-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.page-nav-holder {
	--margin-top: 15px;
	--margin-bottom: 15px;
}

.page-nav-holder a {
	--font-size: 16px;
	--height: 38px;
	--width: 38px;
	--line-height: 38px;
	--margin-right: 12px;
	display: inline-block;
	font-family: 'Microsoft YaHei UI';
	background-color: white;
	cursor: pointer;
	border-radius: 100%;
	color: #707070;
}

.page-nav-holder a:hover {
	background-color: #faec22;
	color: black;
}

.page-nav-holder a.jp-previous {
	--width: 95px;
	--margin-right: 15px;
	--border-radius: 20px;
	--font-size: 18px;
	font-family: 'Microsoft YaHei UI';
}

.page-nav-holder a.jp-next {
	--width: 95px;
	--margin-left: 15px;
	--border-radius: 20px;
	--font-size: 18px;
	font-family: 'Microsoft YaHei UI';
}

.page-nav-holder a.jp-current,
a.jp-current:hover {
	background-color: #faec22;
}

.page-nav-holder a.jp-disabled,
a.jp-disabled:hover {
	color: #bbb;
}

.page-nav-holder a.jp-current,
a.jp-current:hover,
.page-nav-holder a.jp-disabled,
a.jp-disabled:hover {
	cursor: default;
}

.page-nav-holder span {
	--margin-left: 5px;
	--margin-right: 5px;
}

.page-jump {
	--padding-left: 20px;
	--padding-right: 20px;
	--border-radius: 20px;
	--height: 38px;
	--font-size: 18px;
	font-family: 'Microsoft YaHei UI';
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #707070;
	background-color: white;
}

.page-jump input {
	--width: 38px;
	border: none;
	outline: none;
	text-align: center;
}

.page-jump>p {
	--margin-left: 19px;
	cursor: pointer;
	color: black;
	margin: 0;
}


@media (max-width: 767px) {
	.page-nav-holder {
		margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
		margin-bottom: calc(var(--margin-bottom) * var(--extra-small-ratio));
	}

	.page-nav-holder a {
		font-size: calc(var(--font-size) * var(--extra-small-ratio));
		height: calc(var(--height) * var(--extra-small-ratio));
		width: calc(var(--width) * var(--extra-small-ratio));
		line-height: calc(var(--line-height) * var(--extra-small-ratio));
		margin-right: calc(var(--margin-right) * var(--extra-small-ratio));
	}

	.page-nav-holder a.jp-previous {
		width: calc(var(--width) * var(--extra-small-ratio));
		margin-right: calc(var(--margin-right) * var(--extra-small-ratio));
		border-radius: calc(var(--border-radius) * var(--extra-small-ratio));
		font-size: calc(var(--font-size) * var(--extra-small-ratio));
	}

	.page-nav-holder a.jp-next {
		width: calc(var(--width) * var(--extra-small-ratio));
		margin-left: calc(var(--margin-left) * var(--extra-small-ratio));
		border-radius: calc(var(--border-radius) * var(--extra-small-ratio));
		font-size: calc(var(--font-size) * var(--extra-small-ratio));
	}

	.page-nav-holder span {
		margin-left: calc(var(--margin-left) * var(--extra-small-ratio));
		margin-right: calc(var(--margin-right) * var(--extra-small-ratio));
	}

	.page-jump {
		padding-left: calc(var(--padding-left) * var(--extra-small-ratio));
		padding-right: calc(var(--padding-right) * var(--extra-small-ratio));
		border-radius: calc(var(--border-radius) * var(--extra-small-ratio));
		height: calc(var(--height) * var(--extra-small-ratio));
		font-size: calc(var(--font-size) * var(--extra-small-ratio));
	}

	.page-jump input {
		width: calc(var(--width) * var(--extra-small-ratio));
	}

	.page-jump>p {
		margin-left: calc(var(--margin-left) * var(--extra-small-ratio));
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.page-nav-holder {
		margin-top: calc(var(--margin-top) * var(--small-ratio));
		margin-bottom: calc(var(--margin-bottom) * var(--small-ratio));
	}

	.page-nav-holder a {
		font-size: calc(var(--font-size) * var(--small-ratio));
		height: calc(var(--height) * var(--small-ratio));
		width: calc(var(--width) * var(--small-ratio));
		line-height: calc(var(--line-height) * var(--small-ratio));
		margin-right: calc(var(--margin-right) * var(--small-ratio));
	}

	.page-nav-holder a.jp-previous {
		width: calc(var(--width) * var(--small-ratio));
		margin-right: calc(var(--margin-right) * var(--small-ratio));
		border-radius: calc(var(--border-radius) * var(--small-ratio));
		font-size: calc(var(--font-size) * var(--small-ratio));
	}

	.page-nav-holder a.jp-next {
		width: calc(var(--width) * var(--small-ratio));
		margin-left: calc(var(--margin-left) * var(--small-ratio));
		border-radius: calc(var(--border-radius) * var(--small-ratio));
		font-size: calc(var(--font-size) * var(--small-ratio));
	}

	.page-nav-holder span {
		margin-left: calc(var(--margin-left) * var(--small-ratio));
		margin-right: calc(var(--margin-right) * var(--small-ratio));
	}

	.page-jump {
		padding-left: calc(var(--padding-left) * var(--small-ratio));
		padding-right: calc(var(--padding-right) * var(--small-ratio));
		border-radius: calc(var(--border-radius) * var(--small-ratio));
		height: calc(var(--height) * var(--small-ratio));
		font-size: calc(var(--font-size) * var(--small-ratio));
	}

	.page-jump input {
		width: calc(var(--width) * var(--small-ratio));
	}

	.page-jump>p {
		margin-left: calc(var(--margin-left) * var(--small-ratio));
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	.page-nav-holder {
		margin-top: calc(var(--margin-top) * var(--middle-ratio));
		margin-bottom: calc(var(--margin-bottom) * var(--middle-ratio));
	}

	.page-nav-holder a {
		font-size: calc(var(--font-size) * var(--middle-ratio));
		height: calc(var(--height) * var(--middle-ratio));
		width: calc(var(--width) * var(--middle-ratio));
		line-height: calc(var(--line-height) * var(--middle-ratio));
		margin-right: calc(var(--margin-right) * var(--middle-ratio));
	}

	.page-nav-holder a.jp-previous {
		width: calc(var(--width) * var(--middle-ratio));
		margin-right: calc(var(--margin-right) * var(--middle-ratio));
		border-radius: calc(var(--border-radius) * var(--middle-ratio));
		font-size: calc(var(--font-size) * var(--middle-ratio));
	}

	.page-nav-holder a.jp-next {
		width: calc(var(--width) * var(--middle-ratio));
		margin-left: calc(var(--margin-left) * var(--middle-ratio));
		border-radius: calc(var(--border-radius) * var(--middle-ratio));
		font-size: calc(var(--font-size) * var(--middle-ratio));
	}

	.page-nav-holder span {
		margin-left: calc(var(--margin-left) * var(--middle-ratio));
		margin-right: calc(var(--margin-right) * var(--middle-ratio));
	}

	.page-jump {
		padding-left: calc(var(--padding-left) * var(--middle-ratio));
		padding-right: calc(var(--padding-right) * var(--middle-ratio));
		border-radius: calc(var(--border-radius) * var(--middle-ratio));
		height: calc(var(--height) * var(--middle-ratio));
		font-size: calc(var(--font-size) * var(--middle-ratio));
	}

	.page-jump input {
		width: calc(var(--width) * var(--middle-ratio));
	}

	.page-jump>p {
		margin-left: calc(var(--margin-left) * var(--middle-ratio));
	}
}

@media (min-width: 1201px) and (max-width: 1452px) {
	.page-nav-holder {
		margin-top: calc(var(--margin-top) * var(--large-ratio));
		margin-bottom: calc(var(--margin-bottom) * var(--large-ratio));
	}

	.page-nav-holder a {
		font-size: calc(var(--font-size) * var(--large-ratio));
		height: calc(var(--height) * var(--large-ratio));
		width: calc(var(--width) * var(--large-ratio));
		line-height: calc(var(--line-height) * var(--large-ratio));
		margin-right: calc(var(--margin-right) * var(--large-ratio));
	}

	.page-nav-holder a.jp-previous {
		width: calc(var(--width) * var(--large-ratio));
		margin-right: calc(var(--margin-right) * var(--large-ratio));
		border-radius: calc(var(--border-radius) * var(--large-ratio));
		font-size: calc(var(--font-size) * var(--large-ratio));
	}

	.page-nav-holder a.jp-next {
		width: calc(var(--width) * var(--large-ratio));
		margin-left: calc(var(--margin-left) * var(--large-ratio));
		border-radius: calc(var(--border-radius) * var(--large-ratio));
		font-size: calc(var(--font-size) * var(--large-ratio));
	}

	.page-nav-holder span {
		margin-left: calc(var(--margin-left) * var(--large-ratio));
		margin-right: calc(var(--margin-right) * var(--large-ratio));
	}

	.page-jump {
		padding-left: calc(var(--padding-left) * var(--large-ratio));
		padding-right: calc(var(--padding-right) * var(--large-ratio));
		border-radius: calc(var(--border-radius) * var(--large-ratio));
		height: calc(var(--height) * var(--large-ratio));
		font-size: calc(var(--font-size) * var(--large-ratio));
	}

	.page-jump input {
		width: calc(var(--width) * var(--large-ratio));
	}

	.page-jump>p {
		margin-left: calc(var(--margin-left) * var(--large-ratio));
	}
}

@media (min-width: 1453px) and (max-width: 1771px) {
	.page-nav-holder {
		margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
		margin-bottom: calc(var(--margin-bottom) * var(--extra-large-ratio));
	}

	.page-nav-holder a {
		font-size: calc(var(--font-size) * var(--extra-large-ratio));
		height: calc(var(--height) * var(--extra-large-ratio));
		width: calc(var(--width) * var(--extra-large-ratio));
		line-height: calc(var(--line-height) * var(--extra-large-ratio));
		margin-right: calc(var(--margin-right) * var(--extra-large-ratio));
	}

	.page-nav-holder a.jp-previous {
		width: calc(var(--width) * var(--extra-large-ratio));
		margin-right: calc(var(--margin-right) * var(--extra-large-ratio));
		border-radius: calc(var(--border-radius) * var(--extra-large-ratio));
		font-size: calc(var(--font-size) * var(--extra-large-ratio));
	}

	.page-nav-holder a.jp-next {
		width: calc(var(--width) * var(--extra-large-ratio));
		margin-left: calc(var(--margin-left) * var(--extra-large-ratio));
		border-radius: calc(var(--border-radius) * var(--extra-large-ratio));
		font-size: calc(var(--font-size) * var(--extra-large-ratio));
	}

	.page-nav-holder span {
		margin-left: calc(var(--margin-left) * var(--extra-large-ratio));
		margin-right: calc(var(--margin-right) * var(--extra-large-ratio));
	}

	.page-jump {
		padding-left: calc(var(--padding-left) * var(--extra-large-ratio));
		padding-right: calc(var(--padding-right) * var(--extra-large-ratio));
		border-radius: calc(var(--border-radius) * var(--extra-large-ratio));
		height: calc(var(--height) * var(--extra-large-ratio));
		font-size: calc(var(--font-size) * var(--extra-large-ratio));
	}

	.page-jump input {
		width: calc(var(--width) * var(--extra-large-ratio));
	}

	.page-jump>p {
		margin-left: calc(var(--margin-left) * var(--extra-large-ratio));
	}
}

@media (min-width: 1772px) {
	.page-nav-holder {
		margin-top: calc(var(--margin-top) * var(--design-ratio));
		margin-bottom: calc(var(--margin-bottom) * var(--design-ratio));
	}

	.page-nav-holder a {
		font-size: calc(var(--font-size) * var(--design-ratio));
		height: calc(var(--height) * var(--design-ratio));
		width: calc(var(--width) * var(--design-ratio));
		line-height: calc(var(--line-height) * var(--design-ratio));
		margin-right: calc(var(--margin-right) * var(--design-ratio));
	}

	.page-nav-holder a.jp-previous {
		width: calc(var(--width) * var(--design-ratio));
		margin-right: calc(var(--margin-right) * var(--design-ratio));
		border-radius: calc(var(--border-radius) * var(--design-ratio));
		font-size: calc(var(--font-size) * var(--design-ratio));
	}

	.page-nav-holder a.jp-next {
		width: calc(var(--width) * var(--design-ratio));
		margin-left: calc(var(--margin-left) * var(--design-ratio));
		border-radius: calc(var(--border-radius) * var(--design-ratio));
		font-size: calc(var(--font-size) * var(--design-ratio));
	}

	.page-nav-holder span {
		margin-left: calc(var(--margin-left) * var(--design-ratio));
		margin-right: calc(var(--margin-right) * var(--design-ratio));
	}

	.page-jump {
		padding-left: calc(var(--padding-left) * var(--design-ratio));
		padding-right: calc(var(--padding-right) * var(--design-ratio));
		border-radius: calc(var(--border-radius) * var(--design-ratio));
		height: calc(var(--height) * var(--design-ratio));
		font-size: calc(var(--font-size) * var(--design-ratio));
	}

	.page-jump input {
		width: calc(var(--width) * var(--design-ratio));
	}

	.page-jump>p {
		margin-left: calc(var(--margin-left) * var(--design-ratio));
	}
}