
.ui-btn {
  height: 30px;
  line-height: 30px;
  padding: 0 11px;
  width: 98%;
  min-width: 55px;
  display: inline-block;
  position: relative;
  text-align: center;
  font-size: 15px;
  background-color: #f75549;
  vertical-align: top;
  color: #fff !important;
  -webkit-box-sizing: border-box;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border-radius: 3px; }

.Maincontanier{
	padding:.32rem;
	background: #FFF;
	margin-bottom: .2rem;
}
#slider img{
	border-radius:.1rem;
}
.mainMenuBox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-bottom: .3rem;
	padding-top: .1rem;
}
.mainMenuBox a{
	display: flex;
	flex-direction: column;
	width: 20%;
	padding-top: .3rem;
	color: #555;
	font-size: .26rem;
	align-items: center;
}
.mainMenuBox a img{
	width: .9rem;
	height: .9rem;
	margin-bottom: .16rem;
	border-radius: .2rem;
}
.middleBanner{
	display: flex;
	justify-content: space-between;
}
.middleBanner a{
	flex: 1;
}
.middleBanner span{
	width: .2rem;
}
.middleBanner img{
	width: 100%;
	height: 1.4rem;
	border-radius: .1rem;
}
.mainHeader{
	display: flex;
	justify-content: space-between;
	padding: .3rem 0;
	align-items: center;
}
.mainHeader a{
	color: #888;
	font-size: .26rem;
}
.mainHeader span{
	position: relative;
	font-size: .38rem;
	font-weight: bold;
	height: .42rem;
}
.mainHeader span:before{
	content: '';
	position: absolute;
	background: #FF6A30;
	left: 0;
	right: 0;
	bottom: 0;
	height: .16rem;
}
.mainHeader span i{
	position: relative;
	font-style: normal;
}
.scrollTheModle{
	width: 100%;
	overflow: hidden;
	margin-bottom: .1rem;
}
.scrollTheModle .modleBox{
	width: 16rem;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	padding: .1rem .05rem;
}
.scrollTheModle .modleBox .lists{
	width: 5rem;
	position: relative;
	box-shadow: .03rem .03rem .1rem #DDD;
	border-radius: .2rem;
	margin-right:.3rem;
}
.scrollTheModle .modleBox .lists .tag{
	position: absolute;
	top: 0;
	right: 0;
	background: #ff6a30;
	padding: .06rem .2rem .06rem .3rem;
	border-radius: 0 .2rem 0 .4rem;
	color: #FFF;
	font-size: 14px;
}
.scrollTheModle .modleBox .lists .tag0{
	background: green;
}
.scrollTheModle .modleBox .lists .tag1{
	background: #999;
}
.scrollTheModle .modleBox .lists .cont{
	display: flex;
	padding: .4rem .3rem .3rem .3rem;
	
}
.scrollTheModle .modleBox .lists .cont .info{
	flex: 1;
}
.scrollTheModle .modleBox .lists .cont .info h5{
	font-size: .28rem;
	line-height: .4rem;
	height: .8rem;
	overflow: hidden;
	color: #333;
	font-weight: bold;
	margin-bottom: .1rem;
}
.scrollTheModle .modleBox .lists .cont .info div{
	font-size: 13px;
	line-height: .4rem;
	height: .4rem;
	color: #888;
	overflow: hidden;
}
.scrollTheModle .modleBox .lists .cont .img img{
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	margin: .3rem .1rem 0 .3rem;
	box-shadow:.1rem .1rem .2rem #999;
}
.listVideo .lists{
	display: block;
	box-shadow: .03rem .03rem .1rem #EEE;
	margin-bottom: .3rem;
	border-radius: .2rem;
}
.listVideo .lists .base{
	position: relative;
	width: 100%;
	height: 2.2rem;
	overflow: hidden;
	border-radius: .2rem .2rem 0 0;
	color: #FFF;
	/*text-shadow: .01rem .01rem .02rem #666;*/
}
.listVideo .lists .base .bg{
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	height: 300%;
	display:flex;
	align-items:center;
}
.listVideo .lists .base .bg img{
	width:100%;
	height:auto;
}
.listVideo .lists .base .info{
	display: flex;
	flex-direction: column;
	height: 2.3rem;
	padding: 0 3rem 0 .3rem;
	position: relative;
	justify-content: center;
}
.listVideo .lists .base .info h4{
	font-weight: 600;
	height: .6rem;
	line-height: .6rem;
	font-size: .36rem;
	overflow: hidden;
}
.listVideo .lists .base .info div{
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: .3rem;
}
.listVideo .lists .base .info img{
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	margin-right: .2rem;
}
.listVideo .lists .base .state{
	position: absolute;
	top: .2rem;
	right: .2rem;
	border: #FFF solid 1px;
	font-size: .26rem;
	line-height: .46rem;
	padding: 0 .2rem;
	border-radius: .23rem;
	box-shadow: .01rem .01rem .02rem #666;
}
.listVideo .lists .sorts{
	padding: .2rem .3rem;
	display: flex;
}
.listVideo .lists .sorts span{
	font-size: .2rem;
	color: #888;
	background: #EEE;
	margin-right: .1rem;
	padding: .03rem .15rem;
}
.listVideo .lists .price{
	padding: .01rem .3rem .2rem .3rem;
	font-size: .4rem;
	color: #F60;
}
.listArticle{
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin-top: -.2rem;
}
.listArticle .list{
	position: relative;
	padding-top: .3rem;
	margin-bottom: .3rem;
	display: flex;
	align-items: center;
}
.listArticle .list:before{
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background: #EEE;
	left: 0;
	top: -1px;
}
.listArticle .list .img img{
	width: 3.04rem;
	height: 2.1rem;
	border-radius: .1rem;
	margin-right: .2rem;
}
.listArticle .list .info{
	flex: 1;
}
.listArticle .list .info .title,.listArticle .list .info .marks,.listArticle .list .info .sorts,.listArticle .list .info .other{
	height: .42rem;
	line-height: .42rem;
	overflow: hidden;
}
.listArticle .list .info .title{
	color: #333;
	font-size: .32rem;
	line-height:.4rem;
	height:.4rem;
	margin-bottom:.1rem;
	font-weight: 600;
}
.listArticle .list .info .marks{
	font-size: .26rem;
	color: #888;
}
.listArticle .list .info .sorts span{
	display: inline-block;
	font-size: .24rem;
	background: #EEE;
	margin-right: .1rem;
	line-height: .4rem;
	color: #999;
	padding: 0 .1rem;
}
.listArticle .list .info .other{
	display: flex;
	margin-top: .2rem;
	justify-content: space-between;
	align-items: center;
}
.listArticle .list .info .other .right{
	font-size: .24rem;
	color: #999;
}
.listArticle .list .info .other .left{
	font-size: .36rem;
	font-weight: 900;
	color: #F60;
}
.listArticle .list .info .other .left em{
	font-style: normal;
	color: #999;
}
.listArticle .list .info .other .left i{
	font-style: normal;
	font-size: .24rem;
	font-weight: 500;
}
.listBooks{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.listBooks .list{
	width: 3.3rem;
	overflow: hidden;
}
.listBooks .list .img{
	width:3.3rem;
	height: 4rem;
	border-radius: .1rem;
	overflow:hidden;
	margin-bottom:.1rem;
}
.listBooks .list .img span{
	display:block;
	width:300%;
	text-align:center;
	margin-left:-100%;
}
.listBooks .list .img img{
	height: 4rem;
}
.listBooks .list .title{
	height: .5rem;
	line-height: .5rem;
	color: #333;
	font-size: .32rem;
	overflow: hidden;
}
.listBooks .list .price{
	height: .8rem;
	font-size: .36rem;
	color: #F60;
}
.wkbhederinfo{
	position: relative;
	width: 100%;
	height: 2.5rem;
	overflow: hidden;
	border-radius: .2rem .2rem 0 0;
}
.wkbhederinfo img{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.wkbhederinfo .tag{
	display: flex;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #FFF;
	padding-left: .5rem;
	align-items: center;
	font-size: .4rem;
	line-height: .6rem;
	font-weight: 600;
}
.listCase{
	padding-top: .1rem;
}
.listCase a{
	display: block;
	height: .6rem;
	line-height: .6rem;
	overflow: hidden;
	color: #666;
	font-size: .28rem;
	margin-top: .1rem;
}
.contactList .demo{
	display: flex;
	background: #EEE;
	padding: .3rem .4rem;
	border-radius: .1rem;
	margin-bottom: .2rem;
	align-items: center;
	min-height: 1.8rem;
}
.contactList .demo .icon{
	width: .7rem;
	height: .7rem;
	background: #ec5b56;
	color: #FFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .36rem;
}
.contactList .demo .icon img{
	width: .36rem;
}
.contactList .demo .icon.weixin{
	background: #72c96a;
}
.contactList .demo .icon.users{
	background: #5abaec;
}
.contactList .demo .word{
	flex: 1;
	padding: 0 .3rem;
}
.contactList .demo .word div{
	font-size: .32rem;
	line-height: .5rem;
}
.contactList .demo .word span{
	font-size: .26rem;
	color: #888;
}
.contactList .demo .more img{
	width: 1.5rem;
	height: 1.5rem;
}
.contactList .demo .more a{
	display: block;
	background: #ff6a30;
	color: #FFF;
	line-height: .7rem;
	padding: 0 .2rem;
	font-size: .32rem;
	border-radius: .1rem;
}
.listZtBox{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.listZtBox img{
	width: 6.9rem;
	height: 3.5rem;
	margin-bottom: .3rem;
	border-radius: .2rem;
}
.listZtBox .more{
	display: flex;
	height: .8rem;
	background: #ff6a30;
	color: #FFF;
	align-items: center;
	padding: 0 .5rem;
	font-size: .32rem;
}