/* 全局CSS变量（浅色主题，默认） */
:root {
	--text-primary: #000;
	--text-secondary: #333;
	--text-gray: gray;
	--text-gray2: #999;
	--bg-top: #f3f3f3;
	--bg-page: #f3f3f3;
	--bg-box: #eee;
	--bg-tab: #f30;
	--bg-btn: #f3f3f3;
	--color-btn: #069;
	--bg-translucent: rgba(125, 125, 125, 0.2);

	--color-link: #069;
	--color-btn-link: #069;

	--border-dashed: 1px dashed #ccc;
	--border-solid: 1px solid #ccc;


}

/* 深色主题变量覆盖 */
.dark {
	--text-primary: #999;
	--text-secondary: #888;
	--text-gray: gray;
	--text-gray2: #999;
	--bg-page: #1f1f1f;
	--bg-top: #ccc;
	--bg-box: #343333;
	--bg-tab: #dc9026;
	--bg-btn: #ccc;
	--color-btn: #38c;
	--color-link: #38c;
	--color-btn-link: #ccc;
	--border-dashed: 1px dashed rgba(0, 0, 0, 0.2);
	--border-solid: 1px solid rgba(255, 255, 255, 0.1);


}

.bg-translucent {
	/* 背景颜色半透明 同时适合light和dark */
	background-color: rgba(125, 125, 125, 0.1);
}


.dark {
	color: #999;
	background-color: #1f1f1f;
}

.dark a {
	color: #38c;
}

.dark input,
.dark textarea {
	background: #333;
	color: #999;
	border: 1px solid #666;
	border-radius: 5px;
}

.dark select,
.dark option {
	background: #333;
	color: #999;
	border: 1px solid #666;
	border-radius: 5px;
}

.dark .myBtn,
.dark button {
	background-color: #888;
	color: #333;
	border-radius: 5px;
	border: none;
}

.dark .title {
	color: gray
}


.dark {
	img {
		filter: brightness(0.8) contrast(0.95);
		-webkit-filter: brightness(0.8) contrast(0.95);
	}
}


a.themeCurr {
	color: #dc143c !important;
}


/* 

.form-input::placeholder {
  color: var(--form-input-placeholder);
}


.form-input:hover {
  border-color: var(--form-input-hover-border);
}


.form-input:focus {
  border-color: var(--form-input-focus-border);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
   聚焦光晕（浅色/深色都适配） 
}


.form-input:disabled {
  background: var(--form-input-disabled-bg);
  color: var(--form-input-disabled-text);
  cursor: not-allowed;
}
 

.form-input.error:focus {
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
} 

.form-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
} */


body {
	line-height: 160%;
	height: 100%;
	background: var(--bg-page);
	margin: 0;
	padding: 0;
	font-size: 18px;
}

img {
	max-width: 100%;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
	padding: 0;
	margin: 0;
}

h1 {
	font-size: larger;
	border-bottom: var(--border-solid);
	padding: 0 0 0.5em 0;
	margin: 1em 0
}

h2 {
	font-size: large;
}

a {
	color: #069;
	text-decoration: none;
}

a:hover {
	color: #f30;
}

.box {
	border: var(--border-solid);
	border-radius: 1em;
	margin: 0 0 1em;
	padding: 1em;
	background: var(--bg-box);
}

em {
	font-style: normal;
}

.gray {
	color: gray
}

.gray2 {
	color: #999
}

.dark .gray2 {
	color: #666
}

.red {
	color: #dc143c
}

.black {
	color: black
}

.mt {
	margin: 1em 0 0;
}

.flexBox {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	display: -webkit-flex;
	/* Safari */
	display: -webkit-box;
	display: flex;
}

.flexBox li {
	-webkit-box-flex: 0 1 auto;
	-webkit-flex: 0 1 auto;
	flex: 0 1 auto;
}



#header-wrap {
	padding: 0.6em 0 1em;
	background: var(--bg-top);

}

#header,
#main,
#nav {
	max-width: 1200px;
	margin: 0 auto;
}

#main {
	padding: 1em;
}

#nav-wrap {
	margin-bottom: 1em;
	background: #94682b;
}

