@charset 'utf-8';

body {
	background: var(--bg-basic);
}

.head .title {
	font-size: 20px;
	font-weight: 700;
}

.page .main {
	height: calc(100% - var(--head-height) - 72px);;
	margin: var(--head-height) 8px 72px;
}
.main .input {
	margin-top: 12px;
	padding: 16px 12px;
	background: var(--color-light);
	border-radius: 8px;
	box-shadow: 2px 2px 8px var(--bg-shade);
}
.input .row {
	text-align: center;
}
.input .row input {
	width: 100%;
	padding: 8px 8px;
	color: var(--color-heedful);
	font-size: 14px;
	line-height: 20px;
	border-radius: 4px;
	border: 1px solid var(--color-heedful);
}
.input .row textarea {
	width: calc(100% - 16px);
	padding: 8px 8px;
	color: var(--color-heedful);
	font-size: 14px;
	line-height: 20px;
	border-radius: 4px;
	border: 1px solid var(--color-heedful);
}
.input .row button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 0;
	margin-top: 12px;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 2px;
	border-radius: 8px;
}
.input .btn .icon {
	width: auto;
	height: 24px;
}
.input .btn span {
	margin-left: 8px;
}

.explain {
	margin-top: 12px;
}
.explain .text {
	margin-top: 8px;
	color: var(--color-gray);
	font-size: 14px;
	line-height: 24px;
	text-align: justify;
	word-break: break-all;
}
.explain .icon {
	width: 24px;
	margin: 0 4px;
	vertical-align: middle;
	opacity: 0.6;
}

.card {
	padding: 16px 12px;
	margin-top: 16px;
	border-radius: 8px;
	background-color: var(--color-light);
	box-shadow: 2px 2px 8px var(--bg-shade);
}
.card .title {
	color: var(--color-title);
}
.card .data {
	margin-top: 8px;
	font-size: 14px;
}
.card .data .piece {
	width: 50%;
	flex-grow: 1;
	line-height: 18px;
}
.card .data .val {
	flex-grow: 1;
}
.card .medium {
	margin-top: 8px;
	text-align: center;
}
.card .m-video {
	width: 100%;
	height: auto;
}
.card .clue {
	margin-top: 8px;
	text-align: center;
	color: var(--color-tip);
	font-size: var(--fsize-desc);
}

.btn-group {
	position: fixed;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--max-width);
	padding: 12px 12px;
	bottom: 0;
	background-color: var(--bg-white);
}
.btn-group .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 49%;
	padding: 12px 0;
	font-size: 16px;
	border-radius: 4px;
}
.btn-group .icon {
	width: 24px;
}
.btn-group .btn span {
	margin-left: 4px;
}
.btn-group .btn-video {
	background-color: #32d791;
}
.btn-group .btn-audio {
	background-color: #ff5c64;
}
.btn-group .btn-disabled {
	cursor: no-drop;
	background-color: var(--color-grey);
}
.btn-group .btn-disabled:active {
	transform: none;
}

/* 下载模态框 */
.modal-download {
	/* display: block; */
}
.modal-download .modal-content {
	padding: 16px 12px;
	border-radius: 8px;
}
.modal-download .modal-title {
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
}
.modal-download .modal-main {
	margin-top: 12px;
	text-align: center;
}
.modal-download .download-tip {
	color: var(--color-basic);
	font-size: var(--fsize-basic);
	line-height: 20px;
}
.modal-download .download-tip .tip-major {
	color: var(--color-improtant);
}
.modal-download .service {
	margin-top: 8px;
}
.modal-download .service .icon {
	width: 16px;
}
.modal-download .service .text {
	margin-left: 4px;
	color: var(--color-link);
}
.modal-download .download-btn {
	margin-top: 16px;
}
.modal-download .download-btn .btn {
	width: 49%;
	padding: 8px 0;
	border-radius: 4px;
}
.modal-download .download-btn .btn-cancel {
	padding: 7px 0px;
	color: var(--color-btn);
	background-color: transparent;
	border: 1px solid var(--color-btn);
}

/* 支付模态框 */
.modal-pay {
	/* display: block; */
	color: var(--color-basic);
}
.modal-pay .modal-content {
	padding: 16px 12px;
	border-radius: 8px;
}
.modal-pay .modal-title {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
}
.modal-pay .modal-main {
	margin-top: 16px;
	text-align: center;
}
.modal-pay .pay-explain {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	color: var(--color-gray);
	font-size: var(--fsize-basic);
}
.modal-pay .explain {
	margin: 0 4px;
	padding: 4px 8px;
	color: var(--color-btn);
	border: 1px solid var(--color-btn);
	border-radius: 4px;
}
.modal-pay .explain .icon {
	width: 16px;
	height: 16px;
	margin-right: 2px;
}
.modal-pay .pay-payment {
	padding: 8px 16px;
}
.modal-pay .payment {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 8px 16px;
	margin: 8px 0;
	color: var(--color-white);
	border-radius: 6px;
}
.modal-pay .payment-wechat {
	/* filter: grayscale(0.8); */
	background: #2AA139E0;
	/* border: 1px solid #00c800; */
}
.modal-pay .payment-alipay {
	background: #027AFFE0;
	border: 1px solid #30afea;
}
.modal-pay .payment-balance {
	background: #F15A4AE0;
	/* border: 1px solid #f15a4a; */
}
.modal-pay .payment .icon {
	width: 32px;
}
.modal-pay .payment .text {
	margin-left: 4px;
}
.modal-pay .pay-tip {
	color: var(--color-tip);
	font-size: var(--fsize-basic);
}
.modal-pay .pay-tip .service {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
}
.modal-pay .pay-tip .icon {
	width: 16px;
	margin: 0 4px;
}
.modal-pay .pay-tip .text {
	color: #007BFF;
	line-height: 24px;
}