:root{
	
	--block-bg: #E4E4E4;
	--burl: #707070;
}

@media (prefers-color-scheme: dark) {

	:root{
	
		--block-bg: #E4E4E4;
		--burl: #E4E4E4;
	}

}


#bodybg{
	content: ' ';
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url('https://p.pstatp.com/origin/13855000114d66d5f4c38') center 0 no-repeat;
	background-size: cover;

}



.lists{

	padding-top: 2px;
	padding-right: 11%;
	padding-bottom: 10px;
	padding-left: 11%;
	text-align: left;

}

.card-h2{
	
	display: block;
	margin: 20px -4px 13px -4px;	
	
}

.card-p{
	
	display: block;
	margin: -8px -3px 13px -3px;	
	
}

.block-button{
	
	width: 100%;
	height: 180px;
	margin: 6px 0px;
	padding: 0px 15px;
	background-size: 100% auto;
	/* text-align: center; */
	/* align-items: center; */
	/* justify-content:space-between; */
	background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	/* background-color: rgb(250,250,250,0.23); */
	border-radius: 4px;
	box-shadow: 0px 0px 1px black;

}

.blog-button{
	
	padding-bottom: 5px;
	height: auto;
	width: calc(100% - 12px)!important;
	
}

.blog-button-main{
	
	max-height: 30vh;
	overflow: hidden;
	
}

.btitle{
	
	font-size: 24px;
	font-weight: bold;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
	margin: 22px 0 6px 2px;
	
}

.blogtitle{
	
	font-size: 20px;
	font-weight: bold;
	text-overflow: initial;
	overflow: initial;
	margin: 15px 0 6px 2px;

	
}

.bimg{
	
	float: left;
	height: 60px;
	margin: 22px 5px -4px 0;
	border-radius: 10px;
	
}

.blogimg{
	
	float: right;
	height: 60px;
	margin: 27px 5px -4px 0;
	border-radius: 2px;
	
}

.web-icon{
	
	margin-bottom: -1px;
	margin-right: 2px;
	fill: var(--burl);
	
}


.burl{		

 	font-size: 14px;		
 	color: var(--burl);		
 	white-space: nowrap;		
     /* text-overflow: ellipsis; */		
	overflow: hidden;		
     /* word-break: break-all; */		
 	display: inline;		
 	/* webkit-line-clamp: 1; */		
 	/* line-clamp: 1; */		

}		


.bintro{
	
	margin-top: 14px;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	
}

.blogintro{
	
	margin-top: 5px;
	text-overflow: initial;
	overflow: initial;
	
}

.blogintro p, .blogintro h1, .blogintro h2, .blogintro img{

	margin: 0;
	padding: 0;
	
}

.link-more{
	
	margin-top: 5px;
	margin-bottom: 10px;
	display: block;
	
}

#myavatar{
	
	width: 100px;
	height: 100px;
	border-radius: 60px;
	padding: 6px;
}

black{
	
	color: black!important;
	background-color: black;
	
}

black:active, black:focus, black:hover{
	
	color: white!important

}

.myinfo p{
	
	margin-bottom: -5px;
	
}

.mytable{
	
	margin-bottom: 8px;
	
}

.contactways{
	
	display: inline-block;
	
}

.contact-button{
	
	display: inline-block;
	padding: 0px 8px 8px 8px;
	margin: 2px 2px;
	max-width: 90%;
	/* font-size: 16px; */
	font-weight: bold;
	white-space: nowrap;
	border:3px solid #E6E6E6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
	
}

.contact-img{
	
	/* float: left; */
	width: 25px;
	height: 25px;
	padding: 2px 9px 2px 1px;
	margin-bottom: -7px;
	margin-top: 4px;
}
	
.gt-header-controls-tip{
	
	display: none!important;
	
}

.gt-meta{
	
	border: none!important;
	
}

@media screen and (min-width: 468px) {
	.gt-btn{
		
		margin-left: 4px!important;
		
	}
}

.card{
	
	display: inline-block;
	margin: 10px 0; 
	padding: 0px 0px;
	/* border: 1px solid #1b2321; */
	width: 100%;
	
}