#nav {
	text-align: center;
	background: #94682b;
	display: box;
	display: -webkit-flex;
	/* Safari */
	display: -webkit-box;
	display: flex;
	justify-content: center;

}

#nav li {
	color: #fff;
	flex-grow: 1;
	max-width: 6em;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	flex-wrap: nowrap;
	display: inline-block;
	*float: left;
	white-space: nowrap;

}

#nav a {
	color: #fff;
	display: inline-block;
	padding: 0.4em 0;
	*padding: 0.4em 1em;
}

.dark #nav a {
	color: #ccc;
}

:root #nav a {
	padding: 0.4em 1em \0/IE9;
}

/* IE9 on 360browser */

@media all and (-ms-high-contrast:none) {

	/* IE11 */
	*::-ms-backdrop,
	#nav {
		display: block;
		zoom: 1;
		overflow: hidden
	}

	*::-ms-backdrop,
	#nav li {
		display: block;
		float: left;
	}

	*::-ms-backdrop,
	#nav li a {
		padding: 0.4em 1em
	}
}

#body-cha #nav-cha,
#body-shi #nav-shi,
#body-ci #nav-ci,
#body-diangu #nav-diangu,
#body-dui #nav-dui,
#body-fan #nav-fan,
#body-zuci #nav-zuci,
#body-shici #nav-shici,
#body-yun #nav-yun {
	background: var(--bg-tab);
	padding: 0 5px;

}

#body-cha #nav-cha span,
#body-shi #nav-shi span,
#body-ci #nav-ci span,
#body-diangu #nav-diangu span,
#body-dui #nav-dui span,
#body-fan #nav-fan span,
#body-zuci #nav-zuci span,
#body-shici #nav-shici span,
#body-yun #nav-yun span {
	display: inline-block;
}

#shi {
	width: 100%;
	height: 12em;
	font-size: large;
	font-family: Arial;
}

.text-box {
	border-radius: 0.6em;
	font-size: larger;
	border: var(--border-solid);
	padding: 1em;
	margin: 0.5em 0 0 0
}

#zd-cha {
	float: left;
	width: 38%;
}

.zd-show-pop {
	position: absolute;
	z-index: 19999;
	display: none;
	padding: 0 !important;
	border-radius: 1em;
	background: #fff;
	left: 0;
	top: 200px;
	border: 2px solid #ee9b0b;
}

#zd-show,
.show-box {
	border-radius: 0.6em;
	font-size: 18px;
	line-height: 160%;
	float: right;
	width: 54%;
	border: 2px solid #ee9b0b;
	padding: 0.6em;
	background: var(--bg-box);
}

.zd-show-title {
	text-align: center;
	background: #ffe1ac;
	border-radius: 0.5em 0.5em 0 0;
	cursor: pointer;
}

.dark #zd-show,
.show-box {
	border: 2px solid #c08010
}

.dark .zd-show-title {
	background: #ddb369;
}

#zd-show strong {
	display: inline-block;
	margin: 0 0.3em 0 0
}

#zd-show span {
	font-family: verdana;
	margin: 0.5em 0.5em 0 0;
	line-height: 140%;
	font-size: medium;
	border-radius: 0.6em;
	display: inline-block;
	background: #ff3300;
	padding: 0 0.2em;
	color: #fff;
	text-indent: 0.3em
}

#zd-show b {
	font-weight: normal;
	color: #950000
}

#zd-show com {
	display: block;
}

#yunBox {
	display: none;
	position: relative;
	border-radius: 1em;
	background: var(--bg-page);
	border: var(--border-solid);
	border-width: 2px;
	padding: 1em;
	margin: 0 auto 1em;
}

.show-box h3 {
	border-bottom: 1px solid #ccc;
}

/*the second td of the second table 

table:nth-child(2) td:nth-child(2){ background:#ff0000; width: 30%; }

*/
#zd-show td:nth-of-type(1) {
	width: 5em;
}

#zd-show td:nth-of-type(3) {
	width: 16em;
}

#zd-show th {
	text-align: left;
}

#zd-show table {
	margin: 0 0 2em 0
}

