/* #ifndef APP-PLUS-NVUE */
page { min-height: 100%; height: auto; line-height: 1.8; background-color: #F9F9F9; font-size: 28rpx;}
/* #endif */

body {
	--c-main: #FD6801;
	--c-main-S: rgba(253, 108, 1, .8);
	--c-blue: #1561AD;
	--c-blue-s: #1B9FE0;
	--c-teal: #1B9FE0;
	--c-teal-s: #145AB5;
	--c-red: #DB5A4C;
	--c-red-s: #F47A83;
	--c-yel: #FE8F65;
	--c-yel-s: #FFCC7F;
	
	--c-black: #333333;
	--c-black-s: #7a7a7a;
	--c-black-ss: #AFAFAF;
	
	--c-gray: #CFCFCF;
	--c-gray-s: #DFDFDF;
	--c-gray-ss: #EFEFEF;
	--c-gray-sss: #F0F0F0;
	
	--c-bg: #FAFAFA;
	--c-bg-s: #F5F5F5;
	--c-bg-ss: #F8F8F8;
}

/* 颜色类名预定义 */
.c-main { color: var(--c-main); }
.c-black{ color: var(--c-black); }
.bg-main { background-color: var(--c-main); }
.bg-main-s { background-color: var(--c-main-s); }
.bg-gray-s { background-color: var(--c-bg-s);}
.bg-gray-ss { background-color: var(--c-bg-ss);}
.c-border-main { border-color: var(--c-main)!important;}

/* 布局 - 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }

/* 宽高 */
.w100 { width: 100%; }
.w50 { width: 50%; }
.w-750 { width: 750rpx; }
.w-375 { width: 375rpx; }

.h100 { height: 100%; }
.h50 { height: 50%; }
.h-1250 { height: 1250rpx; }
.h-625 { height: 625rpx; }

.w-100 { width: 100rpx; }
.h-100 { height: 100rpx; }
.h-60 { height: 60rpx; }
.h-66 { height: 66rpx; }
.h-72 { height: 72rpx; }
.h-80 { height: 80rpx; }
.h-88 { height: 88rpx; }


/* 文字 */
.font-18 { font-size: 18rpx; }
.font-20 { font-size: 20rpx; }
.font-22 { font-size: 22rpx; }
.font-24 { font-size: 24rpx; }
.font-26 { font-size: 26rpx; }
.font-28 { font-size: 28rpx; }
.font-30 { font-size: 30rpx; }
.font-32 { font-size: 32rpx; }
.font-34 { font-size: 34rpx; }
.font-36 { font-size: 36rpx; }
.font-40 { font-size: 40rpx; }
.font-48 { font-size: 48rpx; }
.font-60 { font-size: 60rpx; }
.font-w-b { font-weight: bold; }
.font-w-100 { font-weight: 100!important; }
.font-w-500 { font-weight: 500!important; }

/* 溢出省略号 */
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text-ellipsis-line2 { 
	overflow: hidden; 
	text-overflow: ellipsis; 
	line-clamp: 2; /* 几行 */
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical; /* 水平排列*/
} 
.text-ellipsis-line3 { 
	overflow: hidden; 
	text-overflow: ellipsis; 
	line-clamp: 3; /*几行*/
	-webkit-line-clamp: 3; 
	-webkit-box-orient: vertical; /* 水平排列*/
} 
.text-ellipsis-line5 { 
	overflow: hidden; 
	text-overflow: ellipsis; 
	line-clamp: 5; /*几行*/
	-webkit-line-clamp: 5; 
	-webkit-box-orient: vertical; /* 水平排列*/
} 


/* 行高 */
.line-h0 { line-height: 0!important; }
.line-h1 { line-height: 1!important; }
.line-h-sm { line-height: 1.2!important; }
.line-h-md { line-height: 1.5!important; }
.line-h-lg { line-height: 2!important; }
.line-h-big { line-height: 3!important; }

/* 文字修饰：上划线、中划线、下划线 */
.text-line-none { text-decoration: none; }
.text-line-overline { text-decoration: overline; }
.text-line-underline {text-decoration: underline; }
.text-line-through { text-decoration: line-through; }

/* 文字对齐 */
.text-c { text-align: center; }
.text-l { text-align: left; }
.text-r { text-align: right; }


/* 栅格 */
.row { box-sizing: border-box!important; display: -webkit-box!important; display: flex!important; -webkit-box-orient: horizontal!important; -webkit-box-direction: normal!important; flex-direction: row!important; flex-wrap: wrap;}
[class^='col12-'], [class^='span-'], [class^='span24-'] { min-height: 1rpx; box-sizing: border-box!important;}

/* 栅格 12等分 */
.col12-1{ width: 62.5rpx; } 
.col12-2{ width: 125rpx; } 
.col12-3{ width: 187.5rpx; } 
.col12-4{ width: 250rpx;} 
.col12-5{ width: 312.5rpx; } 
.col12-6{ width: 375rpx; }
.col12-7{ width: 437.5rpx; }
.col12-8{ width: 500rpx; }
.col12-9{ width: 562.5rpx; }
.col12-10{ width: 625rpx; }
.col12-11{ width: 687.5rpx; }
.col12-12{ width: 750rpx; }

/* 栅格1 - 20等分 */
.span-1 { width: 5%; }
.span-2 { width: 10%; }
.span-3 { width: 15%; }
.span-4 { width: 20%; }
.span-5 { width: 25%; }
.span-6 { width: 30%; }
.span-7 { width: 35%; }
.span-8 { width: 40%; }
.span-9 { width: 45%; }
.span-10 { width: 50%; }
.span-11 { width: 55%; }
.span-12 { width: 60%; }
.span-13 { width: 65%; }
.span-14 { width: 70%; }
.span-15 { width: 75%; }
.span-16 { width: 80%; }
.span-17 { width: 85%; }
.span-18 { width: 90%; }
.span-19 { width: 95%; }
.span-20 { width: 100%; }

/* 栅格2 - 24等分 */
.span24-1{ width: 4.17%; } 
.span24-2{ width: 8.33%; } 
.span24-3{ width: 12.5%; } 
.span24-4{ width: 16.67%;} 
.span24-5{ width: 20.83%; } 
.span24-6{ width: 25%; }
.span24-7{ width: 29.17%; }
.span24-8{ width: 33.33%; }
.span24-9{ width: 37.5%; }
.span24-10{ width: 41.67%; }
.span24-11{ width: 45.83%; }
.span24-12{ width: 50%; }
.span24-13{ width: 54.17%; }
.span24-14{ width: 58.33%; }
.span24-15{ width: 62.5%; }
.span24-16{ width: 66.67%; }
.span24-17{ width: 70.83%; }
.span24-18{ width: 75%; }
.span24-19{ width: 79.17%; }
.span24-20{ width: 83.33%; }
.span24-21{ width: 87.5%; }
.span24-22{ width: 91.67%; }
.span24-23{ width: 95.83%; }
.span24-24{ width: 100%; }

/* flex 布局 */
.d-flex { display: -webkit-box; display: flex; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

.flex-1 { -webkit-box-flex: 1; flex: 1;}
.flex-2 { -webkit-box-flex: 2; flex: 2;}
.flex-row { -webkit-box-orient: horizontal!important; -webkit-box-direction: normal!important; flex-direction: row!important; }
.flex-column { -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; flex-direction: column!important; }
.flex-row-r { -webkit-box-orient: horizontal!important; -webkit-box-direction: reverse!important; flex-direction: row-reverse!important; }
.flex-column-r { -webkit-box-orient: vertical!important; -webkit-box-direction: reverse!important; flex-direction: column-reverse!important; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-shrink { flex-shrink: 0; }

.a-baseline { -webkit-box-align: baseline; align-items: baseline; }
.a-center { -webkit-box-align: center; align-items: center; }
.a-start { -webkit-box-align: start; align-items: flex-start; }
.a-end { -webkit-box-align: end; align-items: flex-end; }
.a-stretch { -webkit-box-align: stretch; align-items: stretch; }

.j-center { -webkit-box-pack: center; justify-content: center; } 
.j-start { -webkit-box-pack: start; justify-content: flex-start; }
.j-end { -webkit-box-pack: end; justify-content: flex-end; }
.j-between { -webkit-box-pack: justify; justify-content: space-between; }
.j-around { justify-content: space-around; }
.j-evenly { -webkit-box-pack: space-evenly; justify-content: space-evenly; }

.a-self-auto { align-self: auto; }
.a-self-start { align-self: flex-start; }
.a-self-end { align-self: flex-end; }
.a-self-stretch { align-self: stretch; }
.a-self-baseline { align-self: baseline; }


/* 描边 border */
.bd { border-width: 1rpx; border-style: solid; border-color: var(--c-gray-s); }
.bd-top { border-top: 1rpx solid var(--c-gray-s); }
.bd-bottom { border-bottom: 1rpx solid var(--c-gray-s); }
.bd-left { border-left: 1rpx solid var(--c-gray-s); }
.bd-right { border-right: 1rpx solid var(--c-gray-s); }

.bd-0 { border-width: 0; }
.bd-top-0 { border-top-width: 0; }
.bd-bottom-0 { border-bottom-width: 0; }
.bd-left-0 { border-left-width: 0; }
.bd-right-0 { border-right-width: 0; }
.bd-1 { border-width: 1rpx; }
.bd-top-1 { border-top-width: 1rpx; }
.bd-bottom-1 { border-bottom-width: 1rpx; }
.bd-left-1 { border-left-width: 1rpx; }
.bd-right-1 { border-right-width: 1rpx; }


/* 文字颜色 */
.text-black { color: var(--c-black);}
.text-black-s { color: var(--c-black-s);}
.text-black-ss { color: var(--c-black-ss);}


/* spacing - margin */
.m-a { margin: auto; }
.m-0 {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}
.m-5 {margin-top: 5rpx; margin-right: 5rpx; margin-bottom: 5rpx; margin-left: 5rpx;}
.m-10 {margin-top: 10rpx; margin-right: 10rpx; margin-bottom: 10rpx; margin-left: 10rpx;}
.m-15 {margin-top: 15rpx; margin-right: 15rpx; margin-bottom: 15rpx; margin-left: 15rpx;}
.m-20 {margin-top: 20rpx; margin-right: 20rpx; margin-bottom: 20rpx; margin-left: 20rpx;}
.m-25 {margin-top: 25rpx; margin-right: 25rpx; margin-bottom: 25rpx; margin-left: 25rpx;}
.m-30 {margin-top: 30rpx; margin-right: 30rpx; margin-bottom: 30rpx; margin-left: 30rpx;}
.m-35 {margin-top: 35rpx; margin-right: 35rpx; margin-bottom: 35rpx; margin-left: 35rpx;}
.m-40 {margin-top: 40rpx; margin-right: 40rpx; margin-bottom: 40rpx; margin-left: 40rpx;}
.m-45 {margin-top: 45rpx; margin-right: 45rpx; margin-bottom: 45rpx; margin-left: 45rpx;}
.m-50 {margin-top: 50rpx; margin-right: 50rpx; margin-bottom: 50rpx; margin-left: 50rpx;}

/* X轴 */
.mx-a { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-5 { margin-left: 5rpx; margin-right: 5rpx; }
.mx-10 { margin-left: 10rpx; margin-right: 10rpx; }
.mx-15 { margin-left: 15rpx; margin-right: 15rpx; }
.mx-20 { margin-left: 20rpx; margin-right: 20rpx; }
.mx-30 { margin-left: 30rpx; margin-right: 30rpx; }
.mx-50 { margin-left: 50rpx; margin-right: 50rpx; }

/* Y轴 */
.my-a { margin-top: auto; margin-bottom: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-5 { margin-top: 5rpx; margin-bottom: 5rpx; }
.my-10 { margin-top: 10rpx; margin-bottom: 10rpx; }
.my-15 { margin-top: 15rpx; margin-bottom: 15rpx; }
.my-20 { margin-top: 20rpx; margin-bottom: 20rpx; }
.my-30 { margin-top: 30rpx; margin-bottom: 30rpx; }
.my-50 { margin-top: 50rpx; margin-bottom: 50rpx; }

/* top上 */
.mt-a { margin-top: auto; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5rpx; }
.mt-10 { margin-top: 10rpx; }
.mt-15 { margin-top: 15rpx; }
.mt-20 { margin-top: 20rpx; }
.mt-30 { margin-top: 30rpx; }
.mt-50 { margin-top: 50rpx; }

/* bottom下 */
.mt-b { margin-bottom: auto; }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5rpx; }
.mb-10 { margin-bottom: 10rpx; }
.mb-15 { margin-bottom: 15rpx; }
.mb-20 { margin-bottom: 20rpx; }
.mb-30 { margin-bottom: 30rpx; }
.mb-50 { margin-bottom: 50rpx; }

/* left 左 */
.ml-a { margin-left: auto; }
.ml-0 { margin-left: 0; }
.ml-5 { margin-left: 5rpx; }
.ml-10 { margin-left: 10rpx; }
.ml-15 { margin-left: 15rpx; }
.ml-20 { margin-left: 20rpx; }
.ml-30 { margin-left: 30rpx; }
.ml-50 { margin-left: 50rpx; }

/* rignt 右 */
.mr-a { margin-right: auto; }
.mr-0 { margin-right: 0; }
.mr-5 { margin-right: 5rpx; }
.mr-10 { margin-right: 10rpx; }
.mr-15 { margin-right: 15rpx; }
.mr-20 { margin-right: 20rpx; }
.mr-30 { margin-right: 30rpx; }
.mr-50 { margin-right: 50rpx; }


/* spacing - padding */
.p-a { padding: auto; }
.p-0 {padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;}
.p-5 {padding-top: 5rpx; padding-right: 5rpx; padding-bottom: 5rpx; padding-left: 5rpx;}
.p-10 {padding-top: 10rpx; padding-right: 10rpx; padding-bottom: 10rpx; padding-left: 10rpx;}
.p-15 {padding-top: 15rpx; padding-right: 15rpx; padding-bottom: 15rpx; padding-left: 15rpx;}
.p-20 {padding-top: 20rpx; padding-right: 20rpx; padding-bottom: 20rpx; padding-left: 20rpx;}
.p-25 {padding-top: 25rpx; padding-right: 25rpx; padding-bottom: 25rpx; padding-left: 25rpx;}
.p-30 {padding-top: 30rpx; padding-right: 30rpx; padding-bottom: 30rpx; padding-left: 30rpx;}
.p-35 {padding-top: 35rpx; padding-right: 35rpx; padding-bottom: 35rpx; padding-left: 35rpx;}
.p-40 {padding-top: 40rpx; padding-right: 40rpx; padding-bottom: 40rpx; padding-left: 40rpx;}
.p-45 {padding-top: 45rpx; padding-right: 45rpx; padding-bottom: 45rpx; padding-left: 45rpx;}
.p-50 {padding-top: 50rpx; padding-right: 50rpx; padding-bottom: 50rpx; padding-left: 50rpx;}

/* X轴 */
.px-a { padding-left: auto; padding-right: auto; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-5 { padding-left: 5rpx; padding-right: 5rpx; }
.px-10 { padding-left: 10rpx; padding-right: 10rpx; }
.px-15 { padding-left: 15rpx; padding-right: 15rpx; }
.px-20 { padding-left: 20rpx; padding-right: 20rpx; }
.px-30 { padding-left: 30rpx; padding-right: 30rpx; }
.px-50 { padding-left: 50rpx; padding-right: 50rpx; }

/* Y轴 */
.py-a { padding-top: auto; padding-bottom: auto; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-5 { padding-top: 5rpx; padding-bottom: 5rpx; }
.py-10 { padding-top: 10rpx; padding-bottom: 10rpx; }
.py-15 { padding-top: 15rpx; padding-bottom: 15rpx; }
.py-20 { padding-top: 20rpx; padding-bottom: 20rpx; }
.py-30 { padding-top: 30rpx; padding-bottom: 30rpx; }
.py-50 { padding-top: 50rpx; padding-bottom: 50rpx; }

/* padding-top 上 */
.pt-a { padding-top: auto; }
.pt-0 { padding-top: 0; }
.pt-5 { padding-top: 5rpx; }
.pt-10 { padding-top: 10rpx; }
.pt-15 { padding-top: 15rpx; }
.pt-20 { padding-top: 20rpx; }
.pt-30 { padding-top: 30rpx; }
.pt-50 { padding-top: 50rpx; }

/* padding-bottom下 */
.pt-b { padding-bottom: auto; }
.pb-0 { padding-bottom: 0; }
.pb-5 { padding-bottom: 5rpx; }
.pb-10 { padding-bottom: 10rpx; }
.pb-15 { padding-bottom: 15rpx; }
.pb-20 { padding-bottom: 20rpx; }
.pb-30 { padding-bottom: 30rpx; }
.pb-50 { padding-bottom: 50rpx; }

/* padding-left 左 */
.pl-a { padding-left: auto; }
.pl-0 { padding-left: 0; }
.pl-5 { padding-left: 5rpx; }
.pl-10 { padding-left: 10rpx; }
.pl-15 { padding-left: 15rpx; }
.pl-20 { padding-left: 20rpx; }
.pl-30 { padding-left: 30rpx; }
.pl-50 { padding-left: 50rpx; }

/* padding-rignt 右 */
.pr-a { padding-right: auto; }
.pr-0 { padding-right: 0; }
.pr-5 { padding-right: 5rpx; }
.pr-10 { padding-right: 10rpx; }
.pr-15 { padding-right: 15rpx; }
.pr-20 { padding-right: 20rpx; }
.pr-30 { padding-right: 30rpx; }
.pr-50 { padding-right: 50rpx; }


/* 背景色 */
.bg-main { background-color: var(--c-blue); }

.shadow-1 { box-shadow: 0px 4px 12px 0px rgba(21, 97, 173, 0.16);}
.shadow-2 { box-shadow: 0px 4px 12px 0px rgba(20, 90, 181, 0.3);}

/* 渐变色 */
.bg-gradient-blue { background-image: -webkit-gradient(linear, left top, right top, from(#1561AD), to(#1B9FE0)); background-image: linear-gradient(90deg, #1561AD, #1B9FE0); }
.bg-gradient-teal { background-image: -webkit-gradient(linear, left top, right top, from(#1F89A3), to(#26BFBA)); background-image: linear-gradient(90deg, #1F89A3, #26BFBA); }
.bg-gradient-yel { background: -webkit-gradient(linear, left top, right top, from(#FE8F65), to(#FFCC7F)); background: linear-gradient(90deg, #FE8F65, #FFCC7F); }
.bg-gradient-red { background: -webkit-gradient(linear, left top, right top, from(#F47A83), to(#DB5A4C)); background: linear-gradient(90deg, #F47A83, #DB5A4C); }

.bd-gradient { -webkit-border-image: -webkit-gradient(linear, right top, left top, from(rgba(56, 172, 255, 0.8)), to(rgba(133, 224, 255, 0.8))) 4 4; -webkit-border-image: linear-gradient(-90deg, rgba(56, 172, 255, 0.8), rgba(133, 224, 255, 0.8)) 4 4; -o-border-image: linear-gradient(-90deg, rgba(56, 172, 255, 0.8), rgba(133, 224, 255, 0.8)) 4 4; border-image: -webkit-gradient(linear, right top, left top, from(rgba(56, 172, 255, 0.8)), to(rgba(133, 224, 255, 0.8))) 4 4; border-image: linear-gradient(-90deg, rgba(56, 172, 255, 0.8), rgba(133, 224, 255, 0.8)) 4 4;}

/* 
 * >>>常用组合
 */

/* 背景图 */
.bg-img-nol { background-repeat: no-repeat; background-size: 100%; background-position: center; }

/* flex-x */
.flex-x-start {display: -webkit-box;display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: start; justify-content: flex-start;}
.flex-x-end {display: -webkit-box;display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: end; justify-content: flex-end;}
.flex-x-sb {display: -webkit-box;display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between;}