@media screen and (max-width: 700px) {
	.card {
		
		display: block;
		width: auto;
		margin:10px 0px;
		padding: 0px 0px;
		
	}
}
@media screen and (min-width: 700px) {

	.leftcard{
		float: left;
		width: calc(50% - 20px);
		padding-right: 21px;
		/* overflow: auto; */
		display: block;
		
	}
	.rightcard{
		float: right;
		width: calc(50% - 20px);
		/* margin-left: 10px; */
		/* overflow: auto; */
		display: block;
	}

}

@media (max-width: 600px){

	/* .flex{ */
		
		/* display: block; */
		
	/* } */
	.lists{

		padding-right: 20px;
		padding-left: 20px;
		text-align: left;

	}
	.card-h2{
		
		text-align: left;
		
	}
	.block-button{
		
		border-radius: 7px;
		margin-left: -9px;
		margin-right:-9px;
		
	}
	


}
@media (min-width: 600px){

	.card-h2{
		
		text-align: center;
		
	}

	.card-p{
		
		text-align: center;
		
	}
	.block-button{
		
		width: calc(50% - 36px);
		
	}

	.flex:after{
		
		content: ""; 
		width: calc(50% - 36px);
	}
}
@media (min-width: 1000px){

	.block-button{
		
		width: calc((100% / 3) - 39px);
		
	}

	.flex:after{
		
		content: ""; 
		width: calc((100% / 3) - 9px);

	}
}
@media (prefers-color-scheme: dark) {
	
		
	#bodybg{
		background: url('https://p.pstatp.com/origin/fe8200025988d3728d5a') center 0 no-repeat;
		background-size: cover;
	}
	
	.contact-button{
		
		border:3px solid #424242;
		
		
	}
	
}

/* 右侧与机器人聊天 */

#rightCWRobot{

	position: fixed;
	left: auto;
    right: 20px;
	top: auto;
    bottom: 20px;
    z-index: 9999999;
    width: 50px;
    height: 50px;
    border-radius: 43px;
    background-image: url(/src/img/robot.svg);
    background-position: 10px, 0;
    background-size: 30px;
    background-repeat: no-repeat;
	transition: all 0.3s cubic-bezier(0.58, 0.59, 0.38, 1);

}

#rightCWRobot #rightCWMain{

	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: opacity 0.2s 0.1s;

}

#rightCWRobot[open=true]{

	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	transform: scale(1)!important;
    -ms-transform: rotate(1)!important;
    -moz-transform: rotate(1)!important;
    -webkit-transform: rotate(1)!important;
    -o-transform: rotate(1)!important;
	backdrop-filter: var(--jianbian)!important;
    -webkit-backdrop-filter: var(--jianbian)!important;
    background-color: var(--jianbian-color)!important;
	background-image: none;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
	transition: all 0.4s cubic-bezier(0.58, 0.59, 0.38, 1);

}

#rightCWRobot[open=true] #rightCWMain{

	opacity: 1;
	visibility: visible;

}

#rightCWRobot .spinner{

	position: absolute;
	top: 49%;
	z-index: -1;
}

#rightCWClose{

	opacity: 1;
	position: absolute;
	left: 0;
    top: 0;
    width: 24px;
	height: 24px;
    padding: 12px;
	cursor: pointer;
	z-index: 2;

}

#rightCWBlank{

	opacity: 1;
	position: absolute;
	left: 40px;
    top: 0;
    width: 24px;
	height: 24px;
    padding: 12px;
	cursor: pointer;
	z-index: 2;
	transform: scale(0.71);
	
}

#rightCWRefresh{

	opacity: 1;
	position: absolute;
	right: 40px;
    top: 0;
    width: 24px;
	height: 24px;
    padding: 12px;
	cursor: pointer;
	z-index: 2;
	transform: scale(0.81);

}

@media (min-width: 700px) {
		
	#rightCWRobot[open=true]{

		right: 20px;
		bottom: 20px;
		width: 40%;
		height: 60%;
		border-radius: 6px;

	}

	#rightCWIframe{

		border-radius: 6px;

	}

}

#rightButtonTip{

	position: fixed;
	bottom: 30px;
	right: 72px;
	border-radius: 5px;
	font-size: 13px;
	padding: 5px 7px;
	display: none;
	animation: button-highlight 3s infinite;
	z-index: 9999999;
	
}

@keyframes button-highlight{

	0%{
		transform: rotate(0deg);
	}
	10%{
		transform: rotate(7deg);
	}
	20%{
		transform: rotate(-7deg);
	}
	30%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(0deg);
	}
}