@charset "UTF-8";

/* --------------- 基础 --------------- */
* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	width: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	font: 14px/1.5 "microsoft yahei", Helvetica, Tahoma, Arial, "Microsoft jhengHei", sans-serif;
	color: #404040;
	font-weight: 400;
	background-color: #fff;
}

ul,
li,
ol,
dl,
dt,
dd {
	list-style: none;
}

a {
	text-decoration: none;
}

a:focus {
	outline: none;
}

img {
	border: none;
	vertical-align: middle;
	max-width: 100%;
}

table {
	border-collapse: collapse;
}

tr,
td,
th {
	padding: 0;
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	margin: 0;
	padding: 0;
}


/*  --------------- 基本元素  ---------------*/
.clear,
.c {
	clear: both;
	width: 100%;
	height: 1px;
	overflow: hidden;
}

.c:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clear,
.clearfix {
	zoom: 1
}

.clear:after,
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

.hidden {
	display: none;
}

hr {
	border: 0;
	height: 1px;
	border-top: 1px solid #e1e3e5;
}

.line {
	border-top: 1px solid #e1e3e5;
	margin: 10px 0;
	width: 100%;
}

div {
	-moz-box-sizing: border-box;
	/*Firefox3.5+*/
	-webkit-box-sizing: border-box;
	/*Safari3.2+*/
	-o-box-sizing: border-box;
	/*Opera9.6*/
	-ms-box-sizing: border-box;
	/*IE8*/
	box-sizing: border-box;
}

/*  --------------- 布局  ---------------*/
.wrap {
	margin: 0 auto;
	position: relative;
}

.wrap::affter {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.row {
	width: 100%;
	box-sizing: border-box;
	clear: both;
	position: relative;
}



/* .row:after,.row:before {content: "";display: block;clear: both} */

.col-md12 {
	width: 100%;
	clear: both;
	padding: 0 10px;
}

.col-md9 {
	width: 75%;
	float: left;
	padding: 0 10px;
}

.col-md8 {
	width: 66.6%;
	float: left;
	padding: 0 10px;
}

.col-md6 {
	width: 50%;
	float: left;
	padding: 0 10px;
}

.col-md4 {
	width: 33.33%;
	float: left;
	padding: 0 10px;
}

.col-md3 {
	width: 25%;
	float: left;
	padding: 0 10px;
}

.col-md2 {
	width: 16.66%;
	float: left;
	padding: 0 10px;
}

.col1,.col-1 {
	width: 8.33%;
	display: inline-block;
}

.col2,.col-2 {
	width: 16.66%;
	display: inline-block;
}

.col3,
.col-3 {
	width: 25%;
	display: inline-block;
}

.col4,.col-4 {
	width: 33.33%;
	display: inline-block;
}

.col5,.col-5 {
	width: 41.66%;
	display: inline-block;
}

.col6 ,.col-6 {
	width: 50%;
	display: inline-block;
}

.col7 ,.col-7 {
	width: 58.33%;
	display: inline-block;
}

.col8 ,.col-8 {
	width: 66.66%;
	display: inline-block;
}

.col9 ,.col-9 {
	width: 75%;
	display: inline-block;
}

.col10 ,.col-10 {
	width: 83.33%;
	display: inline-block;
}

.col11,.col-11 {
	width: 91.66%;
	display: inline-block;
}

.col12,.col-12 {
	width: 100%;
	display: inline-block;
}


/*  --------------- 标题字号  ---------------*/

h1 {
	font-size: 32px;
	text-align: center;
	line-height: 2em;
}

h2 {
	font-size: 24px;
	line-height: 1.5em;
}

h3 {
	font-size: 22px;
	line-height: 1.5em;
}

h4 {
	font-size: 20px;
	line-height: 1.5em;
}

h5 {
	font-size: 18px;
	line-height: 1.5em;
}

/*  --------------- 排版   ---------------*/
.tc,
.text-center {
	text-align: center;
}

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

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

.fl,
.float-left {
	float: left;
}

.fr,
.float-right {
	float: right;
}

.fc {
	position: relative;
	text-align: center;
	display: inline-block;
}


.d-line {
	display: inline-block;
}

/*  --------------- 色彩   ---------------*/

:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
}