#footer {
	text-align: center;
	line-height: 180%;
	border-top: var(--border-solid);
	padding: 1em 0 0 0;
}

#footer div {
	color: #999;
}

.dark #footer div {
	color: #333;
}

.tab {
	font-size: 17px;
	overflow: hidden;
	border-bottom: 1px solid #aaa;
	padding-left: 14px;
	margin-bottom: 15px;
	line-height: 16px;
}

.tab li {
	position: relative;
	padding: 10px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	bottom: -1px;
	z-index: 999;
	float: left;
	margin-right: 1px;
	background: #ccc;
	cursor: pointer;
}

.tab li.curr {
	font-weight: bold;
	color: #b46303;
	border: 1px solid #aaa;
	border-bottom: 1px solid #fff;
	background: #fff;
}

.tab li.curr a {
	color: #B46303 !important
}

.tab li.curr a:hover {
	background: none
}

.dark .tab {
	border-bottom: 1px solid #333;
}

.dark .tab li {
	background: #222;
}

.dark .tab li.curr {
	border: 1px solid #333;
	border-bottom: 1px solid #333;
	background: #111;
}


.shi-list li {
	display: inline-block;
	margin: 0 0.5em 0 0;
	color: #999;
}

.shi-list strong {
	color: #000;
}

.cipai-list li {
	display: inline-block;
	width: 7em;
	margin: 0 0 0 1em;
	_float: left;
}

.cipai-list em {
	color: #999;
	font-size: 0.8em
}

.cipai-list span {
	color: red;
	font-size: small;
	position: relative;
	left: -1em;
	display: inline-block;
	margin: 0 -0.8em 0 0;
}

.cipai-list i {
	font-style: normal;
	color: #999;
	font-size: small;
}

.shi-list span {
	color: #ccc;
}


#cipaiBox,
#cipuBox,
#inputCiBox,
#ci_resultBox {
	margin: 0 0 1em 0;
	width: 46%;
	border: var(--border-solid);
	padding: 1em;
	border-radius: 1em;
}

#cipuBox {
	float: left;
}

#inputCiBox,
#ci_resultBox {
	float: right;
}


.gl-box table {
	margin-top: 10px;
	border-bottom: 1px dashed #ccc;
}

.gl-box td {
	padding-bottom: 5px;
}

.gl-box table.last {
	border: 0
}

.gl-rule em {
	color: #aaa;
}

.gl-rule strong {
	font-weight: normal;
	color: #f00;
}

.gl-float-box {
	display: inline-block;
	border: 1px solid #ccc;
	height: 17em;
	vertical-align: top;
	padding: 1em;
	border-radius: 1em;
}


#gl_result {
	float: right;
	width: 49%;
}

#gl_result em.yaYun {
	color: green
}

.gl-select {
	font-size: medium;
}

.textarea-work {
	width: 550px;
}

.clearfloat {
	overflow: hidden;
	zoom: 1;
	clear: both;
}

.jianfanStr,
.tStr {
	width: 99%;
}

#chooseBox {
	border: 1px solid #ccc;
	padding: 1em;
	border-radius: 0.5em
}

#chooseBox select {
	color: red
}

button {
	font-size: medium
}

input {
	font-size: large;
}

#zuci a {
	display: inline-block;
	margin: 0 1em 0 0;
	width: 4em;
}

span.book {
	background: #94682b !important
}

.diangu-list li {
	color: #999;
	display: inline-block;
	width: 4em;
	white-space: nowrap;
	overflow: hidden;
	line-height: 105%;
	margin: 0 0.5em 0 0;
	_float: left;
	_margin: 0 0 0.5em 0
}

.diangu-list-w li {
	width: 6em;
}

.diangu-list li a.curr {
	color: red;
}

#go2top {
	background: #999;
	color: #fff;
	position: fixed;
	right: 5px;
	bottom: 3em;
	cursor: pointer;
	height: 1.8em;
	width: 1.5em;
	text-align: center;
	border-radius: 4px;

}

#loading {
	position: fixed;
	left: 40%;
	top: 40%;
	padding: 0.5em 1em;
	background: #ffd700;
	display: none;
}

