body {
	overflow-x: hidden;
}

article img {
	max-width: 100%;
}

main {
	min-height: 100vh;
	transition: all 0.5s ease-in-out;
}

[class^=item_] {
	height: 100%;
}

[class^=item_]::before,
[class^=item_]::after {
	display: block;
	content: "";
	clear: both;
	float: none;
}

.mm_warp {
	clear: both;
	float: none;
}

.header {
	min-height: var(--height_big);
	display: block;
	position: sticky;
	z-index: 10;
	right: 0;
	top: 0;
	transition: all 0.5s ease-in-out;
	width: 100%;
}

.header::before,
.header::after {
	content: "";
	display: block;
	float: none;
	clear: both;
}

.footer {
	min-height: var(--height_small);
	display: block;
	position: sticky;
	z-index: 10;
	right: 0;
	bottom: 0;
	width: 100%;
	transition: all 0.5s ease-in-out;
}

.mm_side .mm_warp {
	position: absolute;
	z-index: 32;
	top: 0;
	left: 0;
	height: 100%;
	width: 12rem;
	white-space: nowrap;
	transition: all 0.5s ease-in-out;
}

.mm_view {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

main .mm_view {
	overflow-x: auto;
}

.mm_view::-webkit-scrollbar {
	display: none;
}

.mm_table td>img {
	max-height: 2.5rem;
}

.mm_table .btn_open {
	width: 1.5rem;
	line-height: 1.5rem;
	height: 1.5rem;
	border: none;
	background: none;
	text-align: center;
	padding: 0;
}

.mm_table .fa-caret-right {
	transform: rotate(0deg);
	transition: transform ease-in-out 0.5s;
}

.mm_table .open .fa-caret-right {
	transform: rotate(90deg);
}

.mm_table .sub {
	background: rgba(0, 0, 0, 0.02);
}

.mm_table .sub .btn_open {
	margin-left: 1.5rem;
}

.mm_table .no_sub .btn_open {
	opacity: 0.5;
}


header.hide-x {
	top: -100%;
}

footer.hide-x {
	bottom: -100%;
}


.mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	display: block;
	background: var(--bg_mask);
	transition: opacity .5s ease;
	z-index: 31;
}

.hide-x .mask {
	width: 0;
	height: 0;
	opacity: 0;
}

/* 栅格 */
.mm_container {
	max-width: 76rem;
	margin-right: auto;
	margin-left: auto;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}
.flex>* {
	width: 100%;
}

@media (min-width: 567px) {
	.flex article {
		width: 75%;
	}
	
	.flex aside {
		width: 25%;
	}
}
.mm_row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: start;
	align-items: stretch;
}

.mm_grid {
	max-width: 76rem;
	margin: 0 auto;
	position: relative;
	flex-wrap: wrap;
	display: flex;
	align-content: flex-start;
	align-items: stretch;
	justify-content: start;
	justify-items: stretch;
}

.mm_col {
	max-width: 100%;
}

/**
 * 卡片
 */
.mm_card {
	border-radius: var(--radius_small);
	height: calc(100% - var(--margin_small) * 2);
	margin: var(--margin_small);
}

.mm_card h5 {
	margin: 0;
}

.mm_modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
}

.mm_modal.hide-x {
	top: 100%;
	left: 100%;
}

.from_center .modal_main {
	width: fit-content;
}

.from_default .mm_card,
.from_center .mm_card {
	margin: auto;
	min-width: fit-content;
	max-height: calc(100vh - 5rem);
}

@media (max-width: 576px) {
	.mm_modal .mm_card {
		width: calc(100vw - 1rem);
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}
}

.card_body {
	position: relative;
}

.card_head {
	position: relative;
	padding: var(--padding_small) var(--padding_base);
}

.card_head h5 {
	margin: 0;
}

.card_foot {
	position: relative;
}

