/* LV7 18_1123 */

/*= Utility =*/
@media{
	.xh-text-truncate{
		word-wrap: normal; /* for IE */
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.xh-unavailable{
		opacity:.5;
	}
}

/*= Global =*/
@media{
	*, :after, :before {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	html,body{
		margin:0;padding:0;
		min-height: 100vh;
		background-color:#ebebeb;
		font-family:source-han-sans-simplified-c, "Microsoft YaHei", "PingFang SC", sans-serif;
		font-weight:100;
	}
	html {
		font-size: 16px;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}
	body{
		display:flex;
		flex-direction:column;
	}
	body, button, input, select, textarea {
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}
	a{text-decoration:none;color:black;}
	a:active,a:hover{outline:0;}
	button, input, optgroup, select, textarea {
		color: inherit;
		font: inherit;
		margin: 0;
	}
	button, html input[type=button], input[type=reset], input[type=submit] {
		-webkit-appearance: button;
		cursor: pointer;
	}
	button, select {
		text-transform: none;
	}
	button{
		overflow:visible;
	}
}

/*= Layouts =*/
/* home */
@media screen{
	.xh-home .xh-content h2{
		font-weight:normal;
		color:#5E5E5E;
	}
	/* Admin */
	.xh-home-admin .xh-content{
		display:flex;
	}
}
/* search */
@media screen{
	.xh-search .xh-content{
		display:flex;
	}
	.xh-search .xh-content .xh-searchholder{
		flex:1;
	}
}
/* form */
@media screen{
	.xh-formview .xh-searchbar{display:none;}
	.xh-formview .xh-content{
		display:flex;
		margin-bottom:0;
	}
	@media screen and (max-width:800px){
		.xh-formview .xh-nav{display:none;}
	}
}
/* display */
@media screen{
	.xh-display .xh-content{
		display:flex;
	}
}

/*= Grid =*/
@media{
.xh-grid{
	display:flex;display:-webkit-flex;
	margin: 0 auto;
	position:relative;
	width:100%;
	flex-wrap:wrap;-webkit-flex-wrap:wrap;
}
[class*=xh-grid-]{
	display:flex;
	flex-wrap:wrap;	
}
.xh-grid-0{display:none;}
.xh-grid-1{width:8.33333333333%;}
.xh-grid-2{width:16.66666666666%;}
.xh-grid-3{width:25%;}
.xh-grid-4{width:33.3333333333%;}
.xh-grid-5{width:41.66666666666%;}
.xh-grid-6{width:50%;}
.xh-grid-7{width:58.3333333333%;}
.xh-grid-8{width:66.66666666666%;}
.xh-grid-9{width:75%;}
.xh-grid-10{width:83.3333333333%;}
.xh-grid-11{width:91.66666666666%;}
.xh-grid-12{width:100%;}
/* Average Grid */
[class*=xh-grid-avg-],
[class*=xh-grid-avg-s-],
[class*=xh-grid-avg-m-],
[class*=xh-grid-avg-l-]{
	list-style:none;
	padding:0;
	flex-wrap:wrap;
}
.xh-grid-avg-2 > *{width:50%;}
.xh-grid-avg-3 > *{width:33.33333333333%;}
.xh-grid-avg-4 > *{width:25%;}
.xh-grid-avg-5 > *{width:20%;}
.xh-grid-avg-6 > *{width:16.66666666666%;}
.xh-grid-avg-7 > *{width:14.285714285714%;}
.xh-grid-avg-8 > *{width:12.5%;}
.xh-grid-avg-9 > *{width:11.111111111111%;}
.xh-grid-avg-10 > *{width:10%;}
.xh-grid-avg-11 > *{width:9.090909090909091%;}
.xh-grid-avg-12 > *{width:8.333333333333333%;}
/* Grid Offset */
.xh-grid-offset-1{margin-left:8.33333333333%;}
.xh-grid-offset-2{margin-left:16.66666666666%;}
.xh-grid-offset-3{margin-left:25%;}
.xh-grid-offset-4{margin-left:33.33333333333%;}
.xh-grid-offset-5{margin-left:41.66666666666%;}
.xh-grid-offset-6{margin-left:50%;}
.xh-grid-offset-7{margin-left:58.33333333333%;}
.xh-grid-offset-8{margin-left:66.66666666666%;}
.xh-grid-offset-9{margin-left:75%;}
.xh-grid-offset-10{margin-left:83.3333333333%;}
.xh-grid-offset-11{margin-left:91.66666666666%;}
/* Small Screen */
@media screen and (max-width:640px){
	.xh-grid-s-0{display:none;}
	.xh-grid-s-1{display:flex;flex:1}
	.xh-grid-s-2{display:flex;flex:2}
	.xh-grid-s-3{display:flex;flex:3}
	.xh-grid-s-4{display:flex;flex:4}
	.xh-grid-s-5{display:flex;flex:5}
	.xh-grid-s-6{display:flex;flex:6}
	.xh-grid-s-7{display:flex;flex:7}
	.xh-grid-s-8{display:flex;flex:8;}
	.xh-grid-s-9{display:flex;flex:9;}
	.xh-grid-s-10{display:flex;flex:10;}
	.xh-grid-s-11{display:flex;flex:11;}
	.xh-grid-s-12{display:flex;flex:12;}
	[class*=xh-grid-avg-s-]{flex-wrap:wrap;}
	.xh-grid-avg-s-2 > *{width:50%;}
	.xh-grid-avg-s-3 > *{width:33.33333333333%;}
	.xh-grid-avg-s-4 > *{width:25%;}
	.xh-grid-avg-s-5 > *{width:20%;}
	.xh-grid-avg-s-6 > *{width:16.66666666666%;}
	.xh-grid-avg-s-7 > *{width:14.285714285714%;}
	.xh-grid-avg-s-8 > *{width:12.5%;}
	.xh-grid-avg-s-9 > *{width:11.111111111111%;}
	.xh-grid-avg-s-10 > *{width:10%;}
	.xh-grid-avg-s-11 > *{width:9.090909090909091%;}
	.xh-grid-avg-s-12 > *{width:8.333333333333333%;}
	.xh-grid-offset-s-1{margin-left:8.33333333333%;}
	.xh-grid-offset-s-2{margin-left:16.66666666666%;}
	.xh-grid-offset-s-3{margin-left:25%;}
	.xh-grid-offset-s-4{margin-left:33.33333333333%;}
	.xh-grid-offset-s-5{margin-left:41.66666666666%;}
	.xh-grid-offset-s-6{margin-left:50%;}
	.xh-grid-offset-s-7{margin-left:58.33333333333%;}
	.xh-grid-offset-s-8{margin-left:66.66666666666%;}
	.xh-grid-offset-s-9{margin-left:75%;}
	.xh-grid-offset-s-10{margin-left:83.3333333333%;}
	.xh-grid-offset-s-11{margin-left:91.66666666666%;}
}
/* Medium Screen */
@media screen and (min-width:641px) and (max-width:1280px){
	.xh-grid-m-0{display:none;}
	.xh-grid-m-1{display:flex;flex:1}
	.xh-grid-m-2{display:flex;flex:2}
	.xh-grid-m-3{display:flex;flex:3}
	.xh-grid-m-4{display:flex;flex:4}
	.xh-grid-m-5{display:flex;flex:5}
	.xh-grid-m-6{display:flex;flex:6}
	.xh-grid-m-7{display:flex;flex:7}
	.xh-grid-m-8{display:flex;flex:8;}
	.xh-grid-m-9{display:flex;flex:9;}
	.xh-grid-m-10{display:flex;flex:10;}
	.xh-grid-m-11{display:flex;flex:11;}
	.xh-grid-m-12{display:flex;flex:12;}
	[class*=xh-grid-m-avg-]{flex-wrap:wrap;}
	.xh-grid-m-avg-2 > *{width:50%;}
	.xh-grid-m-avg-3 > *{width:33.33333333333%;}
	.xh-grid-m-avg-4 > *{width:25%;}
	.xh-grid-m-avg-5 > *{width:20%;}
	.xh-grid-m-avg-6 > *{width:16.66666666666%;}
	.xh-grid-m-avg-7 > *{width:14.285714285714%;}
	.xh-grid-m-avg-8 > *{width:12.5%;}
	.xh-grid-m-avg-9 > *{width:11.111111111111%;}
	.xh-grid-m-avg-10 > *{width:10%;}
	.xh-grid-m-avg-11 > *{width:9.090909090909091%;}
	.xh-grid-m-avg-12 > *{width:8.333333333333333%;}
	.xh-grid-m-offset-1{margin-left:8.33333333333%;}
	.xh-grid-m-offset-2{margin-left:16.66666666666%;}
	.xh-grid-m-offset-3{margin-left:25%;}
	.xh-grid-m-offset-4{margin-left:33.33333333333%;}
	.xh-grid-m-offset-5{margin-left:41.66666666666%;}
	.xh-grid-m-offset-6{margin-left:50%;}
	.xh-grid-m-offset-7{margin-left:58.33333333333%;}
	.xh-grid-m-offset-8{margin-left:66.66666666666%;}
	.xh-grid-m-offset-9{margin-left:75%;}
	.xh-grid-m-offset-10{margin-left:83.3333333333%;}
	.xh-grid-m-offset-11{margin-left:91.66666666666%;}
}
/* Large Screen */
@media screen and (min-width:1281px){
	.xh-grid-l-0{display:none;}
	.xh-grid-l-1{display:flex;flex:1}
	.xh-grid-l-2{display:flex;flex:2}
	.xh-grid-l-3{display:flex;flex:3}
	.xh-grid-l-4{display:flex;flex:4}
	.xh-grid-l-5{display:flex;flex:5}
	.xh-grid-l-6{display:flex;flex:6}
	.xh-grid-l-7{display:flex;flex:7}
	.xh-grid-l-8{display:flex;flex:8;}
	.xh-grid-l-9{display:flex;flex:9;}
	.xh-grid-l-10{display:flex;flex:10;}
	.xh-grid-l-11{display:flex;flex:11;}
	.xh-grid-l-12{display:flex;flex:12;}
	[class*=xh-grid-l-avg-]{flex-wrap:wrap;}
	.xh-grid-l-avg-2 > *{width:50%;}
	.xh-grid-l-avg-3 > *{width:33.33333333333%;}
	.xh-grid-l-avg-4 > *{width:25%;}
	.xh-grid-l-avg-5 > *{width:20%;}
	.xh-grid-l-avg-6 > *{width:16.66666666666%;}
	.xh-grid-l-avg-7 > *{width:14.285714285714%;}
	.xh-grid-l-avg-8 > *{width:12.5%;}
	.xh-grid-l-avg-9 > *{width:11.111111111111%;}
	.xh-grid-l-avg-10 > *{width:10%;}
	.xh-grid-l-avg-11 > *{width:9.090909090909091%;}
	.xh-grid-l-avg-12 > *{width:8.333333333333333%;}
	.xh-grid-l-offset-1{margin-left:8.33333333333%;}
	.xh-grid-l-offset-2{margin-left:16.66666666666%;}
	.xh-grid-l-offset-3{margin-left:25%;}
	.xh-grid-l-offset-4{margin-left:33.33333333333%;}
	.xh-grid-l-offset-5{margin-left:41.66666666666%;}
	.xh-grid-l-offset-6{margin-left:50%;}
	.xh-grid-l-offset-7{margin-left:58.33333333333%;}
	.xh-grid-l-offset-8{margin-left:66.66666666666%;}
	.xh-grid-l-offset-9{margin-left:75%;}
	.xh-grid-l-offset-10{margin-left:83.3333333333%;}
	.xh-grid-l-offset-11{margin-left:91.66666666666%;}
}

}

/*= Badge =*/
@media{
.xh-badge{
	display:inline-block;
	padding:.15rem .35rem;
	min-width:8px;
	border-radius:1.2rem;
	background-color:#F43530;
	color:white;
	line-height:1.2;
	text-align:center;
	vertical-align:middle;
}
.xh-badge:empty{
	padding:.25rem;
	min-width:0;
}
}

/*= Button =*/
@media{
.xh-btn{
	display: inline-block;
	margin-bottom: 0;
	padding: .5rem 1rem;
	vertical-align: middle;	
	font-size: 0.9rem;
	line-height: 1.3;
	text-align: center;
	text-decoration:none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
	-webkit-transition: background-color .3s ease-out,border-color .3s ease-out;
	transition: background-color .3s ease-out,border-color .3s ease-out;
	color: #444;
    background-color: #e6e6e6;
}
.xh-btn:focus{
	outline: thin dotted;
    outline: 1px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.xh-btn:hover{
	color: #444;
    border-color: #c7c7c7;
}
.xh-btn + .xh-btn:not(.xh-block){
	margin-left: .3rem;
}
.xh-btn.xh-disabled{
	color: rgba(0, 0, 0, 0.7);
	background-color:#e6e6e6;
	cursor: not-allowed;
	opacity:.65;
	box-shadow:none;
	border:1px solid transparent;
}
.xh-btn.xh-primary:not(.xh-disabled){
	color:white;
	background-color: #1AAD19;
}
.xh-btn.xh-primary:not(.xh-disabled):active,
.xh-btn.xh-primary:not(.xh-disabled):hover{
	color: rgba(255, 255, 255, 0.6);
	background-color:#179B16;
}
.xh-btn.xh-okey:not(.xh-disabled){
	color:white;
	background-color: #09c100;
}
.xh-btn.xh-okey:not(.xh-disabled):active,
.xh-btn.xh-okey:not(.xh-disabled):hover{
	color: rgba(255, 255, 255, 0.6);
	background-color:#09c133;
}
.xh-btn.xh-warning:not(.xh-disabled){
	color:white;
	background-color: #FFA800;
}
.xh-btn.xh-warning:not(.xh-disabled):active,
.xh-btn.xh-warning:not(.xh-disabled):hover{
	color:rgba(255, 255, 255, 0.6);
	background-color:#FFA833;
}
.xh-btn.xh-error:not(.xh-disabled){
	color:white;
	background-color: #ff5353;
}
.xh-btn.xh-error:not(.xh-disabled):active,
.xh-btn.xh-error:not(.xh-disabled):hover{
	color:rgba(255, 255, 255, 0.6);
	background-color:#ff5373;
}
.xh-btn.xh-block{
    display:block;
    width:100%;
    padding-left:0;
    padding-right:0;
	font-size:1.2rem;
	margin-top:0.6rem;
}
.xh-btn.xh-block + .xh-btn.xh-block{
	margin-top:0.6rem;
}
.xh-btn.xh-block.xh-margin{
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
}
.xh-btn.xh-hide-text span:not([class]){
	display:none;
}
.xh-btn.xh-hide-icon i{
	display:none;
}
}

/* ListView */
@media{
	.xh-list{
		list-style:none;
		margin:0 auto;
		padding:0;
		/* background-color:white; */
	}
	.xh-list li{
		min-height:45px;
		max-width:480px;
		background-color:white;
	}
	.xh-list li.xh-disabled > a{
		opacity:.4;
	}
	.xh-list li + li{
		border-top:1px solid rgba(128,128,128,.15);
	}
	.xh-list-double > li{
		height:60px;
	}
	.xh-list li > a{
		display:flex;
		padding:0 10px;
		height:100%;
		text-decoration:none;
		color:black;
	}
	.xh-list li > a:hover,
	.xh-list li > a:focus{
		background-color:#EEE;
	}
	.xh-list .xh-list-divider{
		height:auto;
		min-height:1.3rem;
		margin:0;
		border:0;
		padding-left:10px;
		line-height:1.3rem;
		font-size:.7rem;
		color:#888888;
		background-color:#ebebeb;
	}
	.xh-list .xh-list-divider + li{
		border:0;
	}
	.xh-list li a > div{
		display:inline-block;
		height:100%;
		vertical-align:top;
	}
	/* List Thumbnail */
	.xh-list .xh-list-thumb{
		margin-right:10px;
	}
	.xh-list .xh-list-thumb i{
		font-size:25px;
		line-height:35px;
		width:34px;
		margin: 5px 0 5px 0;
	}
	.xh-list .xh-list-thumb img{
		width: 32px;
		margin: 7px 0 6px 0;
		vertical-align:middle;/* for removing bottom margin, about 3px */
	}
	.xh-list-double > li .xh-list-thumb i{
		font-size:2.85rem;
		width: 45px;
		margin-top:8px;
		line-height:45px;
	}
	.xh-list-double > li .xh-list-thumb img{
		margin:7px 0 7px 0;
		width:45px;
	}
	/* List Text */
	.xh-list .xh-list-text{
		flex:1;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.xh-list .xh-list-text h4{
		display:inline-block;
		margin:2px 0 0 0;
		font-size: 15px;
		line-height:43px;
		font-weight:normal;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align:top;/* for removing bottom margin, about 3px */
	}
	.xh-list-double > li .xh-list-text h4{
		margin:0;
		margin-top:.60rem;
		font-size:1.0rem;
		font-weight:normal;
		line-height:1.4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow:ellipsis;
	}
	.xh-list-double > li .xh-list-text p{
		margin-top:0.25rem;
		font-size:0.80rem;
		color:#BBB;
		white-space: nowrap;
		overflow: hidden;
		text-overflow:ellipsis;
	}
	/* List Option */
	.xh-list .xh-list-option{
		line-height:45px;
		color:#888;
		font-size:13px;
		float:right;
	}
	.xh-list .xh-list-option > span:not([class]){
		color:#D8D8D8;
		font-size:0.7rem;
		text-align:right;
	}
	.xh-list .xh-list-option > img{
		width:35px;
		height:35px;
		vertical-align:-27%;	
	}
	.xh-list .xh-list-option > .xh-badge{
		margin-right:10px;
	}
	.xh-list-double > li > a > .xh-list-option span{
		vertical-align:-20%;
	}
	.xh-list-double > li > a > .xh-list-option .xh-badge{
		vertical-align:-45%;
	}
	.xh-list-double > li > a > .xh-list-option img{
		vertical-align:-43%;
	}
	/* figure */
	.xh-list .xh-list-option > figure{
		position:relative;
		width:35px;
		height:45px;
		margin: 0;
		-webkit-appearance:none;
		appearance:none;
		display:inline-block;
	}
	.xh-list .xh-list-option > figure:after{
		margin:0;
	}
	.xh-list .xh-list-option > figure img{
		width:35px;
		height:35px;
		vertical-align:-29%;	
	}
	.xh-list .xh-list-option > figure .xh-badge{
		vertical-align:top;
		position:absolute;
		top:0.05rem;
		right:-.25rem;
	}
	/* checkbox in List Option */
	.xh-list .xh-list-option > .xh-checkbox{
		width:24px;
		height:16px;
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		outline:0;
	}
	.xh-list .xh-list-option > .xh-checkbox:before{
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 24px;
		height: 24px;
		border-radius: 5px;
		background-color: #FFFFFF;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	}
	.xh-list .xh-list-option > .xh-checkbox:after{
		content: " ";
		position: absolute;
		top: 2px;
		left: 2px;
		width: 20px;
		height: 20px;
		border-radius: 3px;
	}
	.xh-list .xh-list-option > .xh-checkbox:checked:after{
		color: #04BE02;
		background-color: #04BE02;
	}
	/* radio in List Option */
	.xh-list .xh-list-option > .xh-radio{
		width:24px;
		height:16px;
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		outline:0;
	}
	.xh-list .xh-list-option > .xh-radio:before{
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 24px;
		height: 24px;
		border-radius: 12px;
		background-color: #FFFFFF;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	}
	.xh-list .xh-list-option > .xh-radio:after{
		content: " ";
		position: absolute;
		top: 2px;
		left: 2px;
		width: 20px;
		height: 20px;
		border-radius: 10px;
	}
	.xh-list .xh-list-option > .xh-radio:checked:after{
		color: #04BE02;
		background-color: #04BE02;
	}
	/* Hide Text or Icon */
	.xh-list.xh-hide-text .xh-list-text{
		display:none;
	}
	.xh-list.xh-hide-icon .xh-list-thumb{
		display:none;
	}
	/* Nested List */
	.xh-list .xh-list{
		height:0;
		background-color:#ECECEC;
		transition: height .3s;
		overflow:hidden;
	}
	.xh-list .xh-list.xh-intent{
		padding-left:2rem;
	}
	.xh-list .xh-list > li{
		background-color:white;
	}
	.xh-list .xh-list > li:first-child{
		border-top:1px solid rgba(128,128,128,.15);
	}
	.xh-list li a[onclick] .xh-list-option .xh-list-rotater{
		display:block;
		transition: transform .3s;
	}
	/* Horizontal List */
	.xh-list.xh-list-h{
		display:flex;
		flex-wrap:wrap;
	}	
	.xh-list.xh-list-h > li{
		flex:1;
		min-height:auto;
	}
	.xh-list.xh-list-h > li + li{
		border-top:0;
	}
	.xh-list.xh-list-h.xh-grid > li{
		flex:none;
		text-align:center;
		justify-content:center;
	}
	.xh-list.xh-list-h > li > a{
		padding:0;
		justify-content:center;
	}
	.xh-list.xh-list-h .xh-list-thumb{
		margin-right:0;
		width:45px;
		text-align:center;
	}
	.xh-list.xh-list-h .xh-list-text{
		flex:none;
	}
	.xh-list.xh-list-h .xh-list-option{
		display:none;
	}
	.xh-list.xh-list-h.xh-bigicon > li > a{
		flex-direction:column;
		align-items:center;
		width:100%;
	}
	.xh-list.xh-list-h.xh-bigicon > li .xh-list-thumb{
		flex:1;
		height:40px;
	}
	.xh-list.xh-list-h.xh-bigicon > li .xh-list-text{
		flex:1;
		text-align:center;
	}
	.xh-list.xh-list-h.xh-bigicon > li .xh-list-thumb > i{
		font-size:36px;
		width:40px;
		height:40px;
		margin:3px 0 0 0;
	}
	.xh-list.xh-list-h.xh-bigicon > li .xh-list-thumb > img{
		width:40px;
		height:40px;
		margin:0;
	}
	.xh-list.xh-list-h.xh-bigicon > li .xh-list-text > h4{
		line-height:120%;
	}
	.xh-list.xh-list-h.xh-bigicon > li .xh-list-text > p{
		display:none;
	}
/* List in holder */
@media screen and (max-width:800px){
	/* Tile List */
	.xh-holder .xh-list.xh-tile li{
		height:60px;
		margin:.5rem;
		display:inline-block;
	}
	.xh-holder .xh-list.xh-tile li + li{
		border-top:0;
	}
	.xh-holder .xh-list.xh-tile li a{
		padding:0;
	}
	.xh-holder .xh-list.xh-tile li .xh-list-thumb{
		display:inline-block;
		width:60px;
		
	}
	.xh-holder .xh-list.xh-tile li .xh-list-thumb i{
		font-size:60px;
		margin:0;
		width:100%;line-height:1;
	}
	.xh-holder .xh-list.xh-tile li .xh-list-text{
		display:inline-block;
		width:165px;
	}
	.xh-holder .xh-list.xh-tile li .xh-list-text h4{
		display:block;
		text-align:left;
		margin:6px 0 -.3rem .8rem;
		font-size:0.825rem;
		line-height:1;
	}
	.xh-holder .xh-list.xh-tile li .xh-list-text p{
		text-align:left;
		font-size:2.475rem;
		margin:0;
		padding-left:.5rem;
	}
}
}

/*= Header =*/
@media{
/* Small screen & Medium screen with portrait */
@media screen and (max-width:800px){
	
	.xh-header{
		position:fixed;
		top:0;
		width:100%;
		height:50px;
		color:white;
		background-color:#393a3f;	
		z-index:1;	
		display:flex;
		overflow:hidden;
	}

	/* Header BackBar */
	.xh-header-backbar{
		height:100%;
	}
	.xh-header-backbar a{
		display:inline-block;
		padding:0 10px;
		font-size:25px;
		line-height:50px;
		vertical-align:top;
		color:white;
		border-right:1px solid #2e2e32;
	}
	
	/* Header Brand */
	.xh-header-brand{display:none;}
	
	/* Header Title */
	.xh-header-title{
		flex:1;-webkit-flex:1;-moz-flex:1;
		display:inline-block;
		margin:0;
		padding:0 10px;
		font-size:1.3rem;
		height:50px;
		line-height:50px;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.xh-header-title h1{
		height:100%;
		margin:0;
		vertical-align:middle;
		font-weight:normal;
		font-size:1.4rem;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.xh-header-title img{
		height:1.4rem;
		margin-top:0.9rem;
		vertical-align:top;
	}
	/* symmetry */
	.xh-header.xh-symmetry .xh-header-title h1{
		text-align:center;
	}
	.xh-header.xh-symmetry .xh-header-brand{
		text-align:center;
	}
	.xh-header.xh-symmetry .xh-header-backbar a{
		border:0;
	}
	
	/* Header Toolbar */
	.xh-header-toolbar .xh-btn{
		color:white;
		font-size:1rem;
		line-height:50px;
		padding:0 10px;
		border:0;
		margin:0;
		border-radius:0;
		background-color:transparent;
	}
	.xh-header-toolbar .xh-btn.xh-primary,
	.xh-header-toolbar .xh-btn.xh-okey,
	.xh-header-toolbar .xh-btn.xh-warning,
	.xh-header-toolbar .xh-btn.xh-error{
		background-color:transparent;
	}
	.xh-header-toolbar .xh-btn + .xh-btn{
		margin-left:0;
	}
	.xh-header-toolbar .xh-btn > i + span{
		display:none;
	}
	.xh-header-toolbar .xh-btn:hover,
	.xh-header-toolbar .xh-btn:focus{
		color:#EEE;
		background-color:#111;
	}
	
	/* User Bar */
	.xh-header-userbar{display:none;}
}
/* Medium screen with landscape & Large screen */
@media screen and (min-width:801px){
	.xh-header{
		position:relative;
		height:51px;
		background-color:#F8F8F8;
		border-width:0 0 1px;
		border-style:solid;
		border-color:#DDD;
		color:#666;
		display:flex;
		padding:0 2rem;
	}
	.xh-header.xh-fixed{
		position:fixed;
		top:0;
		left:0;
		right:0;
	}

	/* BackBar */
	.xh-header-backbar{display:none;}
	
	/* Header Brand */
	.xh-header-brand{
		margin:0;
		padding:0 10px;
		font-size:1.6rem;
		height:50px;
		line-height:50px;
	}
	.xh-header-brand a{
		text-decoration:none;
		color:black
	}
	.xh-header-brand img{
		height:50px;
	}
	
	/* Header Title*/
	.xh-header-title{display:none;}

	/* Header Nav */
	.xh-header .xh-nav{
		display:inline-block;
		height:100%;
		margin:0;
		padding:0;
		flex:1;
		overflow:hidden;
	}
	.xh-header .xh-nav .xh-list{
		list-style:none;
		height:100%;
	}
	.xh-header .xh-nav .xh-list li{
		display:inline-block;
		height:100%;
	}
	.xh-header .xh-nav .xh-list li + li{
		border-top:0;
	}
	.xh-header .xh-nav .xh-list > li a{
		position:relative;
		display:block;
		text-decoration:none;
		color:black;
		line-height:50px;
		padding:0 10px;
	}
	.xh-header .xh-nav > li a:hover, .xh-nav > a:focus{
		text-decoration:none;
		background-color:#EEE;
	}
	.xh-header .xh-nav .xh-active > a{
		border-radius: 0;
		color: #0e90d2;
		background-color:#EEE;
	}
	.xh-header .xh-nav a:after{
		position: absolute;
		left: 50%;
		margin-left: -7px;
		bottom: -1px;
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		vertical-align: middle;
		border-bottom: 7px solid #f8f8f8;
		border-right: 7px solid transparent;
		border-left: 7px solid transparent;
		border-top: 0 dotted;
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
		opacity: 0;
		-webkit-transition: opacity .1s;
		transition: opacity .1s;
	}
	.xh-header .xh-nav .xh-active a:after{
		opacity: 1;
		border-bottom-color: #0e90d2;
	}
	.xh-header .xh-nav a:hover:after{
		opacity: 1;
		border-bottom-color: #666;
	}	
	.xh-header .xh-nav .xh-list i{display:none;}
	.xh-header .xh-nav .xh-list img{display:none;}

	/* Toolbar */
	.xh-header-toolbar{
		display:flex;
		align-items:center;
	}

	/* User Bar */
	.xh-header-userbar{
		display:flex;
		align-items:center;
		padding-left:0.3rem;
	}
	.xh-header-userbar .xh-btn{
		
	}
	.xh-header-userbar.xh-login .xh-btn:first-child{
		margin-right:0;
		border-radius: 5px 0 0 5px;
	}
	.xh-header-userbar.xh-login .xh-btn:last-child{
		margin-left:0;
		border-radius: 0 5px 5px 0;
	}
}
}

/*= SearchBar =*/
/* Small screen & Medium screen with portrait */
@media screen and (max-width:800px){
	.xh-header .xh-searchbar form{
		display:none;
	}
	.xh-searchbar.xh-active{
		width:100%;
		position: fixed;
		z-index: 10;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.6);
	}
	.xh-searchbar.xh-active form{
		width:100%;
		height:50px;
		display:flex;
		align-items:center;
		background-color:#393a3f;
		padding:0 .2rem;
		/* opacity:0;
		transition: opacity .2s; */
	}
	.xh-searchbar.xh-active form input{
		padding:0.4rem .3rem;
		flex:1;
		border-radius:4px 0 0 4px;
		vertical-align:middle;
		color:black;
		border:0;
		height:40px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
	}
	.xh-searchbar.xh-active form input:focus{
		outline:0;
	}
	.xh-searchbar.xh-active form button{
		height:40px;
		color:white;
		background-color:transparent;
		vertical-align:top;
		border-color:transparent;
		border-radius:0 4px 4px 0;
	}
	.xh-searchbar > .xh-btn{
		background-color:transparent;
		color:white;
		font-size:1.3rem;
		line-height:50px;
		padding:0 10px;
		border:0;
		margin:0;
		border-radius:0;
	}
	.xh-searchbar.xh-active > .xh-btn{display:none;}
}

/* Medium screen with landscape & Large screen */
@media screen and (min-width:801px){
	.xh-searchbar{
		display:inline-block;
		line-height:50px;
		padding:0 .3rem;
	}
	.xh-searchbar form{
		height:100%;
		display:flex;
		align-items:center;
	}
	.xh-searchbar > a{display:none;}
	.xh-searchbar input{
		padding: .5rem;
		font-size: 1rem;
		line-height: 1.15;
		color: #555;
		vertical-align: middle;
		background-image: none;
		border: 1px solid #e6e6e6;
		border-radius: 5px 0 0 5px;
		-webkit-appearance: none;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}
	.xh-searchbar input:focus{
		border-color: #3bb4f2;
		outline:0;
	}
	.xh-searchbar button{
		height:36px;
		border-color:#e6e6e6;
		border-radius:0 5px 5px 0;
	}

	/* Medium Screen with portrait */
	@media screen and (min-width:641px) and (max-width:940px){
		.xh-searchbar{display:none;}
	}
	/* Medium screen with landscape */
	@media screen and (min-width:941px) and (max-width:1280px){
		.xh-searchbar input{
			width:0;
			transition:width .5s;
		}
		.xh-searchbar input:focus{
			width: 195px;
		}
	}
}

/*= Nav =*/
@media screen and (max-width:800px){
	.xh-nav{
		position:fixed;
		bottom:0;
		width:100%;
		height:53px;
		background-color:#fcfcfc;
		z-index:2;
	}
	.xh-nav .xh-list{
		margin:0;
		display:flex;display:-webkit-flex;
		height:100%;
	}
	.xh-nav .xh-list > li{
		flex:1;
		min-height:auto;
	}
	.xh-nav .xh-list > li + li{border:0;}
	.xh-nav .xh-list li > a{
		text-decoration:none;
		text-align:center;
		font-size:0.75rem;
		color:#999999;
	}
	.xh-nav .xh-list li.xh-active > a{
		color:#46c01b;
	}
	.xh-nav .xh-list li div{
		display:inline-block;
		width:50px;
		height:auto;
		text-align:center;
		margin:4px auto 0 auto;
		position:relative;	
	}
	.xh-nav .xh-list li div i{
		display:block;
		width:100%;
		margin:0;
		font-size:1.6rem;
	}
	.xh-nav .xh-list li div img{
		display:block;
		width:27px;
		margin: 0 auto;
		margin-top:-2px;
	}
	.xh-nav.xh-only-icon li div span{display:none;}
	.xh-nav.xh-only-icon li div i{
		font-size:2rem;
		line-height:1.3;
	}
	/* Badge */
	.xh-nav .xh-list li div .xh-badge{
		color:white;
		vertical-align:top;
		position:absolute;
		top:-0.15rem;
		right:-0.1rem;
	}
}
@media screen and (min-width:801px){
	.xh-nav .xh-list li a{
		width:auto;
		display:block;
		color:#576b95;
		line-height:45px;
	}
	.xh-nav .xh-lsit li a:hover,
	.xh-nav .xh-list li a:focus{
		background-color:#EEE;
	}
	.xh-nav .xh-list li.xh-active a{
		color:#0e90d2;
	}
	.xh-nav .xh-list .xh-badge{
		display:none;
	}
}
/* List Items */
@media screen and (max-width:640px){
	.xh-nav .xh-list li:nth-child(n+6){
		display:none;
	}
}
@media screen and (min-width:641px) and (max-width:800px){
	.xh-nav .xh-list li:nth-child(n+9){
		display:none;
	}
}
@media screen and (min-width:801px){
	.xh-nav .xh-list li:nth-child(n+21){
		display:none;
	}
}

/*= Content =*/
@media{
	.xh-content{
		flex:1;
		overflow:hidden;
	}
	
	/* ListView */
	.xh-content > .xh-list{
		display:flex;
		flex-wrap:wrap;
		margin-top: 1.3rem;
	}
	.xh-content > .xh-list li{
		max-width:480px;
		width: 100%;
		margin: 5px 10px;
	}
	.xh-content > .xh-list .xh-list-divider{display:none;}
	@media screen and (min-width:2000px){
		.xh-content > .xh-list{
			width:2000px;
		}
	}
	@media screen and (min-width:1500px) and (max-width:1999px){
		.xh-content > .xh-list{
			width:1500px;
		}
	}
	@media screen and (min-width:1000px) and (max-width:1499px){
		.xh-content > .xh-list{
			width:1000px;
		}
	}
	@media screen and (max-width:999px){
		.xh-content > .xh-list{
			max-width:480px;
			width:100%;
			margin-top:0;
		}
		.xh-content > .xh-list li{
			margin:0;
		}
		.xh-content > .xh-list .xh-list-divider{
			display:list-item;
			background-color: #ebebeb;
		}
	}
/* Small Screen */
@media screen and (max-width:800px){
	.xh-content{
		width:100%;
		position:absolute;
		margin: 50px 0 80px 0;
	}
}
}

/*= Drawer =*/
.xh-drawer{
	background-color:white;
}
@media screen and (max-width:800px){
	.xh-drawer{display:none;}
}
@media screen and (min-width:801px){
	.xh-drawer{
		display:inline-flex;
		width:300px;
	}
	.xh-drawer .xh-list{
		width:300px;
		position:fixed;
		top:51px;
		left:0;
	}
	.xh-drawer .xh-list li a{
		height:50px;
		display:flex;
		align-items:center;
	}
	.xh-drawer .xh-list li.xh-active > a{
		color:#0e90d2;
	}
	.xh-drawer .xh-list li.xh-active > a .xh-list-rotater{
		transform:rotate(90deg);
	}
	.xh-drawer .xh-list li.xh-active > .xh-list{
		height:auto;
	}
	.xh-drawer .xh-list li i:not(.xh-list-rotater){
		font-size:1.2rem;
	}
	.xh-drawer .xh-list li span:not([class]){
		flex:1;
	}
	.xh-drawer .xh-list li .xh-list-rotater{
		color:#D8D8D8;
		font-size:0.7rem;
		transition:transform .3s;
	}
}
@media screen and (min-width:801px) and (max-width:1280px){
	.xh-drawer{
		width:50px;
	}
	.xh-drawer .xh-list{width:50px;}
	.xh-drawer .xh-list li a > span,
	.xh-drawer .xh-list li a > .xh-badge,
	.xh-drawer .xh-list li a > .xh-list-rotater{
		display:none;
	}
}

/*= Article =*/
@media{
	.xh-article{
		flex:1;
		overflow:hidden;
	}
	.xh-article h1,
	.xh-article h2,
	.xh-article h3,
	.xh-article h4,
	.xh-article h5,
	.xh-article h6{
		font-weight:normal;
	}
	/* Article Head */
	.xh-article-head h1{
		font-size:1.4rem;
		margin:1rem 0 .3rem 0;
	}
	@media screen and (max-width:800px){
		.xh-article-head{display:none;}
	}
	@media screen and (min-width:801px){
		.xh-article-head h1{
			font-size:1.6rem;
		}
	}
	.xh-article h2{
		font-size:1.3rem;
		margin:1rem 0 .3rem 0;
	}
	.xh-article  h3{
		font-size:1.2rem;
		margin:1rem 0 .3rem 0;
	}
	.xh-article  h4{
		font-size:1.15rem;
		margin:1rem 0 .3rem 0;
	}
	.xh-article  h5{
		font-size:1.1rem;
		margin:1rem 0 .3rem 0;
	}
	.xh-article h6{
		font-size:1.05rem;
		margin:1rem 0 .3rem 0;
	}
	
	/* Article Body */
	/* Headings */
	.xh-article-body > h2{
		counter-increment: header2;
		counter-reset: header3;
	}
	.xh-article-body > h2:before{
		color:#888;
		font-weight:normal;
		content: counter(header2)". ";
	}
	.xh-article-body > h3{
		counter-increment: header3;
	}
	.xh-article-body > h3:before{
		color:#888;
		font-weight:normal;
		content: counter(header2)"."counter(header3)" ";
	}
	.xh-article-body > h2.xh-withoutnum{
		counter-increment: none;
	}
	.xh-article-body > h2.xh-withoutnum:before{
		content: none;
	}
	.xh-article-body > h3.xh-withoutnum{
		counter-increment: none;
	}
	.xh-article-body > h3.xh-withoutnum:before{
		content: none;
	}
	.xh-article.xh-withoutnum .xh-article-body > h2,
	.xh-article.xh-withoutnum .xh-article-body > h3{
		counter-increment: none;
	}
	.xh-article.xh-withoutnum .xh-article-body > h2:before,
	.xh-article.xh-withoutnum .xh-article-body > h3:before{
		content: none;
	}
	.xh-article-h2{/* ? */
		font-family:SimHei;
		margin:0.83em 0;
		font-size:1.3rem;
	}
	/* Paragragh */
	.xh-article-body > p{
		text-indent:2em;
		margin:.7rem 0 0.5rem 0;
	}
	.xh-article-body > p.xh-withoutindent,
	.xh-article.xh-withoutindent > p{
		text-indent:0;
	}
	/* Definition List */
	.xh-article-dl{
		display:inline-block;
		vertical-align:top;
	}
	.xh-article-dl + .xh-article-dl{
		margin-left:10px;
	}
	.xh-article-dl dt{
		color:#999;
	}
	.xh-article-dl dd{
		color:#333;
	}
	.xh-article-dl dd + dt{
		border-top:1px dashed rgba(128,128,128,.15);
		padding-top:8px;
	}

	/* Superlink */
	.xh-article p a{
		text-decoration:none;
	}
	.xh-article p a:not(.xh-btn):link{
		color:#10aeff;
	}
	.xh-article p a:visited{
		color:#10aeff;
	}
	.xh-article-body > p > a.xh-external::after{
		content:" \f35d";
		font-weight:900;
		font-family: "Font Awesome 5 Free";
	}

	/* Keyboard */
	.xh-article-body kbd{
		border:1px solid gray;
		border-radius:3px;
		padding: 0 2px;
	}

	/* Quote */
	.xh-article-body > p q{
		border-bottom:1px dotted rgba(128,128,128,.4);
	}
	.xh-article-body > p .xh-quote{
		font-family:Georgia,'KaiTi','FangSong',BiauKai;
		border-bottom:1px dotted rgba(128,128,128,.4);
	}
	.xh-article-body p .xh-quote:before{
		content:'“';
	}
	.xh-article-body p .xh-quote:after{
		content:'”';
	}
	.xh-article-body > blockquote{
		font-family:Georgia,'KaiTi','FangSong',BiauKai;
		font-size:.9em;
		padding:3px 0 3px 10px;
		border-left:4px dotted #DDD;
	}
	.xh-article-body > blockquote p:first-of-type{
		margin-top:0;
	}
	.xh-article-body > blockquote p:last-of-type{
		margin-bottom:0;
	}
	.xh-article-body > blockquote.xh-withoutindent{
		margin:0;
	}
	/* Figure */
	.xh-article-body > figure{
		max-width:100%;
		margin: auto 0;
	}
	.xh-article-body > figure img{
		max-width:100%;
	}
	.xh-article-body > figure figcaption{
		text-align:center;
		font-size:.85em;
		font-family:Georgia,'KaiTi','FangSong',BiauKai;
	}
	.xh-article-body > img{
		max-width:100%;
	}

	/* Code */
	.xh-article-body > p code,
	.xh-article-body .xh-code{
		font-family:"Courier New",monospace;
		display:inline-block;
		padding: 1px 2px 3px 2px;
		margin: 0 2px;
		font-size:1em;
		background-color:pink;
		vertical-align:middle;
		border-radius:3px;
		text-indent:0;
		overflow:hidden;
	}
	.xh-article-body > code{
		display:block;
		width:100%;
		height:auto;
		font-family:"Courier New",monospace;
		font-size:0.80em;
		overflow-x:auto;
		overflow-y:hidden;
		background-color:#DDD;
		padding:0 5px;
		border-radius:3px;
		margin:.5em 0;
	}
	.xh-article-body > code pre{
		font-family:"Courier New",monospace;
		max-width:100%;
		padding-right:5px;
		margin:5px 0;
	}
	.xh-article-body > code pre b{
		color:red;
	}
	/* Tip Box */
	.xh-article-body > samp{
		display:block;
		width:100%;
		border: 3px double gray;
		font-size:.9em;
		font-family:KaiTi,"Courier New",monospace;
		padding:0 5px;
	}
	.xh-article-body > samp + samp{
		margin-top:.2rem;
	}
	.xh-article-body > samp.xh-okey i{
		float:left;
		font-size:2.2em;
		color:#09c100;
		margin-top:1rem;
	}
	.xh-article-body > samp.xh-warning i{
		float:left;
		font-size:2.2em;
		color:#FFA800;
		margin-top:1rem;
	}
	.xh-article-body > samp.xh-error i{
		float:left;
		font-size:2.2em;
		color:#ff5353;
		margin-top:1rem;
	}
/* Small screen */
@media screen and (max-width:640px){
	.xh-article{
		padding: 0 8px;
	}
}
/* Medium screen with portrait */
@media screen and (min-width:641px) and (max-width:800px){
	.xh-article{
		padding: 5px 10px;
	}
}
/* Medium & Large Screen */
@media screen and (min-width:801px){
	.xh-article{
		padding:0 20px 20px 25px;
	}
	.xh-article-head{
		border-bottom:1px solid rgba(128,128,128,.15);
	}	
	/* Heading */	
	.xh-article code{
		font-size:1rem;
	}
}
/* Thesis Article */
@media screen{	
	.xh-article.xh-thesis{
		background-color:khaki;
	}
	.xh-article.xh-thesis h1,
	.xh-article.xh-thesis h2,
	.xh-article.xh-thesis h3{
		font-family:SimHei;
	}
	.xh-thesis .xh-article-body > h4{
		counter-increment: header4;
		counter-reset: header5;
	}
	.xh-thesis .xh-article-body > h4:before{
		color:#888;
		font-weight:normal;
		content: counter(header2)"."counter(header3)"."counter(header4)". ";
	}
	.xh-thesis .xh-article-body > h5{
		counter-increment: header5;
	}
	.xh-thesis .xh-article-body > h5:before{
		color:#888;
		font-weight:normal;
		content: counter(header2)"."counter(header3)"."counter(header4)"."counter(header5)" ";
	}
	.xh-thesis .xh-article-body > figure{
		margin-left:0;
	}
	.xh-thesis .xh-article-body > figure img{
		max-width:100%;
	}
	.xh-thesis .xh-article-body > .xh-table{
		text-align:center;
	}
	.xh-thesis .xh-article-body > p{
		line-height:1.6;
		margin:0;
	}
	.xh-thesis .xh-article-body .xh-reference{
		font-size:.9em;
		list-style:none;
		padding-left:0;
	}
	.xh-thesis .xh-article-body .xh-reference li{
		counter-increment: ref;
		padding-left:2em;
		text-indent:-2em;
	}
	.xh-thesis .xh-article-body .xh-reference li:before{
		content: "["counter(ref)"] ";
	}	
}
}

/*= Catalog =*/
.xh-catalog h2{
	font-weight:normal;
	text-align:center;
}
@media screen and (max-width:800px){
	.xh-catalog{
		display:none; /* default */
		position: fixed;
		z-index: 2;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		opacity:0;
		transition: opacity .2s;-webkit-transition: opacity .2s;
	}	
	.xh-catalog > .xh-list{
		width:90%;
		max-height:90%;
		overflow-y:scroll;
		padding-left:10px;
		position:relative;
		top:10px;
		counter-reset: section;
	}
	.xh-catalog > .xh-list > li:before{
		counter-increment:section;
		content: counters(section, ".") " ";
		float:left;
		line-height:40px;
	}
	.xh-catalog > .xh-list > li > .xh-list{
		height:auto;
		list-style-type:none;
		padding-left:1.2rem;
		font-size:.9em;
		counter-reset: section;
		background-color:white;
	}
	.xh-catalog > .xh-list > li > .xh-list > li:before{
		counter-increment:section;
		content: counters(section, ".") " ";
		float:left;
		line-height:40px;
	}
	.xh-catalog .xh-list li{
		min-height:auto;
	}
	.xh-catalog .xh-list li.xh-active{
		color:#0e90d2;
	}
	.xh-catalog .xh-list li a{
		line-height:40px;
	}
}
@media screen and (min-width:801px) and (max-width:1280px){
	.xh-catalog{
		width:150px;
		font-size:0.9rem;
	}
	.xh-catalog > .xh-list{
		width:150px;
		padding-left:10px;
		position:fixed;
		top:51px;
		right:0;
		counter-reset: section;
	}
	.xh-catalog > .xh-list > li:before{
		counter-increment:section;
		content: counters(section, ".") " ";
		float:left;
		line-height:30px;
	}
	.xh-catalog > .xh-list > li > .xh-list{
		height:auto;
		list-style-type:none;
		padding-left:1.2rem;
		font-size:.9em;
		counter-reset: section;
		background-color:white;
	}
	.xh-catalog > .xh-list > li > .xh-list > li:before{
		counter-increment:section;
		content: counters(section, ".") " ";
		float:left;
		line-height:30px;
	}
	.xh-catalog .xh-list li{
		min-height:auto;
	}
	.xh-catalog .xh-list li.xh-active{
		color:#0e90d2;
	}
	.xh-catalog .xh-list li a{
		line-height:30px;
	}
}
@media screen and (min-width:1281px){
	.xh-catalog{
		width:200px;
		padding: 0 5px;
		font-size:0.9rem;
		background-color:white;
	}
	.xh-catalog > .xh-list{
		width:200px;
		padding-left:10px;
		position:fixed;
		top:51px;
		right:0;
		counter-reset: section;
	}
	.xh-catalog > .xh-list > li:before{
		counter-increment:section;
		content: counters(section, ".") " ";
		float:left;
		line-height:30px;
	}
	.xh-catalog > .xh-list > li > .xh-list{
		height:auto;
		list-style-type:none;
		padding-left:1.2rem;
		font-size:.9em;
		counter-reset: section;
		background-color:white;
	}
	.xh-catalog > .xh-list > li > .xh-list > li:before{
		counter-increment:section;
		content: counters(section, ".") " ";
		float:left;
		line-height:30px;
	}
	.xh-catalog .xh-list li{
		min-height:auto;
	}
	.xh-catalog .xh-list li.xh-active{
		color:#0e90d2;
	}
	.xh-catalog .xh-list li a{
		line-height:30px;
	}
}

/*= Footer =*/
@media{
.xh-footer{
	width:100%;
	text-align:center;
}
.xh-footer > div{
	color: #7f8C8D;
    margin: 0;
    padding: 15px 0;
    text-align: center;
    background: #2D3E50;
}
/* Small screen & Medium screen with portrait */
@media screen and (max-width:1280px){
	.xh-footer{display:none;}
}
}

/*= Feedback =*/
@media{
.xh-feedback{
	display:none;
}
.xh-feedback a{
	text-decoration:none;
}
.xh-feedback-mask{
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
	opacity:0;
	transition: opacity .2s;-webkit-transition: opacity .2s;
}
/* Feedback Message */
.xh-feedback-msg{
	display:none;	/* default */
	position:fixed;
	width:40%;
	left:30%;right:30%;
	top:20%;
	z-index:12;
	border-radius:8px;
	background-color:white;
	text-align:center;
	box-sizing:border-box;
	padding:1rem 0.5rem;
	opacity:0;
	transform:scale(0.9,0.9);
	transition:transform .5s,opacity .5s;
}
@media screen and (max-width:640px){
	.xh-feedback-msg{
		width:80%;
		left:10%;
		right:10%;
		border-radius:3px;
	}
}
@media screen and (min-width:641px) and (max-width:800px){
	.xh-feedback-msg{
		width:72%;
		left:14%;
		right:14%;
		border-radius:5px;
	}
}
.xh-feedback-msg h4{
	font-weight:normal;
}
.xh-feedback-msg i{
	font-size:5rem;
}
.xh-feedback-msg.xh-okey i{
	color:#09c100;
}
.xh-feedback-msg.xh-warning i{
	color:#FFA800;
}
.xh-feedback-msg.xh-error i{
	color:#ff5353;
}
.xh-feedback-msg p{
	color:#999;
}
/* Feedback Action */
.xh-feedback-action{
	display:none;	/* default */
	position: fixed;
	width: 100%;
    left: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 14;
    background-color: #EFEFF4;
	transform:translateY(100%);
	transition: transform .2s;
}
.xh-feedback-action ul{
	list-style:none;
	padding-left:0;
}
.xh-feedback-action ul li{
}
.xh-feedback-action ul li a{
	display:block;
	color:black;
	line-height:45px;
	padding-left:1rem;
}
.xh-feedback-action ul li a:hover{
	background-color:rgba(197,234,207,.4);
}
.xh-feedback-action ul li a:focus{
	font-weight:bold;
}
.xh-feedback-action i{
	margin:0 .5rem;
}

}

/*= Table =*/
@media{
.xh-table{
	width:100%;
	border-collapse:collapse;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin:.5rem 0;
}
.xh-table > caption{
	font-size:.85em;
	font-family:Georgia,'KaiTi','FangSong',BiauKai;
}
.xh-table > thead{
	border-bottom: 1px solid black;
}
.xh-table.xh-table-left th{
	text-align:left;
}
.xh-table.xh-table-right th{
	text-align:right;
}
.xh-table tbody tr + tr{
	border-top:1px solid rgba(125,125,125,.1);
}
.xh-table tbody td{
	padding:.3rem;
}
.xh-table tbody td a{
	text-decoration:none;
	color:#0e90d2;
	/* display:block; */
}
.xh-table tbody td a:hover{
	text-decoration:underline;
}
.xh-table tbody td.xh-table-tool{
	font-size:.85em;
	height:100%;
}
.xh-table tbody td.xh-table-tool a{
	line-height:1.7rem;
}
.xh-table-tool .xh-error{
	color:#ff5353;
}
/* Table in home-admin */
.xh-home-admin .xh-holder .xh-table thead tr th{
	font-weight:normal;
}
@media screen and (max-width:800px){
	.xh-home-admin .xh-holder .xh-table{
		text-align:center;
		border:0;
	}
	.xh-home-admin .xh-holder .xh-table thead{
		border-bottom:2px solid rgba(125,125,125,.0);
	}
	.xh-home-admin .xh-holder .xh-table thead tr th{
		height:40px;
	}
	.xh-home-admin .xh-holder .xh-table thead tr th + th,
	.xh-home-admin .xh-holder .xh-table tbody tr td + td{
		border-left:1px solid rgba(125,125,125,.0);
	}
	.xh-home-admin .xh-holder .xh-table thead tr th,
	.xh-home-admin .xh-holder .xh-table tbody tr td{
		background-clip:padding-box;
		background-color:rgba(0,0,0,.2);
	}
	.xh-table-tool span{display:none;}
	@media screen and (max-width:640px){
		.xh-home-admin .xh-holder .xh-table thead tr th:nth-child(n+4),
		.xh-home-admin .xh-holder .xh-table tbody tr td:nth-child(n+4){
			/*display:none;*/
		}
		.xh-home-admin .xh-holder .xh-table thead tr th.xh-table-tool,
		.xh-home-admin .xh-holder .xh-table tbody tr td.xh-table-tool{
			display:table-cell;
		}
	}
	.xh-home-admin .xh-holder .xh-table thead tr th:nth-child(n+6),
	.xh-home-admin .xh-holder .xh-table tbody tr td:nth-child(n+6){
		/*display:none;*/
	}
	.xh-home-admin .xh-holder .xh-table thead tr th:last-child,
	.xh-home-admin .xh-holder .xh-table tbody tr td.xh-table-tool{
		display:table-cell;
	}
	.xh-home-admin .xh-holder .xh-table .xh-table-btn .xh-btn span{
		display:none;
	}
}
@media screen and (min-width:801px){
	.xh-home-admin .xh-holder .xh-table{
		text-align:center;
		border:0;
		font-size:1.1rem;
	}
	.xh-home-admin .xh-holder .xh-table thead{
		border-bottom:2px solid rgba(125,125,125,.0);
	}
	.xh-home-admin .xh-holder .xh-table thead tr th{
		height:40px;
	}
	.xh-home-admin .xh-holder .xh-table thead tr th + th,
	.xh-home-admin .xh-holder .xh-table tbody tr td + td{
		border-left:1px solid rgba(125,125,125,.0);
	}
	.xh-home-admin .xh-holder .xh-table thead tr th,
	.xh-home-admin .xh-holder .xh-table tbody tr td{
		background-clip:padding-box;
		background-color:rgba(10,10,10,.15);
	}
}
}

/*= Pager =*/
@media screen and (max-width:640px){
	.xh-pager{
		list-style:none;
		padding-left:0;
		display:flex;
		justify-content:center;
		font-size:.7rem;
	}
	.xh-pager li{
		min-width:40px;
		height:35px;
		display:flex;
	}
	.xh-pager li + li{
		margin-left:4px;
	}
	.xh-pager li:not([class]){
		display:none;
	}
	.xh-pager li a{
		display:inline-block;
		padding:0 1rem;
		font-size:0.9rem;
		line-height:35px;
		border:1px solid #DDD;
		border-radius:5px;
		outline:0;
		transition:background-color .3s ease-out, border-color .3s ease-out;
	}
	.xh-pager li a:hover{
		color:#444;
		border-color:#C7C7C7;
	}
	.xh-pager li.xh-active a{
		color:white;
		border-color:transparent;
		background-color:#1AAD19;
	}
}
@media screen and (min-width:641px){
	.xh-pager{
		list-style:none;
		padding-left:0;
		display:flex;
		justify-content:center;
		font-size:.7rem;
	}
	.xh-pager li{
		min-width:40px;
		height:35px;
		display:flex;
	}
	.xh-pager li + li{
		margin-left:4px;
	}
	.xh-pager li a{
		display:block;
		width:100%;
		height:100%;
		padding:0 5px;
		text-align:center;
		line-height:35px;
		border: 1px solid #DDD;
	}
	.xh-pager li a:hover{
		background-color:#d8d8d8;
	}
	.xh-pager li.xh-active{
		background-color:#1AAD19;
	}
	.xh-pager li.xh-active a{
		color:white;
	}
}

/*= Form =*/
@media{
.xh-form{
	padding:15px 10px 1rem 10px;
}
@media screen and (max-width:800px){
	.xh-form{
		padding:15px 6px 1rem 6px;
	}
}
/* Field */
.xh-form-field{
	display:flex;
	flex-wrap: wrap;
	align-items:center;
	padding: .5rem 0;
}
.xh-form-field:first-child{padding-top:0;}
.xh-form-field.xh-disabled {
	color:#AAA;
}
/* Label */
.xh-form-field > label{
	width:120px;
	line-height:45px;
	border:1px dashed rgba(128,128,128,.6);
	border-right:0;
	border-radius:5px 0 0 5px;
	padding:0 0.65rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-size: .9em;
}
@media screen and (max-width:800px){
	.xh-form-field > label{
		width:100px;
		padding:0 .55rem;
	}
}
@media screen and (min-width:801px) and (max-width:1280px){
	.xh-form-field > label{
		width:114px;
		padding:0 .55rem;
	}
}
.xh-error > label{
	border-color:#FF5353;
}
.xh-warning > label{
	border-color:#FFA800;
}
.xh-okey > label{
	border-color:#09C100;
}
.xh-readonly > label{
	background-color:#DDD;
}
.xh-required > label{
	background-color:#FFE9E9;
}
.xh-disabled > label{
	background-color:#EEE;
	cursor:not-allowed;
}
/* Control */
.xh-form-control{
	max-width:600px;
	border-radius:0 5px 5px 0;
}
@media screen and (min-width:801px){
	.xh-form-control{
		width:600px;
	}
}
@media screen and (max-width:800px){
	.xh-form-control{
		flex:1;
	}
}
.xh-error .xh-form-control{
	background-color:#FF5353;
}
.xh-warning .xh-form-control{
	background-color:#FFA800;
}
.xh-okey .xh-form-control{
	background-color:#09C100;
}
.xh-readonly .xh-form-control{
	color:white;
	background-color:rgba(128,128,128,.6);
}
/* Description */
.xh-form-des{
	padding-left:10px;
	font-size:.9rem;
}
.xh-error .xh-form-des{
	color:#FF5353;
}
.xh-warning .xh-form-des{
	color: #FFA800;
}
.xh-okey .xh-form-des{
	color:#09C100;
}
@media screen and (max-width:1280px){
	.xh-form-des{
		width:100%;
		display:none;
	}
	.xh-error .xh-form-des,
	.xh-warning .xh-form-des{
		display:block;		
	}
}
/* Controls */
/* input */
.xh-form input[type=text],.xh-form input[type=tel],.xh-form input[type=password],.xh-form input[type=number],.xh-form input[type=email],
.xh-form input[type=color],.xh-form input[type=date],.xh-form input[type=datetime-local],.xh-form input[type=url],
.xh-form input[type=month],.xh-form input[type=week],.xh-form input[type=range]{
	flex:1;
	width:100%;
    border: 0;
	border-bottom:1px solid transparent;
	border-radius:0 5px 5px 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
    outline: 0;
    -webkit-appearance: none;
	padding-left:10px;
    font-size: inherit;
    color: inherit;
	background-color:white;
	height:47px;
    line-height: 46px;
	padding:0 0.65rem;
}
.xh-form input[type=text]:focus,.xh-form input[type=tel]:focus,.xh-form input[type=password]:focus,.xh-form input[type=number]:focus,
.xh-form input[type=email]:focus,.xh-form input[type=color]:focus,.xh-form input[type=date]:focus,.xh-form input[type=datetime-local]:focus,.xh-form input[type=url]:focus,.xh-form input[type=month]:focus,.xh-form input[type=week]:focus,.xh-form input[type=range]:focus
{
	background-color:rgba(197,234,207,.4);
}
.xh-readonly .xh-form-control input{
	box-shadow:none;
	background-color:transparent;
}
.xh-readonly .xh-form-control input:focus{
	box-shadow:none;
	background-color:transparent;
}
.xh-disabled .xh-form-control input{
	background-color:transparent;
	cursor:not-allowed;
}
.xh-okey .xh-form-control input,
.xh-warning .xh-form-control input,
.xh-error .xh-form-control input{
	color:white;
	background-color:transparent;
}
/* select */
.xh-form-select{
	position:relative;
}
.xh-form-select select{
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
	padding-left:10px;
	-webkit-appearance: none;
    border: 0;
	border-bottom:1px solid transparent;
    outline: 0;
    background-color: white;
    width: 100%;
    font-size: inherit;
    height: 100%;
    line-height: 46px;
    padding-left: 15px;
	border-radius:0 5px 5px 0;
}
.xh-form-select:after{
	content: " ";
    display: inline-block;
    height: 10px;
    width: 10px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -4px;
}
.xh-form-select select:focus{
	background-color:rgba(197,234,207,.4);
}
.xh-readonly .xh-form-select select{
	box-shadow:none;
	background-color:transparent;
}
.xh-disabled .xh-form-select select{
	background-color:transparent;
	cursor:not-allowed;
}
/* Radio & Checkbox */
.xh-form-checkbox{
	display:flex;
}
.xh-form-checkbox label{
	flex:1;
	line-height:45px;
	height:auto;
	align-items:center;
}
.xh-form-checkbox label input{
	display:none;
}
.xh-form-checkbox label span{
	width:100%;
	display:inline-block;
	border-bottom:1px solid transparent;
	border-radius:0;
	padding:0;
	text-align:center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	background-color:white;
}
.xh-form-checkbox label:last-child > span{
	border-radius: 0 5px 5px 0;
}
.xh-form-checkbox label input:checked + span{
	color:white;
	background-color:#04BE02;
	font-weight:bold;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
	transition: background-color 0.45s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.xh-readonly .xh-form-checkbox label input + span{
	background-color:transparent;
	box-shadow:none;
}
.xh-disabled .xh-form-checkbox label input + span{
	background-color:transparent;
}
/* Switcher */
.xh-form-switcher{
	position: relative;
	height:47px;
	line-height:47px;
	margin-top:4px;
    border-bottom: 1px solid #DFDFDF;
    outline: 0;padding:0;
	border-radius: 0 5px 5px 0;
    box-sizing: border-box;
    background-color: #DFDFDF;
    -webkit-transition: background-color 0.1s, border 0.1s;
    transition: background-color 0.1s, border 0.1s;
	-webkit-appearance: none;appearance: none;
	width:100%;
		border-radius:0 5px 5px 0;
		line-height:46px;
		padding:0 0.65rem;
}
.xh-form-switcher:checked{
	border-color: #04BE02;
    background-color: #04BE02;
}
.xh-form-switcher:before{
	content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 58px;
    height: 30px;
    border-radius: 15px;
    background-color: #FDFDFD;
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.xh-form-switcher:after{
	content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.xh-form-switcher:checked:before{
    transform: scale(0);
}
.xh-form-switcher:checked:after{
    transform: translateX(33.3%);
}
.xh-form-field .xh-form-switcher:before{
	content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 47px;
    border-radius: 0 5px 5px 0;
    background-color: #FDFDFD;
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.xh-form-field .xh-form-switcher:after{
	content: "· · · · ·";
	text-align:center;
	text-shadow: 0px 0px 5px #000;
	color:#CCC;
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 45px;
    border-radius: 0 5px 5px 0;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
/* Textarea */
.xh-form-field.xh-form-textarea > label{
	height:100px;
	line-height:1.47;
	white-space:normal;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
.xh-form-textarea .xh-form-control{
	height:100px;
}
.xh-form-textarea textarea{
	width:100%;
	height:100%;
    border: 0;
	border-radius:0 5px 5px 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
    outline: 0;
    -webkit-appearance: none;
	padding:0.2rem .6rem 0 .3rem;
    font-size: .9em;
    color: inherit;
}
.xh-form-textarea textarea:focus{
	background-color:rgba(197,234,207,.4);
}
.xh-readonly.xh-form-textarea .xh-form-control textarea{
	box-shadow:none;
	background-color:transparent;
}
.xh-disabled.xh-form-textarea .xh-form-control textarea{
	background-color:transparent;
	cursor:not-allowed;
}
/* Form File */
.xh-form-field .xh-form-control input[type=file]{
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
	border-bottom: 1px solid transparent;
	background-color:white;
	position:relative;
	border-radius:0 5px 5px 0;
	width:100%;
	line-height:46px;
	padding-left:10px;
}
.xh-form-field .xh-form-control input[type=file]:focus{
	outline:0;
	background-color:rgba(197,234,207,.4);
}
.xh-disabled .xh-form-control input[type=file]{
	background-color:transparent;
	cursor:not-allowed;
}
/* Progress */
.xh-form-progress{
	height:20px;
	padding: 0 0 1rem 0;
}
.xh-form-progress > label{display:none;}
.xh-form-progress progress{
	width:100%;
	height:18px;
	border-radius: 1px;
}
@media screen and (min-width:801px){
	.xh-form-progress progress{
		width:714px;
	}
}
@media screen and (min-width:1281px){
	.xh-form-progress progress{
		width:720px;
	}
}
progress::-webkit-progress-bar {
	border:1px solid #09c100;
	background:#FFF;
}
progress::-moz-progress-bar,
progress::-webkit-progress-value { 
	background:#09c100;
}
/* Vertical Field */
.xh-form-field.xh-vertical{
	display:block;
}
.xh-form-field.xh-vertical > label{
	width:100%;
	max-width:720px;
	display:block;
	border-right:1px dashed rgba(128,128,128,.6);
	border-bottom:0;
	border-radius:5px 5px 0 0;
}
.xh-form-field.xh-vertical > .xh-form-control{
	width:100%;
	max-width:720px;
	display:block;
}
.xh-form-field.xh-vertical > .xh-form-control input{
	border-radius:0 0 5px 5px;
}
.xh-form-field.xh-vertical > .xh-form-des{
		display:block;
		width:100%;
		max-width:720px;
		padding-left:0;
		font-size:.7em;
		margin-top:.5rem;
	}
/* form tip */
.xh-form-tip{
	font-size:.7em;
	color:#BBB;
	line-height:150%;
	margin:0;
}
.xh-form-tip.xh-error{
	color:#ff5353;
}
.xh-form-tip.xh-warning{
	color:#FFA800;
}
/* Form Button */
.xh-form-button .xh-btn{
	margin-top:.8rem;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);	
}
@media screen and (max-width:640px){
	.xh-form-button .xh-btn{
		display:block;
		width:100%;
		height:45px;
	}
	.xh-form-button .xh-btn + .xh-btn{
		margin-left:0;
		margin-top:.6rem;
	}
}
@media screen and (min-width:641px){
	.xh-form-button .xh-btn{
		display:inline-block;
		width:300px;
		height:45px;
	}
}
.xh-form-button .xh-btn:active,
.xh-form-button .xh-btn:focus{
	outline:0;
}
.xh-form-button .xh-btn.xh-disabled{
	background-color:#D4D4D4;
	color: #EEE;
}

/*= Slider =*/
@media screen {
	.xh-slider{
		width:100%;
		overflow:hidden;
		position:relative;
	}
	.xh-slider .xh-slide{
		list-style:none;
		padding:0;
		margin:0;
		display:flex;
	}
	.xh-slider .xh-slide li{
		width:100%;
		display:inline-block;
	}
	.xh-slider .xh-slide li:nth-child(n+2){
		display:none;
	}
	.xh-slider .xh-slide li a{
		display:block;
	}
	.xh-slider .xh-slide li a img{
		width:100%;
	}
	/* Text span */
	.xh-slider .xh-slide li a span{
		position:absolute;
		left:0.8rem;
		bottom:.6rem;
	}
	@media screen and (max-width:800px){
		.xh-slider .xh-slide li a span{
			font-size:.7em;
		}
	}
	/* Pager */
	.xh-slider .xh-pager{
		position:absolute;
		right:1rem;
		bottom:.6rem;
		opacity:.8;
	}
	.xh-slider .xh-pager li{
		height:18px;
	}
	.xh-slider .xh-pager li.xh-active a{
		border:1px solid transparent;
	}
	@media screen and (max-width:800px){
		.xh-slider .xh-pager li{
			height:8px;
		}
		.xh-slider .xh-pager li a{
			border-radius:0;
		}
	}	
}

/*= BrandWall =*/
@media screen{
	.xh-brandwall{
		display:flex;
		width:100%;
		list-style:none;
		padding:0;
		flex-wrap:wrap;
		justify-content:center;
	}
	.xh-brandwall li{
		display:inline-block;
		width:238px;
		border: 1px solid #e2e2e2;
		text-align:center;
		margin:.6rem .4rem;
	}
	.xh-brandwall li img{
		width:127px;
		height:36px;
		display:block;
		margin:.6rem auto;
	}
	.xh-brandwall li span{
		font-size:.8rem;
		color:#A1A1A1;
		display:block;
		margin-bottom:.5rem;
	}
}

/*= Holder =*/
@media screen{
	.xh-holder{
		flex:1;
	}
	.xh-holder h2{
		font-weight:normal;
		padding-left:1rem;
		margin-bottom:.4rem;
	}
	@media screen and (max-width:800px){
		.xh-search .xh-holder h2,
		.xh-formview .xh-holder h2{
			display:none;
		}
	}

	/* Table in Holder */
	.xh-home-admin .xh-holder .xh-table a.xh-btn{
		display:inline-block;
	}
	@media screen and (min-width:801px){
		.xh-holder .xh-table{
		}
	}	
	
	/* BrandWall */
	.xh-holder .xh-brandwall{
		justify-content:start;
		padding-left:1rem;
	}

	/* ListView */
	.xh-holder > .xh-list{
		display:flex;
		flex-wrap:wrap;
	}
	.xh-holder > .xh-list li{
		max-width:480px;
		width: 100%;
		margin: 5px 10px;
	}
	.xh-holder > .xh-list .xh-list-divider{display:none;}
	@media screen and (max-width:999px){
		.xh-holder > .xh-list{
			max-width:480px;
			width:100%;
			margin-top:0;
		}
		.xh-holder > .xh-list li{
			margin:0;
		}
		.xh-holder > .xh-list .xh-list-divider{
			display:list-item;
			background-color: #ebebeb;
		}
	}
}

/*= Gallery =*/
@media screen{
	.xh-gallery{
		list-style:none;
		padding-left:0;
		display:flex;
		flex-wrap:wrap;
	}
	@media screen and (max-width:800px){
		.xh-gallery li{
			width:200px;
			height:200px;
			overflow:hidden;
			margin:5px;
		}
		.xh-gallery li img{
			max-width:100%;
		}
	}
	@media screen and (min-width:801px){
		.xh-gallery li{
			height:200px;
			max-width:800px;
			overflow:hidden;
			margin:5px;
		}
		.xh-gallery li:hover{
			border:1px solid rgba(128,128,128,.6);
			margin:4px;
		}
	}
}