html{background:#B7CBE8;}
body{background:#B7CBE8;font-size:14px; margin:0; line-height:1.5; color:#333; font-family:Arial, sans-serif;}
a{color:#34538b; text-decoration:none;}a:hover{text-decoration:underline;}
a img { border: 0; }
input,select,textarea{font-size:100%;}
pre{background-color: #fff; padding: 10px; margin-right: 10px; margin-top: 10px; box-shadow: inset 1px 0 rgba(0,0,0,.08), inset 0 1px rgba(0,0,0,.08);white-space: pre-wrap;}
content,code{font-family: 'Lucida Console', monaco, monospace;}
code{background-color: #f0f3f9;margin:0 2px;}
section+section{margin-top:2em; border-top: 1px dotted #ccc; padding-top: 1em;}
#header{height:60px; padding:0 0 0 40px; background-color:#a0b3d6;}
#header .logo{margin-top:12px; overflow:hidden; float:left;}
.logo:empty{width:167px; height:43px; background: url(//cdn.zhangxinxu.com/php/image/zxx_home_logo.png) no-repeat;}
.topa{position: absolute;right: 0;overflow: hidden;}
.main{width:100%; background:#beceeb;}
.main h1{line-height:40px; margin:0; text-align:center; font-size:18px; background:#c1d5eb; font-family:'kaiti','microsoft yahei'; text-shadow:0px 1px 0px #f2f2f2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#footer{background: #B7CBE8; border-top: 3px solid #A7BFE8; line-height: 1.5; color: #333; font-size:12px; padding:15px 0; font-family:'Lucida Grande',Verdana, Sans-Serif; text-align:center; text-shadow: 0 1px hsla(0,0%,100%,.3);}
#footer img{margin-bottom:-3px;}
.body{background-color: #f0f3f9; position: relative;}
.body:after{content:'';display: block;clear: both;}
.table{display:table;width:100%;table-layout:fixed;}
.td{display:table-cell;}
.aside-checkbox{display: none;}
section h3{margin-top: 1em; margin-bottom:.5em; font-size:18px;font-family: 'PingFang SC', 'Microsoft Yahei';}
.td h5 {margin: 1em 0 .25em; font-size:14px;}
.aside {width: 199px; float: left;}
.aside::before {
content: '';
position: absolute;
width: inherit;
border-right: 1px solid #dbdee5;
left: 0; top: 0; bottom: 0;
background-color: #fff;
}
.aside-main{overflow: hidden; position: relative;}
.aside-dl{margin: 10px 0;}
.aside-dt {
height: 30px;
line-height: 30px;
padding-left: 22px;
color: #9facba;
transition: height .25s;
}
.aside-dt:after {
content: '';
position: absolute;
border: 5px solid transparent;
border-top-color: currentColor;
margin: 10px 0 0 8px;
transform: rotate(-90deg);
}
.aside-dt[open]:after {
transform: rotate(0);
margin-top: 13px;
margin-left: 5px;
}
.aside-dd {margin: 0; text-indent: 1em;}
.aside-nav.active {
background-color: #f0f3f9;
color: #000;
font-weight: bold;
position: relative;
}
.aside-nav.active::before {
content: '';
position: absolute;
width: 4px; height: 4px;
border: 2px solid;
border-color: currentColor currentColor transparent transparent;
transform: rotate(45deg) scale(0.75);
left: 20px; margin-top: 6px;
}
.aside-nav {
display: block;
height: 21px;
padding: 12px 20px;
color: #4c5161;
transition: background-color .25s,color .5s;
cursor: pointer;
position: relative;
}
.aside-nav:hover { text-decoration: none; background-color: #f0f3f9; }
.article {
overflow: hidden;
padding: 20px;
font-size: medium;
}
.button {
padding: 8px 16px;
background-color: #cd0000;
color: #fff;
border: 0;
border-radius: 4px;
line-height: 20px;
}
.button:hover {
text-decoration: none;
}
.back{line-height:40px;margin-top:-40px; position:absolute; right:20px; padding: 0 10px 0 13px; background-color: #fff; animation:tada 1s 1s; color: #cd0000; font-size:12px;}
.backtop { position: fixed; right: 10px; bottom: 10px; background: rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M209.92 645.12c-10.24 0-15.36-5.12-20.48-10.24-15.36-10.24-15.36-30.72 0-40.96l307.2-276.48c10.24-10.24 30.72-10.24 40.96 0l302.08 276.48c10.24 10.24 15.36 30.72 0 40.96-10.24 10.24-30.72 15.36-40.96 0l-281.6-256L230.4 640c-10.24 5.12-15.36 5.12-20.48 5.12z' fill='%23fff'/%3E%3Cpath d='M517.12 952.32c-15.36 0-30.72-15.36-30.72-30.72V353.28c0-15.36 15.36-30.72 30.72-30.72s30.72 15.36 30.72 30.72V921.6c0 20.48-10.24 30.72-30.72 30.72zM824.32 256H204.8c-20.48 0-30.72-10.24-30.72-30.72s15.36-30.72 30.72-30.72h619.52c15.36 0 30.72 15.36 30.72 30.72S839.68 256 824.32 256z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center; background-size: 20px 20px; color:#fff; width: 20px; height: 20px; border-radius: 50%; text-align: center; border: 5px solid transparent; display: none; transition: background-color .15s; font-size: 12px; z-index: 9;}
.backtop:hover{background-color: rgba(0,0,0,.65);color:#fff; text-decoration: none;}
@media screen and (max-width: 640px) {
.article{padding: 16px;}
.topa{display: none;}
.td{display:block;}
.td pre{margin-right: 0;}
#header{padding-left: 4px;}
.main h1{text-align: left; padding-left: 16px;}
.aside-checkbox{
display: block;position: absolute; opacity: 0;
right: 10px; width: 30px; height: 30px; top: -30px;
}
.aside-dl {
display: inline-block;
width: 100%;
}
.aside-dl:first-child {
margin: 0;
}
.icon-menu {
position: absolute;
right: 10px; top: -30px;
width: 30px; height: 3px;
padding: 6px 0;
border-top: 3px solid;
border-bottom: 3px solid;
background-color: currentColor;
background-clip: content-box;
color: #fff;
transform: scale(0.8333);
filter: drop-shadow(1px 1px rgba(0,0,0,.05));
}
.icon-menu:hover {
color: #fff;
}
.back {right:0;top:10px;margin-top:0;}
:checked + .icon-menu {
color: transparent;
}
:checked + .icon-menu::before,
:checked + .icon-menu::after {
content: '';
border-top: 3px solid #fff;
width: inherit;
position: absolute;
top: 50%; margin-top: -2px;
transform: rotate(45deg);
}
:checked + .icon-menu::after {
transform: rotate(-45deg);
}
.aside {
min-height: calc(100vh - 100px);
position: absolute;
left: 0; right: 0; top: 0;
width: auto;
z-index: 2;
box-shadow: 0 calc(100vh - 100px) #fff;
display: none;
}
.aside::before {
right: 0;
}
:checked ~ .aside {
display: block;
}
.aside-main {
columns: 2;
}
:checked ~ .article {
height: calc(100vh - 100px - 111px - 40px);
overflow: hidden;
}
}