zh_UnionPay/common/css/common.css

.iPhone-bottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.view-word-wrap {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.common-index-box {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* 布局基础 */
.flex-common-css {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.flex-index-css {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.flex-common-x {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
}

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

.display-flex {
	display: flex;
}

.flex-justify-space {
	display: flex;
	justify-content: space-between;
}

.flex-justify-around {
	display: flex;
	justify-content: space-around;
}

.flex-justify-center {
	display: flex;
	justify-content: center;
}

.flex-justify-end {
	display: flex;
	justify-content: flex-end;
}

.flex-justify-start {
	display: flex;
	justify-content: flex-start;
}

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

.align-items-flex-end {
	display: flex;
	align-items: flex-end;
}

.flex-wrap-wrap {
	display: flex;
	flex-wrap: wrap;
}

.scroll-view-css {
	width: 100%;
	flex: 1;
	overflow: auto;
}

.box-sizing-border {
	box-sizing: border-box;
}

.text-align-center {
	text-align: center;
}

.text-align-right {
	text-align: right;
}

.text-align-left {
	text-align: left;
}


.flex1 {
	flex: 1;
}

.flex-shrink0 {
	flex-shrink: 0;
}

/*超出两行... */
.text-overflow-ellipsis {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/*超出一行... */
.text-overflow-ellipsis-one {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}

/*不换行*/
.white-space-nowrap {
	white-space: nowrap;
}

/*字体大小*/
.sys-size-20 {
	font-size: 20rpx;
}

.sys-size-22 {
	font-size: 22rpx;
}

.sys-size-24 {
	font-size: 24rpx;
}

.sys-size-26 {
	font-size: 26rpx;
}

.sys-size-28 {
	font-size: 28rpx;
}

.sys-size-30 {
	font-size: 30rpx;
}

.sys-size-32 {
	font-size: 32rpx;
}

.sys-size-34 {
	font-size: 34rpx;
}

.sys-size-36 {
	font-size: 36rpx;
}

.sys-size-38 {
	font-size: 38rpx;
}

.sys-size-40 {
	font-size: 40rpx;
}

.sys-size-44 {
	font-size: 44rpx;
}

.sys-size-48 {
	font-size: 48rpx;
}

.sys-size-52 {
	font-size: 52rpx;
}
.sys-size-60 {
	font-size: 60rpx;
}
.sys-size-62 {
	font-size: 62rpx;
}

.sys-size-64 {
	font-size: 64rpx;
}


/*字体粗细*/
.sys-weight-bold {
	font-weight: bold;
}

.sys-weight-600 {
	font-weight: 600;
}

.sys-weight-400 {
	font-weight: 400;
}

.sys-weight-500 {
	font-weight: 500;
}


/*字体颜色*/
.sys-color-9 {
	color: #999;
}

.sys-color-f {
	color: #fff;
}

.sys-color-9198A2 {
	color: #9198A2;
}

.sys-color-F2BA0B {
	color: #F2BA0B;
}

.sys-color-FFC186 {
	color: #FFC186;
}

.sys-color-FE6915 {
	color: #FE6915;
}

.sys-color-FE552E {
	color: #FE552E;
}

.sys-color-ED301D {
	color: #ED301D;
}

.sys-color-F8E5AF {
	color: #F8E5AF;
}

.sys-color-F87A08 {
	color: #F87A08;
}

.sys-color-F5D4B5 {
	color: #F5D4B5;
}

.sys-color-E7AF01 {
	color: #E7AF01;
}

.sys-color-FE9E11 {
	color: #FE9E11;
}

.sys-color-FF7B06 {
	color: #FF7B06;
}

.sys-color-FEF2F2 {
	color: #FEF2F2;
}

.sys-color-195E3F {
	color: #3169FA;
}

.sys-color-3489FF {
	color: #3489FF;
}
.sys-color-4D72FA {
	color: #4D72FA;
}
.sys-color-1B87EC {
	color: #1B87EC;
}

.sys-color-449470 {
	color: #3169FA !important;
}

.sys-color-0D4486 {
	color: #0D4486;
}

.sys-color-B3D0FE {
	color: #B3D0FE;
}

.sys-color-3 {
	color: #333;
}

.sys-color-8 {
	color: #888;
}

.sys-color-9 {
	color: #999;
}

.sys-color-6 {
	color: #666;
}

.sys-color-0 {
	color: #000;
}

.sys-color-AD {
	color: #ADADAD;
}

.sys-color-888B9B {
	color: #888B9B;
}

.sys-color-C1C5CC {
	color: #C1C5CC;
}

.sys-color-F2F3F6 {
	color: #F2F3F6;
}

.sys-color-B6B3B3 {
	color: #B6B3B3;
}

.sys-color-77818D {
	color: #77818D;
}

.sys-color-888B9B {
	color: #888B9B;
}

.sys-color-F2994A {
	color: #F2994A;
}

.sys-color-EB5757 {
	color: #EB5757;
}

.sys-color-EB2612 {
	color: #EB2612;
}

.sys-color-FF3333 {
	color: #FF3333;
}

.sys-color-FF7A02 {
	color: #FF7A02;
}

.sys-color-F7475C {
	color: #F7475C;
}

.sys-color-2F80ED {
	color: #2F80ED;
}

.sys-color-4FAA81 {
	color: #3169FA;
}

.sys-color-007AFF {
	color: #007AFF;
}

.sys-color-2680EB {
	color: #2680EB;
}
.sys-color-547BFA {
	color: #547BFA;
}

.sys-color-FF7D00 {
	color: #FF7D00;
}

.sys-color-27AE60 {
	color: #27AE60;
}

.sys-color-16BB5D {
	color: #16BB5D;
}

.sys-color-424F89 {
	color: #424F89;
}

.sys-color-F2BA0B {
	color: #F2BA0B;
}

/*背景颜色*/
.sys-background-f {
	background-color: #fff;
}

.sys-background-E3F0FC {
	background-color: #E3F0FC;
}

.sys-background-ECECEC {
	background-color: #ECECEC;
}

.sys-background-E3F6EB {
	background-color: #E3F6EB;
}

.sys-background-gray-f {
	background-color: #fff;
}

.sys-background-black {
	background-color: #141414;
}

.sys-background-3 {
	background-color: #333;
}

.sys-background-6 {
	background-color: #666;
}

.sys-background-9 {
	background-color: #999999;
}

.sys-background-rgba-3 {
	background-color: rgba(51, 51, 51, 0.60);
}

.sys-background-gray-f6F7FB {
	background-color: #f6f7f8;
}

.bgc-F5F5F5{
	background-color: #F5F5F5;
}
.sys-background-F6F7FB {
	background-color: #F6F7FB;
}

.sys-background-f6 {
	background-color: #F6F6F6;
}

.sys-background-F2F3F3 {
	background-color: #F2F3F3;
}

.sys-background-F2FFFA {
	background: #F2FFFA;
}

.sys-background-FFEBE9 {
	background: #FFEBE9;
}

.sys-background-F5F4F9 {
	background: #F5F4F9;
}

.bgc-1778FD {
	background-color: #1778FD;
}
.bgc-E2EEFF{
	background-color: #E2EEFF;
}
.sys-background-CDD0D5 {
	background-color: #CDD0D5;
}

.sys-background-F7F8FC {
	background-color: #F7F8FC;
}

.sys-background-E0E0E0 {
	background-color: #E0E0E0;
}

.sys-background-CCCCCC {
	background: #CCCCCC;
}

.sys-background-F5F5F5 {
	background-color: #F5F5F5;
}

.sys-background-rgba-c {
	background: rgba(204, 204, 204, 0.2);
}

.sys-background-F2F3F5 {
	background-color: #F2F3F5;
}

.sys-background-F1F1F1 {
	background-color: #F1F1F1;
}

.sys-background-FAF9FD {
	background-color: #FAF9FD;
}

.sys-background-FAE39D {
	background-color: #FAE39D;
}

.sys-background-FFF7E8 {
	background-color: #FFF7E8;
}

.sys-background-F8E5AF {
	background-color: #F8E5AF;
}

.sys-background-FCF8F2 {
	background-color: #FCF8F2;
}

.sys-background-F8F8F8 {
	background-color: #F8F8F8;
}

.sys-background-FFC186 {
	background-color: #FFC186;
}

.sys-background-F2BA0B {
	background-color: #F2BA0B;
}

.sys-background-FEF2F2 {
	background-color: #FEF2F2;
}

.sys-background-E7AF01 {
	background-color: #E7AF01;
}

.sys-background-FF7A02 {
	background: #FF7A02;
}

.sys-background-2EBD87 {
	background-color: #2EBD87;
}

.sys-background-27AE60 {
	background-color: #27AE60;
}

.sys-background-BEF7BA {
	background-color: #BEF7BA;
}

.sys-background-16BB5D {
	background-color: #16BB5D;
}

.sys-background-rgba-27AE60 {
	background: rgba(39, 174, 96, 0.2);
}

.sys-background-2680EB {
	background: #2680EB;
}

.sys-background-3489FF {
	background: #3489FF;
}

.sys-background-1B87EC {
	background: #1B87EC;
}

.sys-background-EAF2FD {
	background: #EAF2FD;
}

.sys-background-F7475C {
	background-color: #F7475C;
}

.sys-background-FFF2F5 {
	background-color: #FFF2F5;
}

.sys-background-FFD529 {
	background-color: #FFD529;
}

.sys-background-FFD5297 {
	background-color: rgba(255, 213, 41, 0.7);
}

.sys-background-gradient-F {
	background: linear-gradient(180deg, #FFFFFF 10vh, #F2F2F2 20vh);
}

.sys-background-gradient-2D84D4 {
	background: linear-gradient(308deg, #2D84D4 0%, #49A1F1 100%);
}

.sys-background-gradient-059466 {
	background: linear-gradient(308deg, #059466 0%, #03B67B 100%);
}

.sys-background-gradient-D79B01 {
	background: linear-gradient(308deg, #D79B01 0%, #EEB609 100%);
}

.sys-background-gradient-60C5FF {
	background: linear-gradient(269deg, #2D9CDB 0%, #60C5FF 100%);
}

.sys-background-gradient-00908C {
	background: linear-gradient(308deg, #00908C 0%, #06AAA5 100%);
}

.sys-background-gradient-FF3F10 {
	background: linear-gradient(227deg, #FF3F10 0%, #FF7915 100%);
}

.sys-background-E7F6FF {
	background-color: #E7F6FF;
}


/* 边框颜色 */
.border-449470 {
	border: 1rpx solid #3169FA;
}
.border-9 {
	border: 1rpx solid #999999;
}
.border-3489FF {
	border: 1rpx solid #3489FF;
}

.border-2680EB {
	border: 1rpx solid #2680EB;
}

.border-F2BA0B {
	border: 1rpx solid #F2BA0B;
}

.border-FF7B06 {
	border: 1rpx solid #FF7B06;
}

.border-E4E4EB {
	border: 1rpx solid #E4E4EB;
}

.border-C {
	border: 2rpx solid #CCCCCC;
}

.border-e {
	border: 2rpx solid #eee;
}

.border-3 {
	border: 2rpx solid #333;
}

.border-EDEEF0 {
	border: 2rpx solid #EDEEF0;
}

.border-bottom-3489FF {
	border-bottom: 1rpx solid #3489FF;
}

.border-bottom-449470 {
	border-bottom: 1rpx solid #3169FA;
}

.borde-bottomr-2680EB {
	border-bottom: 1rpx solid #2680EB;
}

.border-bottom-e {
	border-bottom: 1rpx solid #EEEEEE;
}

.border-bottom-E6E7E9 {
	border-bottom: 1rpx solid #E6E7E9;
}

.border-FF7A02 {
	border: 1rpx solid #FF7A02;
}

.border-f {
	border: 1rpx solid #fff;
}



/* 圆角 */
.sys-radius-200 {
	border-radius: 200rpx;
}

.sys-radius-60 {
	border-radius: 60rpx;
}

.sys-radius-24 {
	border-radius: 24rpx;
}

.sys-radius-20 {
	border-radius: 20rpx;
}

.sys-radius-12 {
	border-radius: 12rpx;
}

.sys-radius-top-right-20 {
	border-radius: 20rpx 20rpx 0 0;
}

.sys-radius-b-l-20 {
	border-radius: 0 0 20rpx 20rpx;
}

.sys-radius-top-right-30 {
	border-radius: 30rpx 30rpx 0 0;
}

.sys-radius-top-right-40 {
	border-radius: 40rpx 40rpx 0 0;
}

.sys-radius-16 {
	border-radius: 16rpx;
}

.sys-radius-12 {
	border-radius: 12rpx;
}

.sys-radius-10 {
	border-radius: 10rpx;
}

.sys-radius-8 {
	border-radius: 8rpx;
}

.sys-radius-5 {
	border-radius: 5rpx;
}

.sys-radius-4 {
	border-radius: 4rpx;
}

.sys-radius-2 {
	border-radius: 2rpx;
}

.sys-radius-50 {
	border-radius: 50%;
}

.line-height-28 {
	line-height: 28rpx;
}

.line-height-40 {
	line-height: 40rpx;
}

/*行高*/
.line-height-64 {
	height: 64rpx;
	line-height: 64rpx;
}

/*空白页icons*/
.blank-class {
	width: 200rpx;
	height: 200rpx;
	/* padding: 132rpx 0 0 0; */
}


/* 外边距 */
.mt-4 {
	margin-top: 4rpx;
}

.mt-8 {
	margin-top: 8rpx;
}

.mt-12 {
	margin-top: 12rpx;
}

.mt-16 {
	margin-top: 16rpx;
}

.mt-20 {
	margin-top: 20rpx;
}

.mt-28 {
	margin-top: 28rpx;
}

.mt-40 {
	margin-top: 40rpx;
}

.mb-13 {
	margin-bottom: 13rpx;
}

.mb-18 {
	margin-bottom: 18rpx;
}

.mb-24 {
	margin-bottom: 24rpx;
}

.mb-26 {
	margin-bottom: 26rpx;
}

.mb-28 {
	margin-bottom: 28rpx;
}

.mb-32 {
	margin-bottom: 32rpx;
}

.mb-38 {
	margin-bottom: 38rpx;
}

.mb-40 {
	margin-bottom: 40rpx;
}

.mb-64 {
	margin-bottom: 64rpx;
}

.ml-10 {
	margin-left: 10rpx;
}

.ml-16 {
	margin-left: 16rpx;
}

.ml-20 {
	margin-left: 20rpx;
}

.ml-22 {
	margin-left: 22rpx;
}

.ml-120 {
	margin-left: 120rpx;
}

.ml-24 {
	margin-left: 24rpx;
}

.mr-4 {
	margin-right: 4rpx;
}

.mr-6 {
	margin-right: 6rpx;
}

.mr-8 {
	margin-right: 8rpx;
}

.mr-10 {
	margin-right: 10rpx;
}

.mr-12 {
	margin-right: 12rpx;
}

.mr-14 {
	margin-right: 14rpx;
}

.mr-16 {
	margin-right: 16rpx;
}

.mr-18 {
	margin-right: 18rpx;
}

.mr-20 {
	margin-right: 20rpx;
}

.mr-24 {
	margin-right: 24rpx;
}

.mr-32 {
	margin-right: 32rpx;
}
.mr-30 {
	margin-right: 30rpx;
}
.mr-64 {
	margin-right: 64rpx;
}
.mr-68 {
	margin-right: 68rpx;
}

.mr-40 {
	margin-right: 40rpx;
}

.mr-50 {
	margin-right: 50rpx;
}

.mr-74 {
	margin-right: 74rpx;
}

.mr-82 {
	margin-right: 82rpx;
}

.mr-90 {
	margin-right: 90rpx;
}


.mb-200 {
	margin-bottom: 200rpx;
}

.mb-108 {
	margin-bottom: 108rpx;
}

.mb-80 {
	margin-bottom: 80rpx;
}

.mb-56 {
	margin-bottom: 56rpx;
}

.mb-34 {
	margin-bottom: 34rpx;
}

.mb-32 {
	margin-bottom: 32rpx;
}

.mb-30 {
	margin-bottom: 30rpx;
}

.mb-24 {
	margin-bottom: 24rpx;
}

.mb-22 {
	margin-bottom: 22rpx;
}

.mb-20 {
	margin-bottom: 20rpx;
}

.mb-18 {
	margin-bottom: 18rpx;
}

.mb-16 {
	margin-bottom: 16rpx;
}

.mb-12 {
	margin-bottom: 12rpx;
}

.mb-10 {
	margin-bottom: 10rpx;
}

.mb-8 {
	margin-bottom: 8rpx;
}

.mb-6 {
	margin-bottom: 6rpx;
}

.mb-4 {
	margin-bottom: 4rpx;
}


.pt-10 {
	padding-top: 10rpx;
}

.pt-30 {
	padding-top: 30rpx;
}


.pb-30 {
	padding-bottom: 30rpx;
}

.pb-32 {
	padding-bottom: 32rpx;
}
.pb-24 {
	padding-bottom: 24rpx;
}
.p-32 {
	padding: 32rpx;
}

.pr-24 {
	padding-right: 24rpx;
}


.pl-32 {
	padding-left: 32rpx;
}

.pl-24 {
	padding-left: 24rpx;
}

.pl-20 {
	padding-left: 20rpx;
}

.pd-40-0-60-0 {
	padding: 40rpx 0 60rpx 0;
}

.pd-0-32-0-32 {
	padding: 0 32rpx;
}

.pd-48-0-50-0 {
	padding: 48rpx 0 50rpx 0;
}


.pd-32 {
	padding: 32rpx;
}

.p-20 {
	padding: 20rpx
}

.p-24 {
	padding: 24rpx;
}

.p-24-0 {
	padding: 24rpx 0;
}

.opacity7 {
	opacity: 0.7
}

.w-32 {
	width: 32%;
}

.plr-30 {
	padding: 0 30rpx;
}

.plr-24 {
	padding: 0 24rpx;
}