@charset "utf-8";
/*
Theme Name: Fanly
Version: 2.0.1 (Optimized)
*/

/* ====================================
   1. CSS Variables (Custom Properties)
   ==================================== */
:root {
    /* Theme Colors */
    --main-color: #00AAEE; /* Primary Blue/Cyan */
    --main-text-color: #273746;
    --light-border-color: #f0f0f0;
    --deep-border-color: #dedede;
    --dark-bg-color: #1B1C21;
    --light-bg-color: #f6f6f6;
    --neutral-gray: #999;
    
    /* Layout */
    --desktop-width: 1200px;
    
    /* Box Styles */
    --card-shadow: 0 1px 3px rgba(0,0,0,.03);
    --card-radius: 2px;
    
    /* Common Properties */
    --button-padding: 8px 15px;
    --button-font-size: 16px;
    --line-height-base: 1.8em;
}

*{border:0; margin:0; padding:0; outline: none;}
body {
    font-family: Arial,"Microsoft yahei","Hiragino Sans GB","冬青黑体简体中文 w3",STXihei,"华文细黑","微软雅黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    font-size: 16px;
    color: var(--main-text-color);
    background: var(--light-bg-color);
}
/* 使用变量 */
a, a:link, a:visited {color: var(--main-text-color); text-decoration: none; outline: none; }
a:hover{color: var(--main-color);}
ul,li{list-style:none;}
/* 建议在可能的情况下改用 Flexbox/Grid，减少 .clear 的依赖 */
.clear{clear:both;content: '';display: table; }

/* container */
.container{width:var(--desktop-width);margin:0 auto;}

/* ====================================
   2. Header & Navigation (使用变量)
   ==================================== */
/*greeting*/
#greeting{height:50px;line-height:50px;background:var(--main-color);color:#fff;overflow: hidden;}
#greeting .messages{float:left;width:96%;margin:0;font-size:16px;display:inline-block;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#greeting a{color:#fff}
#greeting .close-greeting{float:right;color:#fff;cursor:pointer}

/*header*/
#header{margin-bottom: 5px;}

/* 使用变量和阴影变量 */
#header .navbar{height: 90px; border-top: 3px solid var(--main-color); border-bottom: 1px solid var(--light-border-color); line-height: 90px;background: #FFF;box-shadow: var(--card-shadow);z-index:999;}

#header .logo{float:left;margin-right: 0px;}
#header .logo a{display: block;}
#header .logo a:hover{color:#2a363c}
#header .logo a img{vertical-align: middle;}

#header .navbar-menu{float:left;font-size:16px;}
#header .navbar-menu ul>li{float:left;position: relative;z-index:999;}
#header .navbar-menu ul>li a{display:block; padding:0 10px;}
#header .navbar-menu ul.sub-menu li{float:none;height:60px; line-height:60px;border-bottom:1px solid var(--light-border-color);}
#header .navbar-menu ul.sub-menu li a{height:60px; line-height:60px;}
/* 使用变量 */
#header .current-menu-parent>a, #header .current-menu-item>a, .sub-menu li.current-menu-item a{color: var(--main-color);}
/* 移除无效的 Base64 图片路径 */
#header .navbar-menu ul>li.menu-item-has-children>a:after{
    content: '';
    display: inline-block; 
    width: 7px; 
    height: 4px;
    vertical-align: middle; 
    margin-left: 6px; 
    /* background: url("data:image/png;base64,") no-repeat;  <-- FIXED/REMOVED */

}
#header .navbar-menu ul>li.menu-item-has-children:hover a:after{}
#header .navbar-menu ul>li .sub-menu{display:none;}
#header .navbar-menu ul>li:hover .sub-menu{display:block;position: absolute;width: 200px;background: #FFF;border:1px solid var(--light-border-color);z-index:99;}

#header .navbar-search{float: right;padding: 0 12px;}
#header .navbar-search .search-show i{font-size: 22px;}
/* 使用变量 */
#header .navbar-search .search-show i.font-color{color: var(--main-color);}

#header .site-search{ display:none;width: 100%;padding: 12px 0;background-color: #FFF; border-bottom: 1px solid var(--light-border-color);position: absolute; z-index: 99;}
#header .search-form{padding: 12px 125px;overflow: hidden;}
#header .search-input{float:left;color:var(--neutral-gray);border:solid 1px #ddd;width:600px;height: 40px; line-height:40px;padding:4px 0 4px 12px;border-right: none;font-size: 16px;border-radius: 2px 0 0 2px;outline: none}
/* 使用变量 */
#header .search-input:focus{border-color: var(--main-color);}
/* 使用变量 */
#header .search-btn{color:#fff;border: none;background: var(--main-color);width: 136px;height: 50px;font-size: 16px;border-radius: 0 2px 2px 0;}
#header .search-btn:hover, .search-btn:focus{color:#fff;opacity: 0.85;filter:alpha(opacity=85);}
#header .search-form a{margin-left: 20px;color: var(--neutral-gray);}
/* 使用变量 */
#header .search-form a:hover{color: var(--main-color);}

