/* 主体框架 */
[v-cloak]{display: none;}
* {margin:0;padding:0;box-sizing: border-box;}
html{width: 100%;height: 100%;}
body{user-select:none;width: 100%;height: 100%;overflow: auto;display: block;}
ul{list-style: none;}
a{text-decoration: none;}
a:link,a:visited,a:hover,a:active {color:white;}/* 未访问链接、已访问链接、鼠标移动到链接上、鼠标点击时*/
body{font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;color: #333;text-align: center;}


/***************** 水平线 *****************/
.hr-1{width: 100%;height: 1px;border: 0;margin: 10px auto;background-image: linear-gradient(to right, #fff0 1%, #aaa 50%, #fff0 99%);}
.hr-2{width: 100%;height: 1px;border: 0;margin: 10px auto;background-image: linear-gradient(to right, #464646, #464646 10%,#ffffff00 50%);}
.hr-3{width: 100%;height: 1px;border: 0;margin: 0;background-image: linear-gradient(to right,#fff 6%,#d6d6d6 7%, #d6d6d6 96%, #fff 97%);}
.hr-4{width: 100%;height: 1px;border: 0;margin: 0;background-image: linear-gradient(to right,#fff 100%);}
/***************** 背景色 *****************/
.bc-red{background-color: #dd4b12 !important;}
.bc-green{background-color: #00bc00 !important;}

/***************** 滚动公告 *****************/
.bulletin_board{display: none;position: fixed;font-size: 14px;height: 1.2em;line-height: 1.2em;padding: 5px 10px;width: 40em;left: 50%;transform: translateX(-50%);color: rgb(247, 124, 75);background-image: linear-gradient(to right, rgba(255, 255, 255, 0) , #dfff007a ,rgba(255, 255, 255, 0) );}


/***************** 自定义主体 *****************/
.content{width: 100%;min-width: 900px;height: 100%;margin: 0;padding: 0;font-size: 16px;background-color: white;overflow-y: auto;overflow-x: hidden;}
.content-index{width: 100%;min-width: 900px;height: calc(100% - 40px);margin: 0;padding: 0;font-size: 16px;background-color: white;overflow-y: auto;overflow-x: hidden;}
.content-body{width: 100%;min-width: 900px;padding: 5em;text-align: left;box-sizing:border-box;-moz-box-sizing:border-box;background-color: white;position: relative;}
.fullBody{height: calc(100% - 40px);background-color: white !important;}
.content-body:nth-child(odd){background-color: #f8f9fa;}

/***************** 文本框 *****************/
input[type='text'],input[type='password']{font-size: 14px;border: 1px solid #d0d0d0;padding-left: 10px;border-radius: 0.3em;color: #76838f; box-sizing:border-box;-moz-box-sizing:border-box;outline: none; }
textarea{width: 100%;border: none;background-color: #eee;height: 8em;resize: none;font-size: 1em;padding: 5px;letter-spacing: 2px;font-weight: 600;outline-style: none;}
/* mob 金钱输入框  ￥
	<div class="money"><input type="text" maxlength="9"></div>
*/
.money{position: relative;font-size: .2rem;width: 1.4rem;}
.money::after{content: '￥';position: absolute;left: .02rem;top: 50%;transform: translateY(-50%);}
.money input{text-align: right !important; width: 100% !important;height: 100% !important;line-height: 100% !important;font-size: .2rem !important;padding: .01rem .2rem !important;}

/* PC 金钱输入框  ￥
	<div class="pcmoney"><input type="text" maxlength="9"></div>
*/
.pcmoney{position: relative;font-size: 1em;width: 100%;}
.pcmoney::after{content: '￥';position: absolute;left: .3em;top: 50%;transform: translateY(-50%);}
.pcmoney input{text-align: right !important; width: 100% !important;height: 100% !important;line-height: 100% !important;font-size: 1.2em !important;padding: .1em .2em !important;}

/***************** PC端按钮 *****************/
.btn{border-style: none;padding: 5px 10px;border-radius: 3px;color: gray;cursor: pointer;}

.btn-hover-ok:hover{background-color: #39b1ab;color: white;}
.btn-hover-del:hover{background-color: #dd1a1a;color: white;}
.btn-ok{background-color: #39b1ab;color: white;}
.btn-up{background-color: #009fff;color: white;}
.btn-del{background-color: #dd1a1a;color: white;}
.btn-back{background-color: #ddaf26;color: white;}
.btn-canel{background-color: #b5b5b5;color: white;}
.btn-no{cursor: default !important;background-color: gray;color: white;}

/* 热点按钮*/
.tableBtn-1{padding: 0.3em 0.6em;color: white;background-color: #009fff;border-radius: 3px;cursor: pointer;}

/* .btn-1{border-style: none;padding: 5px 10px;cursor: pointer;border-radius: 3px;color: gray;}
.btn-1:hover{color: white;background-color: #39b1ab;}
.btn-del{border-style: none;padding: 5px 10px;cursor: pointer;border-radius: 3px;color: gray;}
.btn-del:hover{background-color: #dd1a1a;color: white;} */
/* 普通按钮 */
.btn-hover{cursor: pointer;opacity: .6;}
.btn-hover:hover{opacity: 1;}
.btn-2{cursor: pointer;background-color: #dd1a1a;}
.btn-3{cursor: pointer;background-color: #009fff;}
.btn-4{cursor: pointer;background-color: #ddaf26;}
.btn-5{cursor: pointer;}
.btn-6{cursor: pointer;background-color: #39b1ab;}

/* 2.数量按钮：- input + 
	<div class="countBtn">
		<button class="numBtn">-</button>
		<span class="countNum">0</span>
		<button class="numBtn">+</button>
	</div>
*/
.countBtn{display: flex;justify-content: center;align-items: center;}
.countNum{padding: .2em 1em;}
.numBtn{width: 2em;height: 1.5em;margin: 0 .5em;color: #999;border: none;cursor: pointer;}

/* 3.多项点选按钮-单选
     <ul class="labList">
         <li :class="nowCollege=='全部'?'labSel':''">选项选中状态<span>&nbsp;(数字白色)</span></li>
         <li :class="nowCollege=='全部'?'labSel':''">选项未选中状态<span>&nbsp;(数字浅灰色)</span></li>
     </ul>
*/
.labList{width: 100%;}
.labList li{display: inline-block;margin-right: 1em;cursor: pointer;padding: 5px 8px;border-radius: 3px;}
.labSel{background-color: #39b1ab;color: white;}
.labSel-green{background-color: #55b124;color: white;}
.labSel-green,.labSel span{color: white !important;}
.labSel-green,.labList span{color: #9f9f9f;}

/* 3.多项点选按钮-多选
	<div class="check-1">
		<label :class="selArr.includes('1')?'labSel':''">
			<input type="checkbox" v-model="selArr" value="1"/><span>选项1</span>
		</label>
		<label :class="selArr.includes('2')?'labSel':''>
			<input type="checkbox" v-model="selArr" value="2"/><span>选项2</span>
		</label>
	</div> 
*/
.check-1{padding: 8px;}
.check-1 label{cursor: pointer;padding: 5px 8px;margin: 0 .5em;}

.check-2{padding: 8px;}
.check-2 label{cursor: pointer;padding: 5px 8px;border-radius: 3px;margin: .3em .5em;}
.check-2 input[type='checkbox']{display: none;}

/* 4.左右滑动按钮-on-off
	<label for="" class="switch-1">
		<input type="checkbox">
		<div class="slider"></div>
	</label>
*/
.switch-1 {position: relative;display: inline-block;width: 3.5em;height: 1.3em;top: 0.25em;}
.switch-1 input {display:none;}
.switch-1 .slider {line-height:1.1em;position: absolute;border-radius: 2.3em;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;height: 1.4em;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.switch-1 input:checked + .slider {background-color: #349D16;}
/* 滑动块 */
.switch-1 .slider:before {display: block;position: absolute;content: "";height: 1.4em;width: 1.4em;left: 1px;top: 0;border-radius: 50%;background-color: white;-webkit-transition: .4s;transition: .4s;}
.switch-1 input:checked + .slider:before {-webkit-transform: translateX(2em);-ms-transform: translateX(2em);transform: translateX(2em);}
/* 文字 */
.switch-1 .slider:after {content: "off";position: absolute;font-size: 1em;right: 0.4em;font-weight: 800;color: white;}
.switch-1 input:checked + .slider:after {content: "on";left: -1em;}
.switch-1 input:focus + .slider {box-shadow: 0 0 1px #2196F3;}


/* 5.左右滑动按钮-锁定-解锁
	<label for="" class="switch-2">
		<input type="checkbox">
		<div class="slider"></div>
	</label>
*/
.switch-2 {position: relative;display: inline-block;width: 3.5em;height: 1.3em;top: 0.25em;}
.switch-2 input {display:none;}
.switch-2 .slider {line-height:1.1em;position: absolute;border-radius: 2.3em;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;height: 1.4em;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.switch-2 input:checked + .slider {background-color: #349D16;}
/* 滑动块 */
.switch-2 .slider:before {display: block;position: absolute;content: "";height: 1.4em;width: 1.4em;left: 1px;top: 0;border-radius: 50%;background-color: white;-webkit-transition: .4s;transition: .4s;}
.switch-2 input:checked + .slider:before {-webkit-transform: translateX(2em);-ms-transform: translateX(2em);transform: translateX(2em);}
/* 文字 */
.switch-2 .slider:after {content: "解锁";position: absolute;font-size: 1em;right: 0.4em;font-weight: 800;color: white;}
.switch-2 input:checked + .slider:after {content: "锁定";left: -1em;}
.switch-2 input:focus + .slider {box-shadow: 0 0 1px #2196F3;}

/* 滑块进度条
<div class="range-1">
	<input type="range">
</div>
*/
.range-1{box-sizing: border-box;padding: 15px;}
#rangeBox{position: relative;}
#range{height: 50px;position: relative;}
#rangeBox input[type='range']{width: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
#signList{display: flex;justify-content: space-between;width: 100%;border-top: 1px solid #939393;padding-top: 5px;}

/* 6.状态按钮-圆形开关
	<div class="switch-3">
		<input type="checkbox">
		<label></label>
	</div>
*/
.switch-3{width: 4em;height: 4em;margin: auto;position: relative;z-index: 100;}
.switch-3 input {top: 0; right: 0; bottom: 0; left: 0;opacity: 0;z-index: 100;position: absolute;width: 100%;height: 100%;cursor: pointer;}
.switch-3 label {width: 100%;height: 100%;position: relative;display: block;border-radius: 50%;background: #eaeaea;box-shadow: 0 3px 5px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -5px 5px rgba(100,100,100,0.1), inset 0 5px 5px rgba(255,255,255,0.3);}
.switch-3 label:after {content: "";position: absolute;top: -8%; right: -8%; bottom: -8%; left: -8%;z-index: -1;border-radius: inherit;background: #ddd;background: -moz-linear-gradient(#ccc, #fff);background: -ms-linear-gradient(#ccc, #fff);background: -o-linear-gradient(#ccc, #fff);background: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#fff));background: -webkit-linear-gradient(#ccc, #fff);background: linear-gradient(#ccc, #fff);box-shadow: inset 0 2px 1px rgba(0,0,0,0.15), 0 2px 5px rgba(200,200,200,0.1);}
.switch-3 label:before {content: "";position: absolute;width: 20%;height: 20%;border-radius: inherit;left: 40%;top: 40%;background: #969696;background: radial-gradient(40% 35%, #ccc, #969696 60%);box-shadow:inset 0 2px 4px 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 white;}
.switch-3 input:checked ~ label {background: #dedede;background: -moz-linear-gradient(#dedede, #fdfdfd);background: -ms-linear-gradient(#dedede, #fdfdfd);background: -o-linear-gradient(#dedede, #fdfdfd);background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), to(#fdfdfd));background: -webkit-linear-gradient(#dedede, #fdfdfd);background: linear-gradient(#dedede, #fdfdfd);}
.switch-3 input:checked ~ label:before {background: #25d025;background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);box-shadow:inset 0 3px 5px 1px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.4),0 0 10px 2px rgba(0, 210, 0, 0.5);}

/* 5.下拉选择按钮 */
.select{border: none;border-radius: 2px;padding: .2em 1em;color: white;background-color: #a5a5a5;}
.select-1{border: none;background-color: #39b1ab;border-radius: 2px;padding: .2em 1em;color: white;}

/* 翻页按钮组件 */
/* <div class="pageNum">
	<button class="btn-1" @click="nowPage>1?nowPage--:''">上一页</button>
	<span>{{nowPage}}/{{allPage}}</span>
	<button class="btn-1" @click="nowPage<allPage?nowPage++:''">下一页</button>
	<input type="text" v-model="toPage" id="toPage">
	<button class="btn-1" @click="toPage<=nowPage?nowPage=toPage:toPage=1;">跳转</button>
</div> */
.pageNum{white-space: nowrap;}
.pageNum span{font-size: 1.5em;margin: 0 1em;width: 2em;text-align: center;display: inline-block;}
.pageNum input{width: 3em;text-align: center;padding: 0;font-size: 1.3em;margin: 0 1em;}

/* 6.不能为空标识 */
.must{position: relative;overflow: hidden;}
.must::after{content: '';width: 2em;height: 1em;position: absolute;left: -0.7em;top: -0.2em;background-color: #e16103;transform: rotate(-45deg);}

/* 移动端 */
/* 超链接a标签-点击按钮 */
.mob-btn-a-1{
	font-size: .5rem;
	color: white;
	padding: .1rem .1rem;
	display: block;
	margin: .3rem auto .2rem;
	border-radius: 0.2rem;
	letter-spacing: 0.05rem;
	background: #70c9e3;
		background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
		background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
		box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	font-size: .2rem;
}
button.mob-btn-1{border-style: none;padding: 5px 10px;cursor: pointer;border-radius: 3px;color: white;background-color: #39b1ab;}

/******************通用设置：序号、备选项（不可见）******************/
/* [用到的地方在最外围加  counter-reset: number;] */
/* <span class="orderNum"></span> */
.width-3em{width: 3em !important;text-align: center;padding: 0 !important;}
.orderNum:before{counter-increment: number;content: "  " counter(number);}
table{counter-reset: number;}
.orderTh{min-width: 3em !important;}

.btnTd{height: 3em;}
.display-Inline{display: inline;}
.disNone{display: none;}

/******************表格******************/
.inputTable{margin: 0 auto;}
.inputTable input[type='text']{background-color: #eee;width: 100%;padding: .5em 1em;border: none;}
table{font-size: 12px;background-color: #f5f5f5;border-collapse: separate;text-align: center;}
th,.leftTh{padding: 4px;letter-spacing: 2px;text-indent: 2px;min-width: 80px;color: white;background-color: #39B1AB;font-weight: bold;}
td{text-align: center;background-color: white;padding: 4px 6px;}
.leftTd{text-align: left;}
.rightTd{text-align: right;}

/* 表格标题+标题旁按钮：确认、取消 */
.table-title{font-size: 1.3em;color: white;position: relative;margin-bottom: 5px; text-align: left;}
.red{background-color: #ff00007a;}
.table-title span{padding: 3px;}
.table-title span:nth-child(1){background-color: green;min-width: 100px;letter-spacing: 2px;text-indent: 1em;position: relative;display: inline-block;margin-right: 1em;}
.table-title span:nth-child(1):after{content: '';width: 1em;height: 100%;position: absolute;left: 98%;top: 0;background-color: green;transform: skewX(10deg);}

.titleBtn{position: relative;display: inline-block;vertical-align: bottom;font-size: 0.7em;letter-spacing: 2px;text-indent: 2px;transform: skewX(10deg);opacity: 0.6;cursor: pointer;}
.titleBtn:hover{opacity: 1;}
.titleOK{background-color: #39b1ab;}
.titleCanel{background-color: #d2d2d2;}
.titleDel{background-color: #d23a2f;}
/* 表格按钮:修改、删除 */
.upDelBtn > span{color: white;padding: 2px 4px;background-color: #d2d2d2;}
.upDelBtn > span:nth-child(1):hover{background-color: #39b1ab;}
.upDelBtn > span:nth-child(2):hover{background-color: rgb(255, 64, 64);}

/* 表格样式1 */
.divTable-1{background-color: white;padding: 10px;text-align: center;border-radius: 2px;}
.divTable-1 h2{color: #226d68;letter-spacing: 2px;text-indent: 2px;width: 100%;}
.divTable-1 h4{color: #8f8f8f;text-align: left;transform: translate(3px,1em);}
.divTable-1 table{font-size: 12px;background-color: #f5f5f5;margin: 1em auto 0;width: 100%;}
.divTable-1 th{letter-spacing: 2px;text-indent: 2px;padding: 4px;color: white;background-color: #39B1AB;}
.divTable-1 tbody tr:hover td{background-color: #fafafa;}
.divTable-1 td{padding: 4px 6px;background-color: white;text-align: center;}

/* 焦点行显示 */
.hoverTr:hover td{background-color: #bababa;color: white;cursor: pointer;}
.hoverTr-green:hover td{background-color: #5bba46;color: white;cursor: pointer;}
/* 不能打开的行 */
.cantClickTr{background-color: gray;}
/* 不显示鼠标小手 */
.noCursor{cursor: default;}
.hasCursor{cursor: pointer;}
/******************布局******************/
.flex-List{width: 100%;padding: 10px;box-sizing: border-box;text-align: left;display: flex;justify-content: flex-start;}
.flex-List > div{margin: 0 5px;}

.flexBox{width: 100%;padding: 10px;box-sizing: border-box;display: flex;justify-content: left;text-align: center;}
.flexBox > div{margin: 0 5px;}
		
.flex{width: 100%;padding: 15px;overflow: auto;white-space: nowrap;display: flex;}
.flex-item{text-align: center;padding: 5px;}
.center{justify-content: center;align-items: center;text-align: center;}
.row{flex-direction: row;}
.column{flex-direction: column;}
/******************加载动图、图标******************/
.loading img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

/* CSS加载动画 */
/* <div class="loader"></div> */
.loader {border: 4px solid rgba(0, 0, 0, 0.1);border-radius: 50%;border-top: 4px solid #3498db;width: 1em;height: 1em;animation: spin 2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/* CSS圆圈对号 */
/* <div class="checkmark-circle"></div> */
.checkmark-circle {width: 1em;height: 1em;border-radius: 50%; /* 使div变成圆形 */background: #4CAF50; /* 对号颜色 */position: relative;}
.checkmark-circle::after {content: '';position: absolute;left: 50%;top: 50%;width: .2em;height: .5em;border: solid white;border-width: 0 .2em .2em 0;transform: translate(-50%, -60%) rotate(45deg); /* 将线条旋转成对号形状 */}

/* CSS圆圈叉号 */
/* <div class="cross-circle"></div> */
.cross-circle {width: 1em;height: 1em;background-color: red;border-radius: 50%;position: relative;}
.cross-circle::before,.cross-circle::after {content: '';display: block;width: .7em;height: .2em;background-color: white;position: absolute;left: 50%;top: 50%;}
.cross-circle::before {transform: translate(-50%, -50%) rotate(45deg);}
.cross-circle::after {transform: translate(-50%, -50%) rotate(-45deg);}
/******************颜色******************/
.yellow{background-color: #ddaf26;}
.green{background-color: #5bba46;}
.red{background-color: #d23a2f;}
.gray{background-color: gray;}
.blue{background-color: #39b1ab;}
.fyellow{color: #ddaf26;}
.fgreen{color: #5bba46;}
.fred{color: #d23a2f;}
.fgray{color: gray;}
.fblue{color: #39b1ab;}