.shici-sort li {
	display: inline-block;
	width: 5em;
}

.shici-list li {
	margin: 0 0 2em 0;
	background: #f5f2c9;
	padding: 1em;
	border-radius: 0.5em;
}

.dark .shici-list li {
	background: #343434;
	color: #94682b;
}

.shici-list b {
	color: red;
	font-weight: normal;
}

.dark .shici-list b {
	color: #d04500;

}

.shici-h1 {
	font-size: larger;
	color: #9a502b
}

.shici-h1 span {
	color: #999;
	font-size: small;
}

.shici-content {
	margin: 1em 0;
	color: #333;
	font-size: larger;
	line-height: 160%;
}

.dark .shici-content {
	color: #828282
}

.shici-notes {
	font-size: large;
	display: none;
	color: #3b3b3b;
	border: 1px solid #f6efa8;
	padding: 1em;
	background: #f8f6db;
	border-radius: 0.3em;
}

.shici-toggle-notes,
.btn-auto-notes {
	font-size: small;
	padding: 0 0.5em;
	cursor: pointer;
	color: #999;
	display: inline-block;
	background: #f8f6db;
	border: 1px solid #f1e1ba;
	border-radius: 4px;
	margin-right: 1px;
}

.shici-toggle-notes em {
	color: #369;
}

.dark .shici-toggle-notes,
.dark .btn-auto-notes {
	color: #999;
	background: #333;
	border: 1px solid #222;
}

.pages {
	margin: 15px 0;
	padding: 3px;
	text-align: center;
	overflow: hidden;
	font-size: 14px;
}

.pages * {
	vertical-align: top;
	padding: 2px 5px;
	display: inline-block;
	color: #666;
	border-radius: 6px;
}

.pages em {
	font-style: normal;
}

.pages .curr {
	background: #f90;
	border: 1px solid #f90;
	color: #333;
}

.pages a:hover {
	background: #f90;
	/* border: 1px solid #f90; */
	color: #333;
	text-decoration: none;
}

#zd-show i {
	font-style: normal;
	color: maroon;
	font-size: x-small;
}

.show-box {
	font-size: 1.1em
}

.show-box em {
	color: #ee9b0b
}

/*iPhone*/
@media only screen and (max-width:800px) {
	body {
		font-size: medium;
	}

	#loveShiciBox {
		display: none
	}

	#zd-cha {
		float: none;
		width: auto;
	}

	#zd-show,
	.show-box {
		float: none;
		width: auto;
		margin: 0.5em 0 0;

	}

	#zd-show blockquote {
		margin: 0;
	}

	#zd-show td:nth-of-type(1) {
		width: 5em;
	}

	.show-box span {
		display: block;
		margin: 0 0 0.5em 2em
	}

	table.shiju th:nth-of-type(2) {
		display: none;
	}

	table.shiju td:nth-of-type(2) {
		display: none;
	}

	#shi {
		width: 98%;
	}

	.text-box {
		border-radius: 0.6em;
		font-size: larger;
		border: 1px solid #ccc;
		padding: 0.8em;
		margin: 0.5em 0 0 0
	}


	#cipaiBox,
	#cipuBox,
	#inputCiBox,
	#ci_resultBox {
		float: none;
		display: block;
		width: 93%;
	}

	.gl-float-box {
		display: block;
		width: auto;
		height: auto;
	}

	textarea {
		font-size: medium;
	}

	.cipai-list li {
		width: 5.5em;
		height: 1.5em;
		position: relative;
		margin: 0 0 0 0.4em;
		white-space: nowrap;
	}

	.cipai-list span {
		color: red;
		font-size: small;
		position: absolute;
		left: -1em;
		display: inline-block;
		margin: 0 -0.8em 0 0;
	}

	.cipai-list li {
		overflow: hidden;
	}

	.jianfanStr,
	.tStr {
		width: 98%;
	}

	#gl_result span {
		display: none;
	}

	.gl-shi-do-bar {
		padding: 0.3em 0 !important;
	}

	.gl-select {
		font-size: 15px;
	}

	.textarea-work {
		width: 98%;
	}

	#yun-temp-box {
		font-size: small;
	}
}