body {
	margin-bottom: 4em;
}

.center {
	width: 100%;
	clear: both;
}

.image {
	clear: both;
	position: relative;
}

.image img {
	width: 100%;
	display: block;
}

.imgdiv img {
	width: 3.2em;
}

.tablediv {
	width: 100%;
	overflow: auto;
	text-align: center;
	background: #FFF;
	display: table;
}

.rowdiv {
	display: table-row;
}

.rowdiv>div {
	display: table-cell;
	font-size: 1.2em;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	width: 33.3%;
}

@media screen and (orientation: portrait) {
	.rowdiv>div {
		height: calc(100vw/ 3);
	}
}

@media screen and (orientation: landscape) {
	.rowdiv>div {
		height: calc(100vh/ 3);
	}
}

.clummon3 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon1, .clummon2 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon4 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon5 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon6 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon7 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon8 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon9 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon10 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon11 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}

.clummon12 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}
.clummon13 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}
.clummon14 {
	border-right: 1px solid #E6E9ED;
	border-bottom: 1px solid #E6E9ED;
}
.imgdiv {
	margin-bottom: 0.5em;
}

.gainlabel {
	color: #999999;
	font-size: 0.83em;
}

.gainnumber { /* color:#DD0000; */
	font-size: 0.83em;
}

.gaindiv {
	margin-top: 0.5em;
}

.viewline { /*border-top: 1px solid #E6E9ED;*/
	
}

.vipinfo {
	padding: 1.5em;
	/*border-bottom: 1px solid #e6e9ed; */
	text-align: center;
	/* background: #DD0000; */
}

.vipinfo .hphoto span {
	display: block;
}

.hp {
	border-radius: 50%;
	height: calc(100vw/ 7);
	width: calc(100vw/ 7);
	margin-bottom: 0.5em;
}

.vipinfo .hphoto .name {
	color: #FFF;
	font-size: 1.2em;
}

.vipinfo .level {
	color: #FFF;
	font-size: 1em;
	/*margin-top: 0.2em;*/
}

.center .guideboard .guidedata .bgimg {
	width: 100%;
	vertical-align: middle;
}

.center .guideboard {
	/* display: table; */
	width: 100%;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.center .guideboard .guidedata .vipinfo2 {
	position: absolute;
	top: 50%;
	left: 0px;
	bottom: 0px;
	right: 0px;
	margin-top: calc((100vw / 7 + 0.5em + 34px) * -1 / 2) !important;
}

.center .guideboard .guidedata .vipinfo2 .hphoto2 .name span {
	font-size: 1.2em;
	color: #FFF;
}

.center .guideboard .guidedata .vipinfo2 .hphoto2 .vip_level span {
	font-size: 1em;
	color: #FFF;
}
.worktype{
	text-align:center;
	height:50px;
	position: fixed;
	bottom: 0px;
	width: 100%;
	background: #FFF;
	z-index: 9;
	border-top: 1px solid #E6E9ED;
	display: table;
}
.worktype>div {
	display: table-cell;
	vertical-align: middle;
}
#task{ 
	width: 50%;
	padding-left: 0.8em;
}
#operating{ 
	 color:#DD0000;
	width: 50%;
	padding-left: 0.8em;
}
 .worktype>div>span {
	display: block;
	font-size:1em;
	margin-top: 0.4em;
}