@charset "utf-8";

:root {
	--icon-yes: #2E8B57;
	--icon-no: #b22222;
	--slider-bg: linear-gradient(to right, #2EA060 50%, #2EA06040 50%);
}

.main {
	padding: 8px 12px;
}

.upload {
	padding: 8px;
	text-align: center;
}

.upload .preview-img {
	width: auto;
	height: auto;
	max-width: 320px;
	max-width: min(calc(100vw - 32px), 320px);
	max-height: 360px;
	max-height: min(40vh, 320px);
	border-radius: 4px;
	border: 1px solid var(--color-border);
	box-shadow: 1px 1px 4px var(--color-shadow);
}
.upload .origin-img {
	display: none;
}
.upload .origin-txt {
	display: none;
}

.upload .info {
	margin-top: 4px;
	justify-content: center;
	color: var(--color-desc);
	font-size: var(--fsize-desc);
	text-align: left;
}
.upload .info .text {
	justify-content: center;
}
.upload .info .piece {
	margin-right: 8px;
}
.upload .tip {
	color: var(--color-tip);
	font-size: var(--fsize-basic);
}


.param {
	padding: 0 4px;
	margin-top: 8px;
}
.param .important {
	color: var(--color-improtant);
}
.param .card {
	margin-top: 8px;
	padding: 16px 12px;
	border-radius: 4px;
	color: var(--color-gray);
	font-size: var(--fsize-basic);
	background-color: var(--color-light);
	box-shadow: 1px 1px 4px var(--color-shadow);
}
.param .piece {
	margin-top: 12px;
}
.param .piece:first-child {
	margin-top: 0;
}
.param .piece .val-input {
	padding: 2px 4px;
	color: var(--color-heedful);
}
.param .tip {
	text-align: center;
	color: var(--color-tip);
}
.param .tip p {
	padding: 1px 0;
}
.param .val-bgc {}
.param .val-select {
	padding: 0 8px;
	color: var(--color-heedful);
	background: transparent;
}
.param .arrow {
	color: var(--color-heedful);
	margin-left: -8px;
}
.param .val-bgc .bgc-view {
	display: inline-block;
	min-width: 32px;
	height: 14px;
	margin-left: 8px;
	padding: 4px 8PX;
	font-size: 14px;
	line-height: 14px;
	border: 1px solid #666666;
	border-radius: 2px;
}
.param .bgc-maintain {
	color: #111111;
	background: transparent;
}
.bgc-maintain::after {
	content: '';
}
.param .bgc-white {
	color: #111111;
	background: #FFFFFF;
}
.bgc-white::after {
	/* content: '白色'; */
}
.param .bgc-blue {
	color: #EEEEEE;
	background: #438EDB;
}
.bgc-blue::before {
	/* content: '蓝色'; */
}
.param .bgc-wathet {
	color: #EEEEEE;
	background: #64C5FF;
}
.bgc-wathet::before {
	/* content: '浅蓝'; */
}
.param .bgc-red {
	color: #EEEEEE;
	background: #FF0000;
}
.bgc-red::before {
	/* content: '红色'; */
}
.param .val-format .format-view {
	margin-left: 8px;
}
.param .dpi-input {
	margin-right: 4px;
	width: 128px;
	height: 20px;
	border: none;
}
.param .dpi-input::-webkit-slider-runnable-track {
	height: 5px;
	background: var(--slider-bg);
}
.param .dpi-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 20px;
	margin-top: -7px;
	background: #007BFF;
	border-radius: 4px;
	box-shadow: 0 0 4px var(--color-shadow);
}

.support {
	margin-top: 8px;
	opacity: 0.6;
	justify-content: center;
	color: var(--color-desc);
	font-size: var(--fsize-basic);
}
.support .piece {
	margin: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.support .piece .font-icon {
	display: block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	color: var(--color-white);
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	border-radius: 50%;
}
.support .support-yes {
	color: var(--icon-yes);
}
.support .support-no {
	color: var(--icon-no);
}
.support-yes .font-icon {
	background-color: var(--icon-yes);
}
.support-no .font-icon {
	background-color: var(--icon-no);
}


.btn-action {
	width: 100%;
	margin-top: 16px;
	padding: 12px 0;
	font-size: 20px;
	letter-spacing: 2px;
	border-radius: 8px;
}


.modal-attention {
	/* display: block; */
}
.modal-attention .modal-title {
	color: var(--color-title);
}
.modal-attention .modal-content {
	border-radius: 4px;
}
.modal-attention .clause {
	padding: 8px 16px;
	color: var(--color-basic);
	font-size: var(--fsize-basic);
	text-justify: distribute;
}
.modal-attention .clause p {
	margin-top: 4px;
}
.modal-attention .clause .keynot {
	color: var(--color-warn);
}
.modal-attention .attention-tip {
	color: var(--color-tip);
	font-size: var(--fsize-basic);
	text-align: center;
}
.modal-attention .attention-tip .service {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-attention .attention-tip .icon {
	width: 16px;
	margin: 0 4px;
}
.modal-attention .attention-tip .text {
	color: #007BFF;
	line-height: 24px;
}
.modal-attention .btn-know {
	display: block;
	margin: 0 auto;
	margin-top: 12px;
	padding: 8px 32px;
	border-radius: 4px;
}


.modal-pay {
	/* display: block; */
	color: var(--color-basic);
}
.modal-pay .modal-content {
	padding: 16px 12px;
	border-radius: 8px;
}
.modal-pay .modal-title {
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
}
.modal-pay .modal-main {
	margin-top: 12px;
	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 {
	display: flex;
	margin: 0 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 {
	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;
}
.modal-pay .pay-tip .icon {
	width: 16px;
	margin: 0 4px;
}
.modal-pay .pay-tip .text {
	color: #007BFF;
	line-height: 24px;
}


.loading {
	/* display: none; */
}