.block a,
.block p,
.block ol,
.block ul,
.block li,
.block h2,
.block h3,
.block h4,
.block h5,
.block div,
.block span{color:var(--text-color);}
.block-grid {
	margin: var(--block-grid-margin);
	padding: var(--block-grid-padding);
	width: calc(100% - var(--block-grid-margin-left) - var(--block-grid-margin-right));
	background: var(--block-grid-bg);
	border: var(--block-grid-border);
	border-width: var(--block-grid-border-width);
	border-radius: var(--block-grid-radius);
}
.block-grid .xg-row {
	min-height:100%;
	overflow: hidden;
}

.block-grid-col {
	min-height:100%;
	overflow: hidden;
}

.block-grid-col-child {
	min-height:100%;
	overflow: hidden;
	padding: var(--block-grid-item-padding);
	border-radius: var(--block-grid-item-radius);
	background: var(--block-grid-item-bg);
}

.block-grid-col-child-child {
	min-height: 1rem;
}


.block-div {
	margin: var(--block-div-margin);
	padding: var(--block-div-padding);
	width: calc(100% - var(--block-div-margin-left) - var(--block-div-margin-right));
	background: var(--block-div-bg);
	border: var(--block-div-border);
	border-width: var(--block-div-border-width);
	border-radius: var(--block-div-radius);
}
.block-div.xg-container-x,.block-div.xg-container-l,.block-div.xg-container-m,.block-div.xg-container-s {
	margin: auto;
}


.block-form {
	margin: var(--block-form-margin);
	padding: var(--block-form-padding);
	width: calc(100% - var(--block-form-margin-left) - var(--block-form-margin-right));
	background: var(--block-form-bg);
	border: var(--block-form-border);
	border-width: var(--block-form-border-width);
	border-radius: var(--block-form-radius);
}

.block-input {
	margin: var(--block-input-margin);
	padding: var(--block-input-padding);
	width: calc(100% - var(--block-input-margin-left) - var(--block-input-margin-right));
	background: var(--block-input-bg);
	border: var(--block-input-border);
	border-width: var(--block-input-border-width);
	border-radius: var(--block-input-radius);
}

.block-html {
	margin: var(--block-html-margin);
	padding: var(--block-html-padding);
	width: calc(100% - var(--block-html-margin-left) - var(--block-html-margin-right));
	background: var(--block-html-bg);
	border: var(--block-html-border);
	border-width: var(--block-html-border-width);
	border-radius: var(--block-html-radius);
}


.block-head {
	margin: var(--block-head-margin);
	padding: var(--block-head-padding);
	width: calc(100% - var(--block-head-margin-left) - var(--block-head-margin-right));
	background: var(--block-head-bg);
	border: var(--block-head-border);
	border-width: var(--block-head-border-width);
	border-radius: var(--block-head-radius);
	line-height: 1.2em;
	color:var(--block-head-text-color);
}

