@charset UTF-8;
.header {
position:relative;
height:52px;
background:#0067d2;
}
.header .article {
position:absolute;
top:0;
right:18%;
z-index:1000;
display:block;
width:12%;
height:24px;
padding-left:15px;
padding-top:13px;
}
.header .home {
position:absolute;
top:0;
right:31%;
z-index:1000;
display:block;
width:12%;
height:24px;
padding-left:15px;
padding-top:13px;
}
.foot {
position:relative;
height:65px;
background:#006fe2;
margin-top:22px;
}
.foot .foot-bq {
position:absolute;
z-index:1000;
display:block;
height:26px;
padding-top:15px;
padding-left:26%;
color:#000;
}
.foot .foot-bq a {
color:#000;
}
.header a {
color:#fff;
}
body {
max-width:640px;
height:100%;
margin:0 auto;
}
.animation-pic {
width:80%;
height:80%;
border:2px solid #ADD8E6;
margin:0 auto;
}
.qa p {
text-indent:32px;
}
.qa h4 {
text-indent:16px;
margin-top:2px;
margin-bottom:3px;
}
.canvas-yuwen {
margin-top:10px;
display:block;
max-width:640px;
min-height:240px;
}
.canvas-yuwen li {
margin-bottom:6px;
}
.site-login h1 {
background:#87CEFA;
text-align:center;
font-size:26px;
font-weight:300;
color:#fff;
margin-bottom:0;
padding:12px 6px;
}
.bg-gray {
background-color:#eaeaec!important;
}
.site-login .form-group {
margin-top:20px;
}
.site-login .body {
padding:10px 20px;
}
.site-login .footer {
padding:10px 20px 26px;
}
.site-signup h1 {
background:#87CEFA;
text-align:center;
font-size:26px;
font-weight:300;
color:#fff;
padding:12px 6px;
}
.site-signup label {
margin-left:13%;
width:60%;
}
.site-signup input {
margin-top:6px;
margin-left:10%;
width:60%;
}
.site-signup .form-group {
margin-top:10px;
}
.site-signup .body {
padding-top:14px;
}
.site-signup .footer {
padding:20px 20px 10px;
}
#signup-form button {
width:80%;
margin-left:5%;
}
#upload-form button {
width:60%;
}
#modify-form label {
margin-left:9%;
width:60%;
}
#modify-form input {
margin-top:6px;
margin-left:7%;
width:60%;
}
.form-control {
display:block;
width:80%;
height:28px;
font-size:14px;
/*color:#87CEFA;*/
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:4px;
padding:6px 6px;
}
.entry-content {
margin-left:2%;
margin-right:2%;
}
/*.article-content strong {
margin-left:6%;
}*/
.article-content h3 {
text-indent:12%;
}
.article-content img {
width:90%;
height:80%;
border:2px solid #ADD8E6;
margin:2px auto;
}
#table-4 {
width:100%;
text-align:center;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#d3cadd;
}
#table-4 thead,#table-4 tr {
border-top-width:1px;
border-top-style:solid;
border-top-color:#d3cadd;
}
#table-4 td,#table-4 th {
font-size:13px;
font-family:Verdana;
color:#5f4a79;
padding:5px 10px;
}
#table-4 tr.mm td {
font-weight:700;
}
#table-4 tr:nth-child(even) {
background:#dfd8e8;
}
#table-4 tr:nth-child(odd) {
background:#FFF;
}
.foot-bq p {
font-size:13px;
margin-bottom:5px;
}
#container text {
text-anchor:middle;
dominant-baseline:central;
font-family:"Comic Sans MS";
font-style:italic;
}
#panel li {
margin-bottom:10px;
}
.item {
/*cursor:move;*/
}
.item rect,.item line,.item path {
opacity:1.0;
}
.item.finish rect,.item.finish line,.item.finish path {
opacity:0.0;
}
.explain {
border-top:1px solid #ccc;
margin-top:8px;
padding-top:8px;
}
svg {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.scatter_tooltip {
font-family:simsun;
font-size:16px;
width:240px;
height:auto;
position:absolute;
background-color:#FFF;
border-radius:5px;
text-align:left;
word-wrap:break-word;
border-style:solid;
border-width:1px;
}
#container {
width:90%;
margin-left:2%;
margin-top:20px;
}
.input-area {
width:56%;
font-family:arial;
height:25px;
font-size:18px;
resize:none;
}
.u:hover rect {
fill:#ccc;
}
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
        fill: transparent;
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        fill:#7fffd4;
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        fill:#7fffd4;
    }
    to {
        transform: scale3d(1, 1, 1);
        fill: transparent;
    }
}
g.selected rect {
animation:tada .6s;
}
g.caps rect {
fill:#7fffd4;
}
table.gridtable {
font-family:verdana,arial,sans-serif;
font-size:13px;
color:#333;
border-collapse:collapse;
width:100%;
border-color:#666;
border-width:1px;
}
table.gridtable th {
background-color:#dedede;
border-color:#666;
border-style:solid;
border-width:1px;
padding:8px;
}
table.gridtable td {
background-color:#fff;
border-color:#666;
border-style:solid;
border-width:1px;
padding:8px;
}
table.gridtable td input {max-width: 60px;}
#tb-wrap {
width:92%;
margin:5px auto;
}
.closeWrapper {
position:relative;
display:inline-block;
height:20px;
top:-5px;
right:30px;
}
.close {
position:absolute;
width:20px;
height:20px;
}
.close::before,.close::after {
position:absolute;
content:' ';
background-color:#ccc;
width:0;
height:13px;
border:1px solid;
left:9px;
top:2px;
}
.close::before {
transform:rotate(45deg);
}
.close::after {
transform:rotate(-45deg);
}
.header .article:hover,.header .home:hover {
background-color:#0067d2;
}
.header .article span,.header .home span,.input-img {
display:none;
}
.site-login,.site-signup {
width:60%;
min-height:430px;
margin:20px auto 0;
}
#login-form button,#retrivepwd-form button,#modify-form button {
width:80%;
}
.article-content li {
margin-left: 7%;
}
.entry-content > p,.article-content > p {
text-indent:2em;
}
.form-textarea{
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.375rem 0.5rem;
    font-size: .9rem;
    color: #555;
    background-color: #fff;
    background-image: none;
    height: initial;
    min-height: 13.75rem;
    resize: vertical;
}
.form-btn{
    margin-bottom: 0.5rem;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.form-btn .btn:not(:last-child), .form-btn .form-input:not(:last-child) {
    margin-right: 0.4rem;
}
.btn-success:active, .btn-success:focus, .btn-success:hover {
    color: #fff;
    background-color: #23923d;
    border-color: #23923d;
}
.form-btn .btn, .form-btn .form-input {
    margin-bottom: 0.4rem;
}
.btn {
    border-radius: 3px;
    display: inline-block;
    font-weight: 400;
    color: #333;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #eee;
    background-color: #eee;
    padding: 0.375rem 0.75rem;
    font-size: .9rem;
    height: 2.25rem;
    line-height: 1;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-error {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
#wlink li {
    margin-bottom: 3px;
}
#wlink li a {
    font-size: 13px;
}
ul.ll li {margin: 10px 0;}
.article-content table {
    font-family: verdana,arial,sans-serif;
    /*font-size:14px;*/
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    width: 90%;
    margin: 0 auto;
}
.article-content table th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
.article-content table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
.article-content pre {
    width: 90%;
    /*margin: 0 auto;*/
    border-radius: 5px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}
span.tag {
	overflow: hidden;
	margin-bottom: 10px;
	margin-right: 5px;
	position: relative;
	display: inline-block;
	padding: 0 12px;
	font-size: 14px;
	line-height: 30px;
	vertical-align: top;
	border-radius: 66px;
	background: rgba(5, 109, 232, 0.1);
}
.tts-btn {
	display: inline-block; /* 使 span 可以设置宽高 */  
	width: 17px;  
	height: 15px;  
	background-image: url('https://cihuibao.cn/public/images/read.png'); /* 替换为你的背景图片 */  
	background-size: cover; /* 调整背景图片大小以适应 span */  
	cursor: pointer; /* 鼠标悬停时显示指针 */  
	margin-left: 6px;
}
code {
	padding: .2em .4em;
	margin: 0;
	font-size: 90%;
	background-color: #afb8c133;
	border-radius: 6px;
}
.audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333; /* 黑色背景 */
  /*padding: 10px 20px;*/
  box-sizing: border-box;
  text-align: center;
  z-index: 1000;
  border-top: 1px solid #444; /* 微微亮一点的分割线 */
}

audio {
  width: 90%; /* 控制音频播放器宽度 */
  max-width: 600px; /* 最大宽度 */
  background-color: transparent; /* 清除默认背景 */
  border-radius: 10px; /* 圆角效果 */
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 加点阴影效果 */
}

audio::-webkit-media-controls-panel {
  background-color: #333; /* 控制面板背景颜色 */
}

audio::-webkit-media-controls-play-button {
  background-color: #ff5500; /* 播放按钮颜色 */
  border-radius: 50%;
}

audio::-webkit-media-controls-volume-slider {
  background-color: #888;
}