#header .navbar-other{float:right;}

/* ====================================
   3. Main Layout (Flexbox 布局)
   ==================================== */
#main{
    /* 现代化布局: 使用 Flexbox 替换浮动，使主内容和侧边栏更健壮 */
    display: flex;
    justify-content: space-between; /* 在内容和侧边栏之间分配空间 */
    margin-top:5px;
}
/* 移除 float:left; */
#main .content{ width:810px;}

/* nav */
.breadcrumb {
    width: 1200px;
    line-height: 30px;
    margin: 0 auto;
    padding-left: 50px;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}
/* foucs */
.sticky .caption:hover{border-left: 2px solid var(--main-color);}
.sticky .slide-left{float:left;width:450px;height:300px;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.sticky .slide-right{float:right;position:relative;width:380px;height:300px;padding:0 15px;background: #FFF;}
.slide-right .hotinfo-tit a {
    color: #d80707;
}
.sticky .slide-left img{width:390px;height: 260px;display:block;}

.sticky{overflow:hidden;position:relative; margin-bottom: 20px;height: 300px;
  float:right;width:410px;}
.sticky .item{height:300px;display:block;
  width: 410px;}

#slide_left_img{
float: left;
    width: 400px;
    height: 300px;
}

/* right text */
.slide-right .hotinfo-tit{height:auto;text-align:left;padding:12px 0;font-weight: 100;font-size:20px;}
.slide-right h2{border-bottom: 1px solid var(--light-border-color); position: relative;}
/* 使用变量和公共逻辑 */
.slide-right h2 i{content: ""; background-color: var(--main-color); left: 0; width: 2em; height: 2px; bottom:0px; position: absolute;}
.slide-right .hotinfo-desc{font-size:16px;line-height:30px;margin-top: 10px;letter-spacing: 0.7px;text-align: justify;}
.slide-right .hotinfo-item{padding-top:10px;position:relative;margin-top:0px;}
.slide-right .hotinfo-item img{display:inline-block;width:20px;height:20px;border-radius:100%;margin-right:10px;vertical-align:middle;overflow:visible;}
.slide-right .hotinfo-item .author img{float:left;}
.slide-right .hotinfo-item .hotinfo-link{position:absolute;top:10px;right:0;font-size: 14px;}
.slide-right .author{padding-bottom:3px;font-size: 14px;}
.slide-right .author span{ display:block; line-height: 20px;}
.slide-right .hotinfo-link .button {
	padding: 5px 10px;
	text-align: center;
	background-color: #282828;
	color: #fff;
}
.slide-right .hotinfo-link .button:hover{background-color:var(--main-color);}
.slide-right img.doublearrow{height:12px;width:12px;position:absolute;margin-top:3px;}

/* new */
.new{ float:left; width:820px;margin: 0 0 20px -10px;}
.new ul>li{ float:left; width:263px; height:160px; overflow:hidden; margin-left:10px;background-repeat: no-repeat;background-size: 100% 100%;background-position: center center;}
.new a{width: 263px;height: 160px;display: block;position:relative;cursor: pointer;}
.new a h2{word-break: inherit;position:absolute;bottom:10px;font-size: 13px;color: #fff;line-height: 20px;font-weight: 400;width:auto;max-width: 168px;height:auto;max-height:40px;background: #000000;filter:alpha(opacity=60);opacity: 0.6;padding: 3px 6px;
overflow: hidden;text-overflow:ellipsis;}
.new ul>li:hover a h2{border-left: 2px solid #282828;}

/* catTitle */
.f-title h1{font-size: 22px;border-bottom: 2px solid var(--light-border-color); padding-bottom: 10px; margin-bottom: 10px;}
.f-title h1 b { border-bottom: 2px solid var(--main-color); padding-bottom: 11px;}

/* article wrap (Flexbox 布局) */
.post{
    /* 现代化布局: 使用 Flexbox 替换浮动 */
    display: flex;
    width: 780px;
    padding: 25px 15px;
    background: #FFF;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    margin-bottom:20px;
}
/* 移除 float:left; */
.post .thumb{
    width:225px;
    height:150px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: 15px;
}
.post .thumb img{display:block; max-width: 100%; height: auto;} /* 增加响应式图片属性 */
.post .thumb .cat{padding: 6px 10px;margin-right: 0; float: right; color: #FFF; font-weight: normal; background: var(--main-color); line-height: 16px; position: absolute;}
.post .thumb .link{display:block;width:225px;height:150px;}

/* 移除 float:right; */
.post .info{
    position:relative;
    width:535px;
    height:180px;
    padding-left:20px;
    background: #FFF;
    letter-spacing: 0.7px;
}
.post .info h2.info-tit{text-align:left;padding-bottom: 10px;font-size:20px;font-weight:100;line-height:30px;}
.post .info h2{border-bottom: 1px solid var(--light-border-color); position: relative;}
/* 使用变量和公共逻辑 */
.post .info h2 i{background-color: var(--main-color); left: 0; width: 2em; height: 2px; bottom: 0px; position: absolute;}
.post .info .info-desc{font-size:16px;line-height:var(--line-height-base);margin-top: 10px;text-align: justify;}
.post .info .info-item{float: left;line-height: 40px;font-size:14px;position:absolute;}
.post .info  span{float:left; margin-left:26px;}
.post .info .author{margin-left: 0;}
.post .info .author a{max-width: 92px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.post .info .author img.avatar{display:inline-block;width:20px;height:20px;border-radius:100%;margin-right:10px;vertical-align:middle;overflow:visible;}
.post .info i.iconfont{margin-right: 4px;font-size:12px}

/* ====================================
   4. Sidebar & Widgets (样式精简)
   ==================================== */
/* 移除 float:right; */

.container {
  display: flex; /* 关键：将父容器设置为弹性容器 */
  /* 其他可选属性，让它们分布得更好：*/
  justify-content: space-around; /* 子元素在主轴（水平）上平均分布 */
  width: 1200px;
}
.sidebar {
  padding: 0;
  width:360px; overflow:hidden;padding-left:15px;
}

.sidebar{width:360px; overflow:hidden;padding-left:15px;}
.sidebar .widget{float: left;width: 360px;background: #FFF;margin-bottom: 20px;}
/* widget */
.widget h3{border-bottom: 2px solid var(--light-border-color);height: 32px;margin-bottom: 10px;}
/* 使用变量 */
.widget .widget_box b{border-bottom: 2px solid var(--main-color);display: inline-block; height: 32px;}
.widget .widget_box{padding:25px}
.widget_box_content {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 25px;
}
/* fanly_widget_comments */
.fanly_widget_comments ul a{padding: 10px 15px 10px 50px;display: block;border-bottom: 1px solid #eee;overflow: hidden;position: relative;font-size: 12px;color: var(--neutral-gray);line-height: 20px;}
.fanly_widget_comments ul li:last-child a{border-bottom: none;}
.fanly_widget_comments ul a:hover{color: var(--neutral-gray);background-color: #fbfbfb;}
.fanly_widget_comments strong{color: #45B6F7;}
.fanly_widget_comments .avatar{float: left;width: 36px;height: 36px;margin: 3px 0 0 -46px;border-radius: 50%}
/* fanly_widget_ads */
.fanly_widget_ads .widget_box{padding:0}
.fanly_widget_ads .widget_box a img{vertical-align: middle;}
/* fanly_widget_tags */
.fanly_widget_tags .items{overflow: hidden;}
.fanly_widget_tags .items a{color: var(--neutral-gray);border: 1px solid var(--light-border-color);float: left;margin: 0 6px 6px 0;padding: 0 8px;font-size: 12px;height: 29px;line-height: 29px;overflow: hidden;}
.fanly_widget_tags .items a:hover{color: #fff;background-color:#3A3A3A;}
/* fanly_widget_readers */
.fanly_widget_readers .widget_box{float: left;width: 260px;}
.fanly_widget_readers li{float:left;width: 40px;height: 40px;margin: 6px}
.fanly_widget_readers li a{display: block}
.fanly_widget_readers li a, .widget_ui_readers li a:hover{color: #fff}
.fanly_widget_readers li:hover{z-index: 20}
.fanly_widget_readers li:hover .avatar-popup{display: block}
.fanly_widget_readers .avatar{width: 100%;height: 100%;border-radius: 20px;}

/* fanly_widget_texttip (精简重复样式) */

/* 提取共同的 strong 样式到这里作为基础 */
.fanly_widget_texttip a strong,
.widget_box [class*="strong"] { /* 覆盖 widget_box 里的 strong 标签 */
    display: inline-block;
    padding: var(--button-padding); 
    color: #fff;
    font-size: var(--button-font-size); 
    font-weight: normal;
    line-height: 18px;
}

.fanly_widget_texttip .widget_box {
    /* 保持原样 */
}
.fanly_widget_texttip{border: none;border-radius: 0}
.fanly_widget_texttip a{display: block;line-height: 25px;padding-bottom: 15px;}
.fanly_widget_texttip a h2{font-size: 20px;font-weight: normal;margin: 12px 0;}
.fanly_widget_texttip a p{color: #717070;line-height: var(--line-height-base);}

/* defaule blue */
.fanly_widget_texttip a.blue{color: var(--main-color);}
.fanly_widget_texttip a.blue strong{
    margin: -1px 0 0 0; /* 恢复基础 margin */
    padding: 4px 15px; /* 恢复基础 padding */
    font-size: 14px; /* 恢复基础 font-size */
    background: var(--main-color);
}
/* red */
.fanly_widget_texttip a.red{color:#1888e6;}
.fanly_widget_texttip a.red strong{
  background-color:red;
  /* 继承其他属性，只覆盖需要的 */
}
/* green */
.fanly_widget_texttip a.green{color:green;}
.fanly_widget_texttip a.green strong{background-color:green;}
/* purple */
.fanly_widget_texttip a.purple{color:purple;}
.fanly_widget_texttip a.purple strong{background-color:purple;}
/* gray */
.fanly_widget_texttip a.gray{color:gray;}
.fanly_widget_texttip a.gray strong{background-color:gray;}


/* fanly_widget_statistics */
.fanly_widget_statistics ul{overflow: hidden;line-height: 26px;color: #888;}
.fanly_widget_statistics li{float: left;width: 50%; font-size: 12px;}
.fanly_widget_statistics li strong{color: #555555;}

/* fanly_widget_posts / views / sticky / modified */
.fanly_widget_posts li:last-child a,.fanly_widget_views li:last-child a,.fanly_widget_sticky li:last-child a,.fanly_widget_modified li:last-child a{border-bottom: none;margin-bottom: 0px; padding-bottom: 0px;}
.fanly_widget_posts li a,.fanly_widget_views li a,.fanly_widget_sticky li a,.fanly_widget_modified li a{color: #333;border-bottom: solid 1px #eee;overflow: hidden;position: relative;display: block;font-size: 16px; margin: 10px 0;padding-bottom: 5px;line-height: 1.5em;}
.fanly_widget_posts li a:hover .text,.fanly_widget_views li a:hover .text,.fanly_widget_sticky li a:hover .text,.fanly_widget_modified li a:hover .text{color: #45B6F7;}
.fanly_widget_posts .text,.fanly_widget_views .text,.fanly_widget_sticky .text,.fanly_widget_modified .text{font-size: 14px;display: block;padding-bottom: 3px;overflow: hidden;text-overflow: ellipsis;text-align: justify;}
.fanly_widget_posts .thumbnail,.fanly_widget_views .thumbnail,.fanly_widget_sticky .thumbnail,.fanly_widget_modified .thumbnail{float: left;margin-right: 12px;width:100px;height:66px;background-repeat: no-repeat;/*background-size:100% 100%;*/background-position: center center;}
.fanly_widget_posts .muted,.fanly_widget_views .muted,.fanly_widget_sticky .muted,.fanly_widget_modified .muted{margin-right: 15px;font-size: 12px;color: #989696;}
.fanly_widget_posts .nopic .text,.fanly_widget_views .nopic .text,.fanly_widget_sticky .nopic .text,.fanly_widget_modified .nopic .text{margin-top: 0;color: #333;}
.fanly_widget_posts .nopic .text:hover,.fanly_widget_views .nopic .text:hover,.fanly_widget_sticky .nopic .text:hover,.fanly_widget_modified .nopic .text:hover{color: #45B6F7;}

/* fanly_widget_categories */
.fanly_widget_categories .widget_box{ float:left; width:310px;}
.fanly_widget_categories ul>li{ float:left; width:50%;line-height: 26px;}
/* fanly_widget_text */
.fanly_widget_text .widget_box .textwidget{ width:310px; overflow:hidden}
.fanly_widget_text .widget_box .textwidget p{padding: 4px 0;}
/* fanly_widget_links */
.fanly_widget_links .widget_box{ float:left; width:310px;}
.fanly_widget_links a{line-height: 26px;}
.fanly_widget_links ul>li{float:left; width:50%;line-height: 26px;}

/* Default widget_rss */
.widget_rss ul>li .rsswidget{display: block;width:260px;line-height:26px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
/* Default widget_recent_entries */
.widget_recent_entries ul>li{padding: 3px 0;}
/* Default widget_pages */
.widget_pages .widget_box{ float:left; width:260px;}
.widget_pages ul>li{float:left; width:50%;line-height: 26px;}

/* Calendar Widget */
#calendar_wrap #wp-calendar{width:100%;}
#calendar_wrap table{border-collapse: collapse; border-spacing: 0;}
#calendar_wrap caption{font-size: 14px; font-weight:bold; margin:8px 0 5px 0;}
#calendar_wrap table #today{background: #e1e1e1;}
#calendar_wrap table thead th{padding: 1px;width:14.2857%;text-align:center;background: var(--neutral-gray);border:1px solid #FFF;color: #FFF;font-weight:bold;line-height: 28px;text-shadow:none;}
#calendar_wrap table td{width:14.2857%;padding:5px 0px 6px 0px;text-align:center;border:1px solid #FFF;background:#efefef;color:#777;}
#calendar_wrap table tfoot td#prev, #calendar_wrap table tfoot td#next{text-align: center;padding:1px;}
#calendar_wrap table td.pad{background:none;border:none;}

/* articles */
.f-box{float: left; width: 750px;padding: 30px 30px 20px 30px;background: #FFF;border-radius: var(--card-radius);box-shadow: var(--card-shadow);margin-bottom:20px;}
.next-link {
	background: #fff;
	margin: 0px 0 20px 0;
	float: left;
	line-height: 30px;
	padding: 10px 0px 10px 30px;
	width: 780px;
    font-size: 16px;
}
#articles .f-box h3{border-bottom: 2px solid var(--light-border-color); padding-bottom: 10px; margin-bottom: 16px;}
#articles .f-box h3 b{border-bottom: 2px solid var(--main-color); padding-bottom: 11px;}
.f-box p{line-height:30px;font-size:16px;}

/* single */
.single{}
.single .single-top{ margin-bottom:20px;}
.single h1{border-bottom: 1px solid var(--deep-border-color);position: relative;}
.single h1.title{text-align: center; padding-bottom: 10px; margin-bottom: 10px;font-size: 24px; font-weight: 400; line-height: 36px; font-style: normal;letter-spacing: 0.7px;}
/* 使用变量 */
.single h1 i {/*background-color: var(--main-color);*/ left: 0; width: 2em; height: 3px; bottom: -2px; *bottom: 2px; position: absolute;}
.single .info{height: 20px;line-height: 20px; font-size: 12px; position: relative; margin-top: 10px; overflow: hidden;text-align: center;}
.single .info  span{font-size:14px; margin-left:26px;}
.single .info .author{margin-left: 0;}
.single .info .author a{max-width: 92px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.single .info .author img.avatar{display:inline-block;width:20px;height:20px;border-radius:100%;margin-right:10px;vertical-align:middle;overflow:visible;}
.single .info i.iconfont{margin-right: 4px;font-size:12px}
/* 优化标题样式 */
.single .single-content h1,.single .single-content h2{font-size: 18px;border-left: 4px solid var(--main-color);padding-left: 16px;margin: 26px 0;line-height: 36px;}
.single .single-content h3,.single .single-content h4,.single .single-content h5,.single .single-content h6{font-size: 16px;border: 0 !important;border-left: 2px solid var(--main-color) !important;padding-left: 16px;padding-bottom: 0 !important;margin: 10px 10px !important;line-height: 32px;}
.single .single-content {line-height:var(--line-height-base);font-size: 16px;overflow: hidden;letter-spacing: 0.7px;text-align: justify;}
.single .single-content p{margin-bottom: 20px;}
.single .single-content p a{color: #0AE;}
.single .single-content p a:hover{border-bottom: 1px solid #0AE;}
.single .single-content p img {max-width:100%; height: auto; _width: expression((document.documentElement.clientWidth||document.body.clientWidth)<638?"638px":"auto"); overflow: hidden; display: block; margin: 0 auto;border: 1px solid #F5F5F5; border-radius: 5px;}
.single .single-content p embed{display: block;max-width:100%;margin: 0 auto;}
.single .single-content ul,.single .single-content ol{margin-bottom: 20px;}
.single .single-content ul li{font-size:16px;list-style-type: disc;padding: 0;margin-left: 40px;margin-bottom: 12px;}
.single .single-content ol li{font-size:16px;list-style-type: decimal;padding: 0;margin-left: 40px;margin-bottom: 12px;}

/* page */
.page-box{float: right; width: 780px;padding: 20px 20px;background: #FFF;border-radius: var(--card-radius);box-shadow: var(--card-shadow);margin-bottom:20px;}
.page-box h3{border-bottom: 2px solid var(--light-border-color); padding-bottom: 10px; margin-bottom: 16px;}
.page-box h3 b{border-bottom: 2px solid var(--main-color); padding-bottom: 11px;}

.page{}
.page .page-menu{float:left;background: #FFF; display: block; width: 160px; height: auto; position: relative; border-bottom: 2px solid #DDD;}
.page .page-menu li:last-child{border-bottom: none !important;}
/* 使用变量 */
.page .page-menu li.current-menu-parent, .page .page-menu li.current-menu-item {border-left: 3px solid var(--main-color);}
.page .page-menu li.current-menu-parent a, .page .page-menu li.current-menu-item a {color: var(--main-color); font-weight:bold;}
.page .page-menu li {border-left: 3px solid #fff; border-bottom: 1px solid #EEEEEE; font-size: 14px; height: 46px; margin-bottom: 1px; overflow: hidden;}
.page .page-menu li a {height: 46px; line-height: 46px; display: block; color: #333; text-align:center}
/* 使用变量 */
.page .page-menu li:hover {border-left: 3px solid var(--main-color);}

.page .page-content{float:right;width: 780px; background: #FFF; padding: 0 20px; margin-bottom: 20px;}
.page .page-content h1{margin:20px 0;border-bottom:3px solid var(--light-border-color); padding-bottom: 3px; width: 100%; height: 32px;}
/* 使用变量 */
.page .page-content h1 b{display: inline-block; height: 35px; font-size: 20px; overflow: hidden; color: var(--main-color); border-bottom: 3px solid var(--main-color);}

.page .info{height: 20px;line-height: 20px; font-size: 14px;margin-bottom: 16px;overflow: hidden;}
.page .info  span{font-size:14px; margin-right:20px;}
.page .info .author{margin-left: 0;}
.page .info .author a{max-width: 92px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.page .info .author img.avatar{display:inline-block;width:20px;height:20px;border-radius:100%;margin-right:10px;vertical-align:middle;overflow:visible;}
.page .info i.iconfont{margin-right: 4px;font-size:14px}

.page .page-content .page-links{margin-bottom: 20px;}
.page .page-content .page-links .item{padding-bottom: 20px;}
.page .page-content .page-links .item ul{clear: both; overflow: hidden;}
.page .page-content .page-links .item ul li{float:left;width: 20%;}
.page .page-content .page-links .item ul li a{display: block;height: 16px;line-height: 16px; padding: 8px 10px; overflow: hidden; border: 1px solid #eaeaea; margin: 10px 10px 0 0; white-space: nowrap;text-overflow: ellipsis;}
/* 使用变量 */
.page .page-content .page-links .item ul li a:hover{border-color:var(--main-color);}
.page .page-content .page-links .item ul li img {vertical-align: top; width: 16px; height: 16px; margin-right: 8px;}
/* 使用变量 */
.page .page-content h2{font-size: 18px;margin:10px 0;border-bottom: 2px solid var(--light-border-color);border-left: 3px solid var(--main-color); padding-left: 20px; margin-left: -20px; padding-bottom: 3px; width: 100%; height: 30px;}
/*.page .page-content h2 b{display: inline-block; height: 33px; font-size: 18px; overflow: hidden; color: #848484; border-bottom: 2px solid #848484;}*/
.page .page-content h1 b a{color: var(--main-color);}
.page .page-content p {margin: 20px 0; color: #666; text-indent:2em;font-size: 16px;line-height:var(--line-height-base);}
.page .page-content h3{border-bottom: 1px solid var(--light-border-color);margin: 20px 0; width: 100%; height: 30px;}
.page .page-content h4{margin: 20px 0; width: 100%; height: 30px;}
.page .page-content p img {max-width: 760px; height: auto; _width: expression((document.documentElement.clientWidth||document.body.clientWidth)<760?"760px":"auto"); overflow: hidden; display: block; margin: 0 auto;}

blockquote {margin: 15px 0; padding:20px 20px 0 20px; border-top: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; border-left: 8px solid #eee; background: #fcfcfc;}

/* relates */
.relates{ float:left; width:750px;}
.relates ul>li{ float:left; width:210px; height:140px; overflow:hidden; margin:10px 19px;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.relates a{display:block;width:206px; height:137px;position: relative;}
.relates a img{width:206px; height:137px;}
.relates a h4{position: absolute;top: 10px;z-index: 10;cursor: pointer;word-break: inherit;font-size: 14px;color: #fff;line-height: 20px;font-weight: 400;width:auto;max-width: 168px;height:auto;max-height:40px;background: #000000;filter:alpha(opacity=60);opacity: 0.6;padding: 3px 6px;overflow: hidden;text-overflow: ellipsis;}
.relates ul>li:hover a h4{border-left: 2px solid #282828;}

/* comments */
#comments #respond input{border-width:1px;border-style:solid;border-radius:0;padding:8px 14px;color:#aaa;box-sizing:border-box}
#comment_form #author,#comment_form #email,#comment_form #url{width:100%;*width:auto; margin-bottom:20px;margin-top:5px;border-color:#efefef; background:#fbfbfb}
#comment-author-info label{display: block;color:#888;font-size:14px}
#comment-author-info{ margin-bottom:20px;height: 60px;}
#comment-author-info .comment-md-3{float:left;width:33.33%;*width:32%;padding-right: 10px;font-size:13px;color:#ccc;box-sizing:border-box;position:relative}
#comment-author-info .comment-form-url{padding:0}
#comment-author-info .required{color:#ff4b33;font-weight:bold;margin-left:3px;vertical-align:middle}

#comments a{text-decoration: none;}
#comments #respond{margin-bottom: 20px;}
#comments .respond p{margin-bottom: 16px;}
#comments .respond p.sign{margin-top: 16px;}
#comments .comments-title{font-size: 18px;line-height: 30px;height: 30px;border-bottom: 2px solid var(--light-border-color);}
#comments .comments-title span{float: left;height: 30px;border-bottom: 2px solid #06f;}
#comments .comments-box{position: relative;padding:6px 6px 0 6px; border: 2px solid #ccd4d9;border-radius: var(--card-radius);background-color: #fff; z-index: 9;}
#comments #comment{font-size: 14px;line-height: 22px; overflow-x: hidden; overflow-y: auto; width: 100%;height: 68px;resize: none; color: #666; border: none; outline: 0;}
#comments .comments-crtl{height: 36px; margin-left: -4px; border-top: solid 1px #f2f2f2; background-color: #fbfbfb;}
#comments .comments-tips{font-size: 18px;line-height: 116px;margin-right: 110px; text-align: center; color: #fff;}
#comments .tip{position: absolute;z-index: 2;top: -2px;right: -2px;bottom: -2px;left: -2px; background: #7ad071;}
/* 使用变量 */
#comments #error{background: var(--main-color);}
/* 使用变量 */
#comments #submit{font-size: 16px; position: absolute;right: -2px;bottom: -2px;width: 100px;height: 39px;padding: 0;cursor: pointer;color: #fff;border: none;border: 2px solid var(--main-color);border-top: none;border-left: none;border-radius: 0 0 2px 0;outline: 0;background: var(--main-color);}
#comments .comments-signarea{margin-bottom: 20px;padding: 36px 0;text-align: center;border-radius: 3px; background-color: var(--light-bg-color);}
#comments .comments-signarea span{font-size: 18px;font-weight: bold;}
#comments .comments-signarea .go{font-size: 15px; position: relative;display: inline-block;overflow: hidden;margin: 0 10px;padding: 4px 12px;color: #fff;border-radius: 3px;background-color: #45b6f7;}
#comments .comments-signarea .go:hover{background-color: #2f99ea;}
#comments #cancel-comment-reply{position: absolute; z-index: 1;right: 0;background-color: #ccd4d9;}
#comments #cancel-comment-reply a{ display:block;font-size: 12px;padding: 3px 6px; color: #fff;}
#comments .comment.depth-1{border-bottom: 1px solid #ededed;margin-bottom: 20px;}
#comments .comment.depth-1:last-child{border-bottom:none;}
#comments .comment-body{position: relative;z-index: 1;min-height: 55px; padding-right: 30px;padding-left: 70px;}
#comments .comment-floor,.comment-avatar{position: absolute;top: 0;}
#comments .comment-children-body .comment-avatar{top: 15px;}
#comments .comment-floor{top: 0;right: 0;display: block;color: #666;}
#comments .comment-floor a:hover{color: #3da9f7;}
#comments .comment-children-body .comment-floor{top: 10px;}
#comments .comment-avatar{left: 0;}
#comments .comment-avatar img{border: 1px solid #cdcdcd; border-radius: 3px;}
#comments .comment-children-body .comment-data a,.comment-reply-link{color: #444;}
#comments .comment-to,.comment-date,.comment-floor a{color: #a5a5a5;}
#comments .comment-date{padding-left: 15px;}
#comments .comment-body .comment-text{padding-bottom: 10px;}
#comments .comment-reply{padding-bottom: 10px;}
#comments .comment-reply a{ color: #bbb;}
#comments .comment-reply a:hover{color: #3da9f7;}
#comments .comment-children-body{padding-top: 10px;padding-bottom: 10px; padding-left: 50px;}
#comments .children li{border-top: 1px solid #ededed;}
#comments .children{margin-left: 70px;}
#comments .children .children{margin-left: 0;}
#comments .children{position: relative;z-index: 5;}
#comments .children .children{padding: 0;border: 0; background: 0;}
#comments .children:before,#comments .children:after{position: absolute;width: 0;content: '';border: solid transparent;}
#comments .children:before{z-index: 8;top: -17px;left: 4px;border-width: 9px; border-color: rgba(255,255,255,0);border-bottom-color: #e5e5e5;}
#comments .children:after{z-index: 9;top: -15px;left: 5px;border-width: 8px; border-color: rgba(255,255,255,0);border-bottom-color: #fff;}
#comments .children .children:before,#comments .children .children:after{display: none;}
#comments .comment-topnav{text-align: center;}
#comments .comment-topnav a{font-size: 14px;display: inline; padding: 6px 10px;text-align: center;color: #646464;border: 1px solid #e0e0e0;}
#comments .comment-topnav span{font-size: 14px;font-weight: bold;display: inline; padding: 6px 10px;text-align: center;}
#comments .comment-topnav a:hover{text-align: center;border: 1px solid #c7c7c7; background: #fff;}

/* pagination */
#pagination a{display: block; font-size: 14px; text-align: center; background-color: #FFF;border-radius: var(--card-radius);}

/* ====================================
   5. Footer & Utilities (使用变量)
   ==================================== */
/* Footer */
#footer{color: #949494; background-color: var(--dark-bg-color); font-size: 14px;margin-top: 20px;display: block;position: relative;z-index: 10;}
#footer a{color: #949494;}
#footer a:hover{color: #FFF;}
#footer .footer_main{padding: 30px 0;height: 30px;line-height:30px}
#footer .footer_main .footer_links{float: left;}
#footer .footer_main .footer_links a{margin-right: 15px;}
#footer .footer_main .footer_socials{float: right;}
#footer .footer_main .footer_socials a{float: left;color: #949494; margin-left: 16px;}
#footer .footer_main .footer_socials a:hover{color: #FFF;}
#footer .footer_main .footer_socials a i{ font-size:20px}

#footer .footer_copyright{background: #14151A; padding: 20px 0;font-size: 12px;}

/* goTop */
.gotop{display:none;color:#fff;background-color:var(--dark-bg-color);display:inline-block;height:46px;width:46px;line-height:48px;text-align:center;border-radius:2px;z-index:10}
.gotop:hover{color:#fff;background-color:#14151A}

/* 404 */
.F404{text-align:center;}
.F404 h1{font-size: 140px;margin: 0 0 20px;padding: 10px 0;font-weight: normal;padding-top: 100px;}
.F404 h2{font-size: 32px;margin: 0 0 10px;font-weight: normal;}
.F404 h3{font-size: 24px;margin: 0 0 40px;font-weight: normal;}

/* Fanly Syntax */
.fanly_syntax{max-height:300px;color:#100;background-color:#F5F6F9;border:1px solid #EBEBEB;margin:10px 0;overflow:auto;}
.fanly_syntax{overflow-x:auto;overflow-y:auto;padding-bottom:expression(this.scrollWidth > this.offsetWidth ? 15:0);}
.fanly_syntax table{border:none;border-collapse:collapse;margin:0;padding:0;width:100% !important}
.fanly_syntax caption{padding:2px;width:100%;background-color:#def;text-align:left;font-family:Monaco;font-size:13px;line-height:20px;}
.fanly_syntax caption a{color:#1982d1;text-align:left;font-family:Monaco;font-size:13px;line-height:20px;text-decoration:none;}
.fanly_syntax caption a:hover{color:#1982d1;text-decoration:underline;}
.fanly_syntax div,.fanly_syntax td{border:none;text-align:left;padding:0;vertical-align:top;}
.fanly_syntax td.code{background:none;line-height:normal;white-space:normal;padding-left:10px;}
.fanly_syntax pre,.fanly_syntax span{background:transparent;margin:0;padding:0;width:auto;float:none;clear:none;overflow:visible;font-family:Monaco;font-size:13px;line-height:26px;white-space:pre;font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,'Lucida Console', monospace;}
.fanly_syntax td.line_numbers{width:36px}
.fanly_syntax td.line_numbers pre{border-right:3px solid #666;background-color:#E7E5DC;color:gray;padding:0 5px;text-align:right;}
/* Color */

/* fadein */
.topadd {
	
}
#main {
    animation: fadein;/*动画名称*/
    animation-duration: 0.5s;/*动画持续时间*/
    margin-top:5px;
}
@keyframes fadein{
    0% {opacity: 0;}/*初始状态 透明度为0*/
    40% {opacity: 0;}/*过渡状态 透明度为0*/
    100% {opacity: 1;}/*结束状态 透明度为1*/
}

/* fadeout */
@keyframes fadeout{
	0%{opacity:1;}
	4%{opacity:1;}
	100%{opacity:0;}
}

@-ms-keyframes fadeout{
	0%{opacity:1;}
	40%{opacity:1;}
	100%{opacity:0;}
}

.sidebar {      
    animation: fade-in;    
    animation-duration: 1.5s;    /* 修复: 从 100s 修正为 1.5s */
    
}  

.item2 {
	font-size: 16px;
  padding:7px 25px 10px 25px;
}
.item2 p {
	line-height: var(--line-height-base);
}
.item2 li{
    margin: 10px 0;
    line-height: 1.5em;
  }
/* ====================================
   6. 精简的 Widget Strong 样式
   (继承了 fanly_widget_texttip 基础样式)
   ==================================== */
.widget_box .green strong {
    background: #0bb393;
    /* 继承基础 strong 样式，只覆盖颜色/margin/padding/font-size */
    display: inline-block; 
    padding: var(--button-padding); 
    color: #fff; 
    font-size: var(--button-font-size); 
    font-weight: normal;
    line-height: 18px;
}
.widget_box .index_green strong {
	background: #1596f5;
	margin: -1px 0 5px 25px;
	/* 继承基础 strong 样式，只覆盖颜色/margin/padding/font-size */
	display: inline-block;
	padding: var(--button-padding);
	color: #fff;
	font-size: var(--button-font-size);
	font-weight: normal;
	line-height: 18px;
}
.widget_box .orange strong {
    background: #f66c08;
    margin: -1px 0 5px 25px;
    /* 继承基础 strong 样式，只覆盖颜色/margin/padding/font-size */
    display: inline-block;
    padding: var(--button-padding);
    color: #fff;
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 18px;
}
.widget_box .blue strong {
    background: #1596f5;
    margin: 10px 0 5px 25px;
    /* 继承基础 strong 样式，只覆盖颜色/margin/padding/font-size */
    display: inline-block;
    padding: var(--button-padding);
    color: #fff;
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 18px;
}
.widget_box .yellow strong {
    background: #f65f0e;
    margin: -1px 0 5px 25px;
    /* 继承基础 strong 样式，只覆盖颜色/margin/padding/font-size */
    display: inline-block;
    padding: var(--button-padding);
    color: #fff;
    font-size: var(--button-font-size);
    font-weight: normal;
    line-height: 18px;
}
.baoming{
	text-align: center;
}

}
}