@charset "utf-8";

@media (prefers-color-scheme: light) {
	:root{--bordercolor:#cccccc;--outbgcolor:#ffffff;--ourtxtcolor:#000000;--onbgcolor:#5a5a5a;--ontxtcolor:#ffffff;}
}
/*	//用户选择选择使用深色主题的系统界面*/
@media (prefers-color-scheme: dark) {
	:root{--bordercolor:rgb(49, 49, 49);--outbgcolor:#212121;--ourtxtcolor:#bdbdbd;--onbgcolor:#141414;--ontxtcolor:#ffffff;}
}
/*6 //表示系统未得知用户在这方面的选项 6*/
@media (prefers-color-scheme: no-preference) {
	:root{--bordercolor:#cccccc;--outbgcolor:#ffffff;--ourtxtcolor:#000000;--onbgcolor:#5a5a5a;--ontxtcolor:#ffffff;}
}



.btnClass{padding:30px;}
.btnClass.btncenter{text-align: center;}
.btnClass.btnleft{text-align: left;}
.btnClass.btnright{text-align: right;}
.btnClass>ul{display: inline-block;}
.btnClass>ul>li{min-width:40px;height: 40px;font-size:16px;line-height: 40px;float:left;border-left:1px solid var(--bordercolor);border-top:1px solid var(--bordercolor);border-bottom:1px solid var(--bordercolor);text-align: center;overflow: hidden;color: var(--ourtxtcolor);background-color: var(--outbgcolor);}
.btnClass>ul>li:first-child{border-bottom-left-radius: 4px;border-top-left-radius: 4px;}
.btnClass>ul>li:last-child{border-bottom-right-radius: 4px;border-top-right-radius: 4px;border-right: 1px solid var(--bordercolor);}
.btnClass>ul>li>a{width:40px;height: 40px;display: block;line-height: 40px;color: var(--ourtxtcolor);font-size: 16px;}
.btnClass>ul>li>a:hover{width:40px;height: 40px;display: block;background-color: var(--onbgcolor);color: var(--ontxtcolor);text-decoration: none;}
.btnClass>ul>li.thisbtn{background-color: var(--onbgcolor) !important ;color: var(--ontxtcolor);}

@media screen and (max-width:799px){
	.btnClass>ul>li.pc{display: none;}
	.btnClass>ul>li:nth-child(2){border-bottom-left-radius: 4px;border-top-left-radius: 4px;}
}
@media screen and (min-width:800px) {
	.btnClass>ul>li.pc{display:;}
	.btnClass>ul>li::nth-child(2){border-bottom-left-radius: 0px;border-top-left-radius: 0px;}
}

/* .topbtnClass{} */
.topbtnClass.btncenter{text-align: center;}
.topbtnClass.btnleft{text-align: left;}
.topbtnClass.btnright{text-align: right;}
.topbtnClass>ul{display: inline-block;}
.topbtnClass>ul>li{min-width:40px;height: 40px;font-size:16px;line-height: 40px;float:left;text-align: center;overflow: hidden;}
.topbtnClass>ul>li>a{width:40px;height: 40px;display: block;line-height: 40px;color:#000000;font-size: 16px;}
.topbtnClass>ul>li>a:hover{width:40px;height: 40px;display: block;color:#ffffff;text-decoration: none;}