.card_head::before,
.card_head::after,
.card_body::before,
.card_body::after,
.card_foot::before,
.card_foot::after {
	content: "";
	display: block;
	float: none;
	clear: both;
}

/* 列表 */
.mm_list {
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
}

.mm_list .mm_item {
	display: block;
	float: left;
	list-style: none;
	position: relative;
	min-width: 8.333333%;
}

ul.mm_list li {
	list-style: none;
	float: left;
	overflow: hidden;
}

ol.mm_list {
	list-style-type: none;
	counter-reset: step;
	counter-increment: step 0;
	padding-left: 2.75rem;
}

ol.mm_list li::before {
	content: counter(step);
	counter-increment: step;
	position: absolute;
	left: -1.75rem;
	top: 50%;
	display: block;
	width: 1.125rem;
	line-height: 1.125rem;
	text-align: center;
	border-radius: 0.125rem;
	transform: translateY(-50%);
	letter-spacing: 0;
	font-size: var(--text_mini);
	height: 1.125rem;
}

.mm_form dt {
	min-width: 7rem;
}

/* ===  布局控制  === */
.mm_item {
	position: relative;
	width: 100%;
}

.mm_item:before,
.mm_item:after {
	content: "";
	display: block;
	float: none;
	clear: both;
}

.media {
	padding: var(--padding_small);
}

.doc {
	padding: var(--padding_small);
	overflow: hidden;
	height: 100%;
}

.mm_item .content {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	font-size: 0.875rem;
}

.item-ltb .media {
	float: left;
	height: 100%;
}

.item-rtb .media {
	float: right;
	height: 100%;
}

.item-ll .media,
.item-lr .media {
	float: left;
}

.item-ll .title,
.item-lr .title {
	float: left;
	margin-right: var(--margin_small);
	min-width: 2rem;
}

.item-lr .content {
	text-align: right;
	line-height: 1.75;
}

.item-rl .media,
.item-rr .media {
	float: right;
}

.item-rl .title {
	float: left;
	margin-right: var(--margin_small);
}

.item-rl .content {
	line-height: 1.75;
}

.item-rr .title {
	float: right;
}

.mobile .mm_item {
	border-bottom: 1px solid var(--border_base);
	margin-bottom: -1px;
}

.mm_group {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	padding-left: 1px;
	padding-right: 1px;
}

.mm_group button,
.mm_group input,
.mm_group text,
.mm_group select {
	margin-right: -1px;
	flex: 1;
	float: left;
	border-radius: 0 !important;
	white-space: nowrap;
}

.mm_group>*:focus {
	z-index: 20;
}

.mm_group>*:first-child {
	margin-left: -1px;
}

.mm_group text,
.mm_group .unit,
.mm_group .title {
	flex: inherit;
	padding-left: var(--padding_base);
	padding-right: var(--padding_base);
	padding-top: var(--padding_mini);
	padding-bottom: var(--padding_mini);
	color: var(--font_base_b);
	border: 1px solid var(--border_base);
	font-size: 0.875rem;
	text-align: center;
	line-height: 1.75;
}


