body { padding-top: 70px; }
/* css切换按钮 */
.css-switch {position: relative;width: 70px;height: 30px; margin: 0 15px;}
.css-switch input {opacity: 0;width: 0;height: 0;}
.css-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: .4s;border-radius: 15px;}
.css-slider:before {position: absolute;content: "";height: 30px;width: 30px;top:0;left:1px;background-color: white;transition: .4s;border-radius: 50%;}
input:checked + .css-slider {background-color: #2B2B2B;}
input:focus + .css-slider {box-shadow: 0 0 1px #2B2B2B;}
input:checked + .css-slider:before {transform: translateX(40px);}
.css-bright, .css-dark {position: absolute;top: 50%;transform: translateY(-50%);color: white;font-size: 12px;font-weight: bold;transition: opacity 0.4s;z-index: 1;}
.css-bright {left: 12px;opacity: 0;}
.css-dark {right: 12px;opacity: 1;}
input:checked + .css-slider .css-bright {opacity: 1;}
input:checked + .css-slider .css-dark {opacity: 0;}
/*登录按钮*/
#login-btn{margin-right: 0;}
.login-ok:hover .user-info { display: block;}
.user-info{ position:absolute; display: none; list-style-type: none; width: 100px; right: 0; z-index: 999; border: 1px solid #ccc; border-radius: 5px; padding: 5px;}
.user-info li{ height: 30px; text-align: center; line-height: 30px; color: #595959;}
.user-info li a:hover{color: #2B2B2B;}
.user-info li a{color: #595959; text-decoration: none;}
/*子页导航位置*/
.weizhi{ font-size: 14px; color: #595959; padding-left: 15px;}
.weizhi a { color: #595959;}
.weizhi a:hover{ color: red; text-decoration: none; }
/* 简历模态框 */
.resume{border-radius: 10px;}
.resume input{ height: 35px; width: 100%}
.resume button:nth-of-type(1) { float: left; }
.resume button:nth-of-type(2) { float: right; }
/*******************************************************
index
 ******************************************************/
/* 博文帖子 */
.index-blog a{text-decoration: none; }
.index-blog h2{ font-size: 18px;}
.index-blog img{width: 150px; height: auto; max-height: 100px; float: left; margin-right: 15px;}
.index-blog .panel-body span { -webkit-line-clamp: 4;word_break: break-word; font-size: 16px; color: #595959; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.index-blog .panel-footer{text-align: right;}
.index-blog .panel-footer span{ margin-right: 20px;}
.index-blog:hover img{transform: scale(1.1)}
.index-blog:hover h2{color: red; text-decoration: underline;}
/* 侧边栏 分页导航 */
.paginate { margin-bottom: 50px; }
.pageinput { width: 50px; height: 24px; }
/* 侧边栏 */
aside { word-break: break-all; }
aside a{text-decoration: none; color: #595959;}
aside a:hover{color: red; text-decoration: none;}
/* 侧边栏 我的相册 */
.aside-pics { overflow: hidden; margin: 0;padding: 0;}
.aside-pics ul { overflow: hidden; margin: 0; padding: 0;}
.aside-pics ul li { width: 33.333%; float: left;  list-style: none; }
.aside-pics ul li a { display: block; height: 60px; margin: 2px; overflow: hidden; background: #000 }
.aside-pics ul li img { width: 100%; min-height: 100%; opacity: .8; transition: all .5s; }
.aside-pics ul li a:hover img { opacity: 1; transform: scale(1.1) }
/* 侧边栏 访问记录 */
.aside-access-record{margin-bottom: 0;}
/* 侧边栏 推荐 */
.aside-recommend{ margin-bottom: 0; }
/* 侧边栏 标签云 */
.aside-tags-cloud { margin-bottom: 0; }
.aside-tags-cloud ul {padding:0; overflow: hidden; position: relative; margin-bottom: 0; }
.aside-tags-cloud a { display: inline-block; background: #ffffff; width: 33.3333%; font-size: 14px; float: left; line-height: 35px; text-align: center; position: relative; }
.aside-tags-cloud a:nth-child(3n-1):before { width: 1px; height: 100%; content: ""; position: absolute; background: #eae5e5; left: 0; top: 0; }
.aside-tags-cloud a:nth-child(3n-1):after { width: 1px; height: 100%; content: ""; position: absolute; background: #eae5e5; right: 0; top: 0; }
.aside-tags-cloud a:nth-child(6n+1) { background: #f5f5f5; }
.aside-tags-cloud a:nth-child(6n+2) { background: #f5f5f5; }
.aside-tags-cloud a:nth-child(6n+3) { background: #f5f5f5; }
.aside-tags-cloud a:hover { background: #e01109; color: #fff; text-decoration: none;  }
/* 侧边栏 点击排行 */
.aside-click-head { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.aside-click-head ol { padding: 10px; }
.aside-click-head ol li { line-height: 2; }
/*登录框*/
#login-panel{position: sticky; z-index: 1;}
#login-panel .close-login{position: absolute; background-color: transparent; border: 0; right: 0;top: 0;}
.login-registration{width:300px;border:2px solid #337AB7;border-radius:5px}
.login-registration .tab-content{padding:10px}
.login button,.register button{width:100%}
.login div,.register div{padding:5px 0}
.login-registration .yzm{width:100px;height:32px;border-radius:0 3px 3px 0}
#dropdownMenu1{ max-width: 100px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/*******************************************************
article
 ******************************************************/
.article { word-break: break-all; }
.article img{max-width: 100%; height: auto;}
/*顶部导航位置*/
.article .weizhi { font-size: 14px; color: #505050; padding-left: 15px;}
/*引用*/
.article blockquote {margin-left: 1em; padding: 0.5em 0.5em 0.1em 0.5em; color: #666; border-left: 5px solid #ccc;}
/*表格*/
.article table { border-collapse: collapse; width: 100%; max-width: 100%; margin-bottom: 20px;}
.article table th, table td {padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd;}
.article table th {font-weight: bold;}
.article tr:nth-child(odd) {background-color: #f9f9f9;}
.article tr:nth-child(even) {background-color: white;}
/*主体*/
.article .about h1:first-child {line-height: 40px; border-left: #000 4px solid; background-color: #A6B7FB; padding-left: 10px; margin:0; }
.article .about {line-height: 1.2; backdrop-filter: blur(50px);}
.article .about p:nth-child(2) {margin-top: 10px;}
.article .about p:nth-child(2) span{color: #505050; font-size: 13px; margin-right: 5%;}
.article .about p { margin:0;line-height:1.5; margin-bottom: 5px;}
/*图片放大模态框*/
.article #imgmodal { position: fixed; z-index: 1; left: 0; top: 0; padding-top: 50px; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9);}
.article #imgmodal .close { color: white; z-index: 2; position: absolute; top: 70px; right: 10%; font-size: 35px; font-weight: bold;}
.article #imgmodal .close:hover, #imgmodal .close:focus {color: #ccc; text-decoration: none; cursor: pointer;}
.article #modalImage {margin: auto; display: block; width: 80%;}
/*右侧导航栏*/
.article #sidebar {top: 0; position: fixed; right: -260px; width: 300px; height: 100vh; z-index: 1031; overflow-y: auto; transition: all 0.3s ease-in-out;}
.article #sidebar.hidden-sidebar { transform: translateX(-260px); }
.article #sidebar ul { margin-top: 0; height: auto; min-height: 100vh; margin-left: 40px; padding: 0; list-style: none; background: linear-gradient(to bottom, #596A7A, #DEA078); font-size: 13px; line-height:1;}
.article #sidebar a { display: block; padding: 5px 10px; color: #eee; text-decoration: none; transition: all 0.3s ease-in-out; }
.article #sidebar a:hover { color: #fff; opacity: 0.5; }
.article #toggle-sidebar{position: inherit; float: left; top: 10vh; width: 40px; height: 10vh; color: #fff; background-color: #596A7A; border: 3px solid #fff; border-radius:10px; }
.article nav { padding-bottom: 50px; }
/*******************************************************
saying
 ******************************************************/
.suiyan_text { font-size: 14px; }
.suiyan_list ul li a:hover { z-index: 9; }
.saying .suiyan_list ul { overflow: hidden; }
.saying .suiyan_list ul li { width: auto; float: left; list-style: none;}
.saying .suiyan_list ul li a { max-width: 240px; height: auto; transform: rotate(-10deg); position: relative; color: #333; text-decoration: none; display: block; padding: 20px; margin: 30px auto; background: #fff; box-shadow: rgba(0,0,0,.1) 3px 5px 5px; }
.saying .suiyan_list ul li:nth-child(even) a { -webkit-transform: rotate(10deg); top: 10px; background: rgb(255, 255, 205); ; }
.saying .suiyan_list ul li:nth-child(3n) a { -webkit-transform: rotate(-5deg); top: -10px; background: rgb(254, 201, 227); }
.saying .suiyan_list ul li:nth-child(5n) a { -webkit-transform: rotate(8deg); top: -10px; background: rgb(210, 251, 253); }
.saying .suiyan_list ul li a:hover { transform: scale(1.1); transition: .2s; box-shadow: rgba(0,0,0,.5) 3px 5px 5px; }
.saying .suiyan_time { font-size: 14px; color: #999; margin-bottom: 10px; }
.saying .suiyan_text { line-height: 30px; }
.saying .suiyan_list span { position: absolute; width: 50px; height: 50px; bottom: 5px; right: 5px; }

/*******************************************************
time-base
 ******************************************************/
.time-base .time_list { background: white;}
.time-base .time_list li { line-height: 36px; list-style: none;}
.time-base .time_list li a {  text-decoration: none; color: #222222; display: block; position: relative;margin-left: 100px;}
.time-base .time_list li a:hover { color: red; }
.time-base .time_list li span { float: left; color: #999; width: 100px; }
.time-base .time_list ul { position: relative; background-color: white;}
.time-base .time_list ul:before {  position: absolute; content: ""; width: 2px; height: 100%; background: #ccc; left: 120px; top: 0; }
.time-base .time_list li a:before { position: absolute; content: ""; width: 12px; height: 12px; background: #fff; border: #ccc 2px solid; border-radius: 100%; left: -25px; top: 10px; }
.time-base .time_list li a:hover:before { background: red;}
/*******************************************************
photo
 ******************************************************/
.photo .thumbnail { padding-bottom: 0;}
.photo .thumbnail .caption{ margin-bottom: 0; padding-bottom: 0}
.photo .thumbnail img { width: 100%; height: 160px;}
.photo .thumbnail p a { width: 100%;}