/* 文字色彩 */
.color-blue {
	color: #007bff;
}

.color-white {
	color: #fff;
}

.color-red {
	color: #dc3545;
}

.color-gray {
	color: #b2b2b2;
}


/*  ---------------   其他   ---------------*/

.arrow-down {
	display: inline-block;
	width: 0;
	height: 0;
	font-size: 0;
	border-width: 4px;
	border-color: #777 transparent transparent;
	border-style: solid;
}





/*  ---------------表单元素  ---------------*/


button,
input,
select,
textarea {
	outline: 0;
	font-family: inherit
}

:focus {
	outline: 0
}

textarea {
	overflow: auto;
	vertical-align: top;
	resize: none;
	background: #fff
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: none;
}

.input {
	height: 40px;
	line-height: 40px;
	text-indent: 8px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

select {
	font-family: "microsoft yahei";
	color: #666
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
	border: 0 none
}

/*input */

input,
select,
textarea {
	border: 1px solid #dcdcdc;
	vertical-align: middle;
}

input:-internal-autofill-selected {
	appearance: menulist-button;
	/* background-color: -internal-light-dark(rgb(255, 255, 255) !important; */
	background-image: none !important;
	color: -internal-light-dark(black, white) !important;
}

input {
	text-indent: 5px;
	height: 28px;
	background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
	-webkit-rtl-ordering: logical;
	cursor: text;
	outline: none;
}


input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

input[type='text'] {
	color: #666;
	height: 28px;
	line-height: 28px;
}

input[type='password'] {
	color: #666;
	height: 24px;
	line-height: 24px;
}

input[type='radio'] {
	border: 0;
	margin: 0 5px 0 0;
	vertical-align: middle
}

input[type='checkbox'] {
	border: 0;
	margin: 0 5px 0 0;
	width: 16px;
	height: 16px;
}

input[type='submit'] {
	color: #fff;
	background: #018CDA;
	border: 0;
	height: 24px;
	padding: 0 15px;
	font-weight: bold;
	font-size: 12px;
}

input[type='file'] {
	border: 0;
	padding: 5px 5px 5px 0;
}



/*i,b,strong{font-style:normal;font-weight:normal;}*/
input,
textarea,
select {
	border: 1px solid #CCC;
	outline: none;
	background: none;
	padding: 0;
}

input::-ms-clear {
	display: none;
}

input::-ms-reveal {
	display: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	opacity: 1;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	opacity: 1;
}


select {
	height: 40px;
	line-height: 40px;
	padding-right:30px;
}


/*  --------------- 按钮  ---------------*/


/*  */
.btn,
.btn-group,
.edge {
	display: inline-block
}

.btn+.btn {
	margin-left: 10px
}

.btn-lg {
	height: 44px;
	line-height: 44px;
	padding: 0 25px;
	font-size: 16px
}
.btn {
	height: 32px;
	line-height: 32px;
	border: 1px solid transparent;
	padding: 0 15px;
	background-color: #f1f1f1;
	color: #666;
	white-space: nowrap;
	text-align: center;
	font-size: 14px;
	border-radius: 3px;
	cursor: pointer
}
.btn-sm {	
	line-height: 28px;
	padding: 4px 5px;
	font-size: 13px;
	border-radius:2px;
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	color: #666;
	margin:0 2px;
}
.btn-xs { 
	line-height: 24px;
	padding: 0 5px;
	border-radius:2px;
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	font-size: 12px;
	margin:0 2px;
}

.on {
	background-color: #5388ff !important;
	color: #fff;
}
.on:hover {
	color: #fff  !important;
}
.btn-xs i {
	font-size: 12px !important
}
.btn-lg:hover {
	opacity: .8;
	filter: alpha(opacity=80);
	color:inherit;
}
.btn:hover {
	opacity: .8;
	filter: alpha(opacity=80);
	color:inherit;
	background-color: #ddd;
	/* background-color: inherit; */
}
.btn-sm:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.btn-xs:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.btn:active {
	opacity: 1;
	filter: alpha(opacity=100)
}
 
.btn-radius {
	border-radius: 100px;
}

.btn .icon {
	padding: 0 2px;
	vertical-align: middle\9;
	vertical-align: bottom
}

.btn-fluid {
	width: 100%
}

.btn-default {
	background-color: #009688 !important;
	color: #fff !important;
	border:1px solid #009688;
}
.btn-primary {
	border-color: #1E9FFF;
	background: #1E9FFF;
	color: #fff !important;
}
.btn-primary:hover {
	background-color: #1E9FFF !important;
	color:#fff;
	opacity: 0.8;
}

/*  */
.btn-normal {
	background-color: #1E9FFF; 
	color: #fff;
}

.btn-warm {
	background-color: #FFB800;
	color: #fff;
}

.btn-danger {
	background-color: #FF5722;
	color: #fff;
}

.btn-checked {
	background-color: #5FB878;
	color: #fff;
}

.btn-disabled,
.btn-disabled:active,
.btn-disabled:hover {
	border-color: #eee !important;
	background-color: #FBFBFB !important;
	color: #d2d2d2 !important;
	cursor: not-allowed !important;
	opacity: 1
}


.btn-group {
	vertical-align: middle;
	font-size: 0
}

.btn-group .btn {
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-left: 1px solid rgba(255, 255, 255, .5);
	border-radius: 0
}

.btn-group .btn-primary {
	border-left: none
}

.btn-group .btn-primary:hover {
	border-color: #d2d2d2;
	color: #009688
}

.btn-group .btn:first-child {
	border-left: none;
	border-radius: 2px 0 0 2px
}

.btn-group .btn-primary:first-child {
	border-left: 1px solid #d2d2d2
}

.btn-group .btn:last-child {
	border-radius: 0 2px 2px 0
}

.btn-group .btn+.btn {
	margin-left: 0
}

.btn-group+.btn-group {
	margin-left: 10px
}

.border-red {
	border-color: #FF5722 !important;
	color: #FF5722 !important
}

.border-orange {
	border-color: #FFB800 !important;
	color: #FFB800 !important
}

.border-green {
	border-color: #009688 !important;
	color: #009688 !important
}

.border-cyan {
	border-color: #2F4056 !important;
	color: #2F4056 !important
}

.border-blue {
	border-color: #1E9FFF !important;
	color: #1E9FFF !important
}

.border-black {
	border-color: #393D49 !important;
	color: #393D49 !important
}

/*  --------------- 提示框  ---------------*/
.msg .alert,
.msg .attention,
.msg .error,
.msg .help,
.msg .notice,
.msg .ok,
.msg .question,
.msg .small-help,
.msg .stop,
.msg .tips {
	background: url(/images/common/ico-msg.png) no-repeat;
	border: 1px solid #DDD;
	color: #404040;
	float: left;
	line-height: 18px;
	padding: 2px 10px 2px 23px
}

.msg .error {
	background-color: #FFF2F2;
	background-position: 3px 3px;
	border-color: #FF8080
}

/* 出错 */
.msg .alert {
	background-position: 3px -97px;
	border-color: #ff8c40;
	background-color: #fff5f6
}

/* 警告*/
.msg .attention {
	background-position: 3px -147px;
	border-color: #40b3ff;
	background-color: #e5f5ff
}

/* 注意*/
.msg .tips {
	background-position: 3px -197px;
	border-color: #ffcc7f;
	background-color: #ffffe5
}

/* 技巧*/
.msg .notice {
	background-position: 5px -295px;
	border-color: #40b3ff;
	background-color: #e6f5ff
}

/* 通知*/
.msg .question {
	background-position: 3px -347px;
	border-color: #bfbfbf;
	background-color: #f2f2f2
}

/* 问题*/
.msg .help {
	background-position: 3px -1197px;
	border-color: #fff;
	background-color: #fff
}

/*  ---------------table  ---------------*/

.table {
	border-collapse: collapse;
	background-color: #fff;
}

.table td,
.table th {
	padding: 5px;
	border: 1px solid #E9E9E9;
	border-collapse: collapse;
}

.table tr:hover {
	background-color: #f9f9f9;
}

.table thead th {
	background-color: #F2F3F5;
	padding: 8px 0;
}


.table-nob {
	border: 0;
}

.table-nob td,
.table-nob th {
	border: 0;
}


.table-even {
	border: 0;
	border-bottom: 1px solid #E8E8E8;
}

.table-even td,
.table-nob th {
	border: 0;
	padding: 15px 0;
	border-bottom: 1px solid #E8E8E8;
}


/*  --------------- 内容排版  ---------------*/

.wb-100 {
	width: 100%;
}

.wb-90 {
	width: 90%;
}

.wb-80 {
	width: 80%;
}

.wb-75 {
	width: 75%;
}

.wb-70 {
	width: 70%;
}

.wb-60 {
	width: 60%;
}

.wb-50 {
	width: 50%;
}

.wb-40 {
	width: 40%;
}

.wb-30 {
	width: 30%;
}

.wb-25 {
	width: 25%;
}

.wb-20 {
	width: 20%;
}

.wb-10 {
	width: 10%;
}

.wb-75 {
	width: 75%;
}

.wb-25 {
	width: 25% !important;
}

.wb-33 {
	width: 33.333% !important;
}

.w-60 {
	width: 60px !important;
}

.w-90 {
	width: 90px !important;
}

.w-100 {
	width: 100px !important;
}

.w-120 {
	width: 120px !important;
}

.w-150 {
	width: 150px !important;
}

.w-180 {
	width: 180px !important;
}

.w-200 {
	width: 200px !important;
}

.w-240 {
	width: 240px !important;
}

.w-300 {
	width: 300px !important;
}

.w-360 {
	width: 360px !important;
}

.w-480 {
	width: 480px !important;
}

.w-640 {
	width: 640px !important;
}

/* 高度 */
.hb100 {
	height: 100%;
}
.hv-80 {	height: 80vh; }
.hv-70 {	height: 70vh; }
.hv-60 {	height: 60vh; }
.hv-50 {	height: 50vh; }
.hv-40 {	height: 40vh; }
.hv-30 {	height: 30vh; }
.hv-20 {	height: 20vh; }
.hv-10 {	height: 10vh; }
  
.h-10 {
	height: 10px !important;
}
.h-20 {
	height: 20px !important;
}
.h-30 {
	height: 30px !important;
}
.h-40 {
	height: 40px !important;
}
.h-50 {
	height: 50px !important;
}
.h-60 {
	height: 60px !important;
}
.h-80 {
	height: 80px !important;
}
.h-90 {
	height: 90px !important;
}
.h-100 {
	height: 100px !important;
}
.h-120 {
	height: 120px !important;
}
.h-150 {
	height: 150px !important;
}
.h-180 {
	height: 180px !important;
}
.h-200 {
	height: 200px !important;
}
.h-240 {
	height: 240px !important;
}
.h-300 {
	height: 300px !important;
}
.h-360 {
	height: 360px !important;
}
.h-480 {
	height: 480px !important;
}


/* 空隙 */

.k10 {
	height: 10px;
	clear: both;
}

.k20 {
	height: 20px;
	clear: both;
}

.k30 {
	height: 30px;
	clear: both;
}

.k50 {
	height: 50px;
	clear: both;
}


/* 文字 行距 */

.lh-1 {
	line-height: 1;
}

.lh-2 {
	line-height: 2;
}

.lh-3 {
	line-height: 3;
}

.lh-4 {
	line-height: 4;
}


/* 文字 字体大小 */
.fs-12 {
	font-size: 12px;
}

.fs-14 {
	font-size: 14px;
}

.fs-16 {
	font-size: 16px;
}

.fs-18 {
	font-size: 18px;
}

.fs-20 {
	font-size: 20px;
}

.fs-22 {
	font-size: 22px;
}

.fs-24 {
	font-size: 24px;
}

.fs-26 {
	font-size: 26px;
}

.fs-28 {
	font-size: 28px;
}

.fs-30 {
	font-size: 30px;
}

.fs-32 {
	font-size: 32px;
}

.fs-36 {
	font-size: 36px;
}

.fs-48 {
	font-size: 48px;
}

.fw-b,
.b {
	font-weight: bold;
}


/* 外边距 */
.m-0 {
	margin: 0 !important;
}
.m-5 {
	margin: 5px;
}

.m-10 {
	margin: 10px;
}

.m-20 {
	margin: 20px;
}

`.m-30 {
	margin: 30px;
}

.mt-5 {
	margin-top: 5px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-15 {
	margin-top: 15px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mb-5 {
	margin-bottom: 5px !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mb-15 {
	margin-bottom: 15px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.my-5 {
	margin: 5px 0;
}

.my-10 {
	margin: 10px 0;
}

.my-20 {
	margin: 20px 0;
}

.my-30 {
	margin: 30px 0;
}

.ml-5 {
	margin-left: 5px;
}

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

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

.ml-30 {
	margin-left: 30px;
}

.mr-5 {
	margin-right: 5px;
}

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

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

.mr-30 {
	margin-right: 30px;
}

/* 内边距 */

.p-0 {
	padding: 0 !important;
}

.p-5 {
	padding: 5px !important;
}

.p-10 {
	padding: 10px !important;
}

.p-20 {
	padding: 20px !important;
}

.p-30 {
	padding: 30px !important;
}

.p-40 {
	padding: 40px !important;
}
.p-50 {
	padding: 50px !important;
}
.p-80 {
	padding: 80px !important;
}
.pt-5 {
	padding-top: 5px !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-15 {
	padding-top: 15px !important;
}

.pt-20 {
	padding-top: 20px !important;
}

.pt-30 {
	padding-top: 30px !important;
}

.pb-0 {
	padding-bottom: 0px !important;
}
.pb-5 {
	padding-bottom: 5px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}

.pb-15 {
	padding-bottom: 15px !important;
}

.pb-20 {
	padding-bottom: 20px !important;
}

.pb-30 {
	padding-bottom: 30px !important;
}

.py-10 {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.py-20 {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

.py-30 {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}
.pl-0 {
	padding-left: 0px !important;
}
.pl-5 {
	padding-left: 5px !important;
}

.pl-10 {
	padding-left: 10px !important;
}

.pl-20 {
	padding-left: 20px !important;
}

.pl-30 {
	padding-left: 30px !important;
}

.pr-5 {
	padding-right: 5px !important;
}

.pr-10 {
	padding-right: 10px !important;
}

.pr-20 {
	padding-right: 20px !important;
}

.pr-30 {
	padding-right: 30px !important;
}

/* 边线 */
.border {
	border: 1px solid #dee2e6;
}

.border-left {
	border-left: 1px solid #dee2e6;
}

.border-top {
	border-top: 1px solid #dee2e6;
}

.border-right {
	border-right: 1px solid #dee2e6;
}

.border-bottom {
	border-bottom: 1px solid #dee2e6;
}

.border-top-dashed {
	border-top: 1px dashed #dee2e6 !important;
}

.border-right-dashed {
	border-right: 1px dashed #dee2e6 !important;
}

.border-bottom-dashed {
	border-bottom: 1px dashed #dee2e6 !important;
}

.border-left-dashed {
	border-left: 1px dashed #dee2e6 !important;
}


/*  */
.border-radius-8 {
	border-radius: 8px;
}

.border-radius-12 {
	border-radius: 12px;
}

.border-radius-20 {
	border-radius: 20px;
}

/* 阴影  */
.shadow-lg {
	box-shadow: 0 2px 15px rgba(0, 0, 0, .35) !important;
}
.shadow {
	box-shadow:1px 1px 6px 0px rgb(219 218 218 / 50%) !important;
}
.shadow-sm {
	box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, .075) !important;
}

/*  --------------- 翻页  ---------------*/
.pages {
	text-align: center;
	margin-top: 20px;
}

.pages span {
	padding: 5px 12px;
	margin-right: 5px;
	display: inline-block;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;

}

.pages a {
	padding: 5px 12px;
	margin-right: 5px;
	display: inline-block;
	background: #f1f1f1 !important;
	border-radius: 3px;
	overflow: hidden;
}

.pages a.on {
	background: #0081E6 !important;
	color: #fff !important;
}



/*  --------------- 图标  ---------------*/

.icon-20 {
	width: 20px;
	height: 20px;
}

.icon-24 {
	width: 24px;
	height: 24px;
}

.icon-32 {
	width: 32px;
	height: 32px;
}

.icon-36 {
	width: 36px;
	height: 36px;
}

.icon-48 {
	width: 48px;
	height: 48px;
}

.icon-64 {
	width: 64px;
	height: 64px;
}

.icon-128 {
	width: 128px;
	height: 128px;
}

.icon-20-r {
	width: 20px;
	height: 20px;
	border-radius: 4px;
}

.icon-24-r {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.icon-32-r {
	width: 32px;
	height: 32px;
	border-radius: 4px;
}

.icon-36-r {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}

.icon-48-r {
	width: 48px;
	height: 48px;
	border-radius: 8px;
}

.icon-64-r {
	width: 64px;
	height: 64px;
	border-radius: 12px;
}

.icon-128-r {
	width: 128px;
	height: 128px;
	border-radius: 16px;
}


/*  --------------- 背景  ---------------*/

.bg-white {
	background-color: #ffffff !important
}

.bg-light {
	background-color: #FAFAFA !important; 
	color: #666 !important
}

.bg-red {
	background-color: #FF5722 !important
}

.bg-orange {
	background-color: #FFB800 !important
}

.bg-green {
	background-color: #009688 !important
}

.bg-cyan {
	background-color: #2F4056 !important
}

.bg-blue {
	background-color: #1E9FFF !important
}

.bg-black {
	background-color: #393D49 !important
}

.bg-gray {
	background-color: #eee !important;
	color: #666 !important
}



/*  --------------- 数据展示  ---------------*/

.datalist {
	padding: 20px 0;
}

.data-item {
	width: 100%;
	display: flex;
	align-items: top;
	padding: 10px 0;
	border-bottom: 1px solid #f1f1f1;
	justify-content: space-between;
}

.data-item-l {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 10px 0;
}

.data-label {
	width: 12em;
	color: #888;
}

.data-info {
	width: auto;
}

.data-operate {
	flex: 2;
	text-align: right;
}



/*  ---------------   表单排版   ---------------*/

.form-item {
	margin-bottom: 15px;
	text-align: left;
}

.form-label {
	display: inline-block;
	margin-bottom: 5px;
	vertical-align: top;
	text-align: left;
}

.form-input {
	display: inline-block;
	padding: 6px 0;
	color: #555;
	vertical-align: middle;
	background-image: none;
	border-radius: 2px;
}

.form-input input[type='text'],
.form-input input[type='password'],
.form-input select {
	font-size: 14px;
	line-height: 1.42;
	text-indent: 12px;
	height: 36px;
	background-color: #fff;
}

.form-group {
	margin-bottom: 15px;
}

.form-group-line {
	display: inline-block;
	margin-right: 10px;
}

.control-label {
	display: block;
	margin-bottom: 5px;
}

.form-control {
	width: 100%;
	text-indent: 12px;
	font-size: 14px;
	line-height: 1.42;
	color: #555;
	vertical-align: middle;
	background-color: #fff;
}

select.form-control {
	height: 36px;
	line-height: 36px;
}


.btn-upload {
	width: 120px;
	height: 120px;
	border: 1px solid #ddd;
	text-align: center;
	line-height: 120px;
	display: block;
	font-size: 20px;
	border-radius: 4px;
}

input[type='number'] {
	height: 36px;
}

/* ----------------标签-------------------- */
.tag {
	background-color: #f65;
	color: #fff;
	padding: 4px 8px;
	display: inline-block;
	border-radius: 4px;
	text-indent: 0;
}

/* panel 面板 */

.panel {
	border: 1px solid #eee;
	border-radius: 2px;
	background-color: #fff;
	color: #666;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
	position: relative;
}


/* badge 徽章 */

.badge {
	height: 18px;
	line-height: 18px;
	position: relative;
	display: inline-block;
	padding: 0 6px;
	font-size: 12px;
	text-align: center;
	background-color: #FF5722;
	color: #fff;
	border-radius: 2px;
}

.badge-rim {
	height: 18px;
	line-height: 18px;
	border-width: 1px;
	border-style: solid;
	color: #666;
	position: relative;
	display: inline-block;
	padding: 0 6px;
	font-size: 12px;
	text-align: center;
	background-color: #FF5722;
	border-radius: 2px;
}


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

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

/*  */
.tab {
	width: 100%;
}

.tab .hd {
	border-bottom: 1px solid #ddd;
	position: relative;
}

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

.tab .hd ul li {
	padding: 15px;
	cursor: pointer;
}

.tab .hd ul li.on {
	height: 30px;
	background: #fff;
	border-bottom: 2px solid #334;
}

.tab .bd ul {
	padding: 15px;
	zoom: 1;
}

/* block 无背景  只用于布局 */
.block {
	width: 100%;
}

.block-head {
	padding: 15px 20px;
}

.block-body {
	padding: 15px 20px;
}

.block-foot {
	padding: 15px 20px;
}


/* card 有背景  卡片*/
.card {
	margin-bottom: 10px;
	background-color: #fff;
	box-shadow: 0 0 2px #aaa;
	position: relative;
}

.card-head {
	padding: 15px 20px;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}

.card-body {
	padding: 15px 20px;
	box-sizing: border-box;
}

.card-foot {
	position: absolute;
	left:0;
	width: 100%;
	bottom:0;
	box-sizing: border-box;
	padding: 15px 20px;
	border-top: 1px solid #f1f1f1;
}

.title {
	font-size: 16px;
	font-weight: bold;
}

.data-cell {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
}


/* pop 弹窗 */
.mark {
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.5;
	z-index: 0;
	position: absolute;
}

.pop {
	width: 80%;
	margin: 0 10%;
	background-color: #fff;
	height: auto;
	min-height: 200px;
	position: relative;
	z-index: 100;
	box-shadow: 0 0 10px #333;
	border-radius: 12px;
}

.pop-head {
	padding: 10px 20px;
	box-sizing: border-box;
}

.pop-body {
	padding: 10px 20px;
	box-sizing: border-box;
	min-height: 100px;
}

.pop-foot {
	padding: 10px 20px;
	box-sizing: border-box;
}

body {
	position: relative;
}

@media only screen and (min-width: 1230px) {}

@media screen and (min-width:1200px) {}

@media only screen and (max-width: 640px) {}

@media only screen and (min-width: 576px) {}

@media only screen and (max-width: 768px) {}

@media only screen and(min-width:800px) and (max-width:1024px)
/* 宽度大于800 小于1024 */