.block-button {
	display:inline-block!important;
	margin: var(--block-button-margin);
	padding: var(--block-button-padding);
	width: var(--block-button-width);
	background: var(--block-button-bg, var(--theme-color, var(--xg-color)));
	border: var(--block-button-border);
	border-width: var(--block-button-border-width);
	border-radius: var(--block-button-radius);
	line-height: 1.2em;
	color:var(--block-button-text-color,#fff);
}

.block-text {
	margin: var(--block-text-margin);
	padding: var(--block-text-padding);
	width: calc(100% - var(--block-text-margin-left) - var(--block-text-margin-right));
	background: var(--block-text-bg);
	border: var(--block-text-border);
	border-width: var(--block-text-border-width);
	border-radius: var(--block-text-radius);
	line-height: 1.2em;
}

.block-box {
	margin: var(--block-box-margin);
	padding: var(--block-box-padding);
	width: calc(100% - var(--block-box-margin-left) - var(--block-box-margin-right));
	background: var(--block-box-bg);
	border: var(--block-box-border);
	border-width: var(--block-box-border-width);
	border-radius: var(--block-box-radius);
}

.xg-box-c .box-title {
	margin-bottom: 1rem;
	color: #000;
}

.xg-box-c .box-title h2,
.xg-box-c .box-title h3,
.xg-box-c .box-title h4.xg-box-c .box-title h5 {
	display: block;
	float: left;
}

.xg-box-c .box-title .desc {
	display: block;
	float: left;
	margin-left: 0.5rem;
	font-size: 0.9rem;
	color: var(--text-color, #000);
	opacity: 0.5;
}

.xg-box-c .box-title::before {
	content: ' ';
	display: block;
	float: left;
	width: 0.35rem;
	margin-right: 0.5rem;
	height: 1.2rem;
	background: var(--xg-box-theme-color, var(--theme-color, var(--xg-color)));
	border-radius: 0.25rem;
}

.block-recom {
	margin: var(--block-recom-margin);
	width: calc(100% - var(--block-recom-margin-left) - var(--block-recom-margin-right));
	border: var(--block-recom-border);
	border-width: var(--block-recom-border-width);
	border-radius: var(--block-recom-radius);
}

.block-recom .xg-box-content {
	padding: var(--block-recom-padding);
	background: var(--block-recom-bg);
	border-radius: var(--block-recom-radius);
}

.block-image img {
	width: var(--block-image-width);
	height: var(--block-image-height);
	margin: var(--block-image-margin);
	padding: var(--block-image-padding);
	background: var(--block-image-bg);
	border-radius: var(--block-image-radius);
}

.block-list {
	margin: var(--block-list-margin);
	padding: var(--block-list-padding);
	background: var(--block-list-bg);
	border-radius: var(--block-list-radius);
}


.cate-list-a {
	width: var(--block-cate-width);
	height: var(--block-cate-height);
	margin: var(--block-cate-margin);
	padding: var(--block-cate-padding);
	background: var(--block-cate-bg);
	border-radius: var(--block-cate-radius);
}

.cate-list-a li {
	display: var(--block-cate-item-display, block);
	margin: var(--block-cate-item-margin);
	padding: var(--block-cate-item-padding);
	background: var(--block-cate-item-bg);
	border-radius: var(--block-cate-item-radius);
}


.list-a {
	margin-right: calc(-1rem * (var(--col-count, 1) - 1));
}

.list-a .item-pic {
	width: calc(var(--xg-width) * 0.3);
	height: calc(var(--xg-width) * 0.3 * 0.63);
	margin-right: 1rem;
	overflow: hidden;
}


.list-a li {
	width: calc(100% / var(--col-count, 1));
	margin-bottom: 1rem;
	padding-right: calc(1rem * (var(--col-count, 1) - 1));
}

.list-a .item-desc {
	margin: 0.5rem 0;
	font-size: 0.9rem;
	color: var(--text-color, #000);
	opacity: 0.5;
}

.list-a .item-info {
	height: var(--xg-height);
}

.list-a .item-info-info {
	margin-top: auto;
	font-size: 0.96rem;
	color: var(--text-color, #000);
	opacity: 0.5;
	line-height: 1.2rem;
}

.list-a .pic img {
	width: 100%;
	height: 100%;
}


.list-a.list-display-col li {
	display: block !important;
	;
}

.list-a.list-display-col .item-pic {
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-bottom: 0.5rem;
}

.list-a.list-display-col {}


.list-b .item-pic {
	width: max(calc(var(--xg-width) * 0.3), 6rem);
	height: max(calc(var(--xg-width) * 0.3 * 0.6), 4rem);
	margin-right: 1rem;
	overflow: hidden;
}

.list-b li {
	width: calc(100% / var(--col-count, 1));
	margin-bottom: 1rem;
	padding-right: calc(1rem * (var(--col-count, 1) - 1));
}

.list-b .item-info {
	height: var(--xg-height);
	font-size: 0.96rem;
}

.list-b .item-info-info {
	margin-top: auto;
	font-size: 0.96rem;
	color: var(--text-color, #000);
	opacity: 0.5;
	line-height: 1.2rem;
}

.list-b .pic img {
	width: 100%;
	height: 100%;
}


.list-b.list-display-col li {
	display: block !important;
	;
}

.list-b.list-display-col .item-pic {
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-bottom: 0.5rem;
}

.list-c {
	padding: 0.5rem;
}

.list-c .item-pic {
	width: 100%;
	height: calc(var(--xg-width) * 0.7);
	max-height: var(--xg-width);
	margin-bottom: 0.5rem;
	overflow: hidden;
	border-radius: 0.3rem;
}

.list-c li {
	width: calc(100% / var(--col-count) - 1rem);
	margin: 0.5rem;
}

.list-c .pic img {
	width: 100%;
	height: 100%;
}

.list-d {
	padding: 0.5rem;
}

.list-d .item-pic {
	width: 100%;
	height: calc(var(--xg-width) * 0.7);
	max-height: var(--xg-width);
	overflow: hidden;
	border-radius: 0.3rem;
}

.list-d li {
	position: relative;
	width: calc(100% / var(--col-count) - 1rem);
	margin: 0.5rem;
}

.list-d .pic img {
	width: 100%;
	height: 100%;
}

.list-d .item-title {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% - 1rem);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
	color: #fff;
	font-size: 0.9rem;
	padding: 0.5rem 0.5rem 0.4rem 0.5rem;
	border-radius: 0 0 0.3rem 0.3rem;
}

.list-e {
	padding: 0.5rem;
}

.list-e li {
	width: calc(100% / var(--col-count, 1));
	margin: 0.5rem;
	padding: 0.5rem;
	border: solid 1px #ddd;
	border-radius: 0.3rem;
}

.block-rank {
	margin: var(--block-rank-margin);
	padding: 1rem;
	width: calc(100% - var(--block-rank-margin-left) - var(--block-rank-margin-right));
	border: var(--block-rank-border);
	border-width: var(--block-rank-border-width);
	border-radius: var(--block-rank-radius);
	background: var(--block-rank-bg);
}

.tab-title {
	display: flex;
	cursor: pointer;
}

.block-tab {
	margin: var(--block-tab-margin);
	padding: 1rem;
	width: calc(100% - var(--block-tab-margin-left) - var(--block-tab-margin-right));
	border: var(--block-tab-border);
	border-width: var(--block-tab-border-width);
	border-radius: var(--block-tab-radius);
	background: var(--block-tab-bg);
}

.tab-title li[xg-id].xg-this {
	color: var(--theme-color, var(--xg-color));
}

.tab-title li[xg-id].xg-this::after {
	background: var(--theme-color, var(--xg-color));
}

.tab-title li[xg-id] {
	position: relative;
	margin-right: 1rem;
	padding-bottom: 1rem;
}

.tab-title li[xg-id].xg-this {
	color: var(--theme-color, var(--xg-color));
	font-weight: 600;
}

.tab-title li[xg-id].xg-this::after {
	content: ' ';
	display: block;
	margin-top: 0.6rem;
	width: 100%;
	height: 0.2rem;
	border-radius: 0.2rem;
}

.tab-content li[xg-id] {
	display: none;
}

.tab-content li[xg-id].xg-this {
	display: block;
}

.block-conts {
	margin: var(--block-conts-margin);
	padding: 1rem;
	width: calc(100% - var(--block-conts-margin-left) - var(--block-conts-margin-right));
	border: var(--block-conts-border);
	border-width: var(--block-conts-border-width);
	border-radius: var(--block-conts-radius);
	background: var(--block-conts-bg);
}

.block-tabconts {
	margin: var(--block-tabconts-margin);
	padding: 1rem;
	width: calc(100% - var(--block-tabconts-margin-left) - var(--block-tabconts-margin-right));
	border: var(--block-tabconts-border);
	border-width: var(--block-tabconts-border-width);
	border-radius: var(--block-tabconts-radius);
	background: var(--block-tabconts-bg);
}

.block-list {
	margin: var(--block-list-margin);
	width: calc(100% - var(--block-list-margin-left) - var(--block-list-margin-right));
	border: var(--block-list-border);
	border-width: var(--block-list-border-width);
	border-radius: var(--block-list-radius);
	background: var(--block-list-bg);
}

.block-conts .conts-title {
	margin-bottom: 1rem;
}

.block-conts .conts-title h2,
.block-conts .conts-title h3,
.block-conts .conts-title h4.block-conts .conts-title h5 {
	display: block;
	float: left;
}

.block-conts .conts-title .desc {
	display: block;
	float: left;
	margin-left: 0.5rem;
	font-size: 0.9rem;
	color: var(--text-color, #000);
	opacity: 0.5;
}

.block-conts .conts-title::before {
	content: ' ';
	display: block;
	float: left;
	width: 0.35rem;
	margin-right: 0.5rem;
	height: 1.2rem;
	background: var(--block-conts-theme-color, var(--theme-color, var(--xg-color)));
	border-radius: 0.25rem;
}

.block-conts .conts-content {
	padding:var(--block-conts-padding);
}

.block-conts .conts-content .xg-page {
	margin-top:0.75rem;
}





























.block-pics {
	--pic-ratio: 0.65;
	overflow: hidden;
	padding: var(--block-pics-padding);
	margin: var(--block-pics-margin);
	background: var(--block-pics-bg);
	border-radius: var(--block-pics-radius);
	font-weight: 600;
}

.block-pics .item {
	display: block;
	border-radius: var(--block-pics-item-radius);
	overflow: hidden;
}

.block-pics .pics .item-pic {
	background: #000;
}

.block-pics .pics .item-pic img {
	opacity: 0.8;
	width: 100%;
	height: 100%;
}

.block-pics .pics .item-title {
	position: absolute;
	width: calc(100% - 1rem);
	left: 0;
	bottom: 1.75rem;
	padding: 0.5rem 0.75rem;
	line-height: 1.2em;
	color: #fff;
}

.block-pics .pics .item-info {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 0.5rem 0.75rem;
	color: #fff;
	font-weight: lighter;
	font-size: 0.9rem;
}

.block-pics .pics .item-info div {
	color: #fff;
}


.block-pics .pics-a .item {
	--item-width: calc((var(--xg-width) - 2rem) / 4);
	--item-height: calc(var(--item-width) * var(--pic-ratio));
	display: block;
	border-radius: var(--block-pics-item-radius);
	height: var(--item-height);
	overflow: hidden;
}

.block-pics .pics-a .item-0 .item-info {
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 600;
}

.block-pics.block-pics .pics-a .item-0 .item-title {
	font-size: 1.2rem;
	padding: 1rem;
}
.block-pics .pics-a .item {
	position: relative;
}


.block-pics .pics-a{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: repeat(2,1fr);
	gap: 1rem;
	margin-bottom: -1rem;
}


.block-pics .pics-a .item.item-0 {
	grid-area: 1/1/3/3;
	height: calc(var(--item-height) * 2 + 1rem);
}

.block-pics .pics-display-col.pics-a{
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(4,1fr);
	gap: 0.5rem;
	margin-bottom: -0.5rem;
}

.block-pics .pics-display-col.pics-a .item.item-0 {
	grid-area: 1/1/3/3;
	height: calc(var(--item-height) * 2 + 1rem);
}

.block-pics .pics-display-col.pics-a .item {
	--item-width: calc(var(--xg-width) / 2);
	--item-height: calc(var(--item-width) * var(--pic-ratio));
	display: block;
	border-radius: var(--block-pics-item-radius);
	height: var(--item-height);
	overflow: hidden;
}

.block-pics .pics-display-col.pics-a .item-title {
	display: none;
}
.block-pics .pics-display-col.pics-a .item-info .xg-fl .xg-fl {
	display: none;
}
.block-pics .pics-display-col.pics-a .item.item-0 .item-title {
	display: block;
}
.block-pics .pics-display-col.pics-a .item.item-0 .item-info .xg-fl .xg-fl {
	display: block;
}






.block-pics .pics-b {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 1rem;
	margin-bottom: -1rem;
}
.block-pics .pics-display-col.pics-b {
	display: block;
}

.block-pics .pics-b .item {
	position: relative;
}
.block-pics .pics-display-col.pics-b .item {
	display: block;
	margin-bottom: 1rem;
}


.block-pics .pics-c {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 1rem;
	margin-bottom: -1rem;
}
.block-pics .pics-display-col.pics-c {
	display: block;
}

.block-pics .pics-c .item {
	position: relative;
}
.block-pics .pics-display-col.pics-c .item {
	display: block;
	margin-bottom: 1rem;
}