.group-0>*:first-child {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.group-0>*:last-child {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.group-1>*:first-child {
	border-top-left-radius: .25rem !important;
	border-bottom-left-radius: .25rem !important;
}

.group-1>*:last-child {
	border-top-right-radius: .25rem !important;
	border-bottom-right-radius: .25rem !important;
}

.group-2>*:first-child {
	border-top-left-radius: .5rem !important;
	border-bottom-left-radius: .5rem !important;
}

.group-2>*:last-child {
	border-top-right-radius: .5rem !important;
	border-bottom-right-radius: .5rem !important;
}

.mm_info .mm_item {
	border-top: none;
	border-bottom: none;
	overflow: hidden;
}

.mm_info .title {
	display: flex;
	align-items: center;
}

.mm_info .title::after,
.mm_info .content::after {
	content: "";
	display: block;
	border-bottom: 1px solid var(--border_base);
	position: absolute;
	bottom: 0;
	width: 100%;
}

.mm_info .content img {
	max-width: 16.25rem;
	max-height: 16.25rem;
}

.item-ll.img-small .title,
.item-lr.img-small .title,
.item-ll.img-small .content,
.item-lr.img-small .content {
	line-height: var(--height_base);
}


.info-base .mm_item {
	display: flex;
}

.info-base .mm_item .title {
	min-width: 5rem;
}

.info-base .mm_item .content {
	color: var(--font_base);
	line-height: var(--height_base);
	margin-top: 0.25rem;
}

.info-base .mm_item .mm_grid {
	width: 90%;
}

/* ===  表单  === */
.mobile input[type=range],
.mobile input[type=text],
.mobile input[type=number],
.mobile input[type=password],
.mobile input[type=tel],
.mobile input[type=email],
.mobile input[type=date],
.mobile input[type=datetime],
.mobile input[type=time],
.mobile input[type=datetime-local],
.mobile input[type=month],
.mobile input[type=week],
.mobile input[type=url] {
	width: 100%;
	border: none;
	padding-left: 0;
	padding-right: 0;
}

.mobile textarea {
	border: none;
	padding: var(--padding_mini) 0;
	min-width: auto;
}

.mobile select~input[type=text],
.mobile select~input[type=number],
.mobile select~input[type=tel] {
	border: 1px solid var(--border_base);
	padding-left: var(--padding_small);
	padding-right: var(--padding_small);
	width: initial;
}

.card-full {
	margin: var(--margin_small);
	height: calc(100% - var(--margin_base));
}

.table-sm td,
.table-sm th {
	padding: var(--padding_mini) var(--padding_small);
}


/* ===  模态窗  === */
.modal_main {
	position: absolute;
	z-index: 32;
	transform: translate(0, 0);
	transition: all 0.5s ease-in-out;
}

.modal_main .card_head {
	background: var(--bg_main);
}

.modal_main .card_body {
	background: var(--bg_main);
}

.from_left .modal_main {
	top: 0;
	left: 0;
}

.from_left.hide-x .modal_main {
	transform: translate(-100%, 0);
}

.from_right .modal_main {
	top: 0;
	right: 0;
}

.from_right.hide-x .modal_main {
	transform: translate(100%, 0);
}

.from_top .modal_main {
	top: 0;
	left: 0;
	width: 100%;
}

.from_top.hide-x .modal_main {
	transform: translate(0, -100%);
}

.from_bottom .modal_main {
	bottom: 0;
	left: 0;
	width: 100%;
}

.from_bottom.hide-x .modal_main {
	transform: translate(0, 100%);
}

.from_center .modal_main {
	top: 50%;
	left: 50%;
	width: fit-content;
	max-width: 100%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.from_center.hide-x .modal_main {
	max-width: 0;
}

.from_default .modal_main {
	top: 50%;
	left: 50%;
	width: fit-content;
	transform: translate(-50%, -50%);
}

.from_default.hide-x .modal_main {
	display: none;
	opacity: 0;
}

.mm_modal .mm_body {
	background: var(--bg_main);
}

.mm_modal .popup {
	position: absolute;
	z-index: 32;
}

.from_default.hide-x {}

/* 所有CSS属性都拥有过渡属性，动画持续时间3s 延迟2s触发 linear的触发函数 */
.trans {
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}

.value label {
	margin-right: var(--margin_base);
	display: inline-block;
	overflow: hidden;
	line-height: 2rem;
}

.mobile .value label {
	float: none;
	margin-right: 0;
}

.mm_icon {
	background: center center no-repeat;
	background-size: 100%;
	position: relative;
	width: fit-content;
	line-height: 1;
}

.mm_icon .img {
	position: relative;
	top: -0.125rem;
}

.img-auto .mm_icon {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
}

.img-auto .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}