html{
    --classA:#dcdfe6;
}
::selection{
    background:#633;
    color:#fff;
}
/* pop */
.pop-wrap{
    position:fixed;
    top:30px;
    left:30px;
    width:700px;
    height:400px;
    background:#fff;
    box-shadow:0 22px 50px -35px #000;
    z-index:2000;
}
.pop-close{
    position:absolute;
    top:6px;
    right:18px;
    font-family:"Microsoft YaHei", serif;
    font-size:25px;
    color:#000;
    text-shadow:0 1px 0 #fff;
    filter:alpha(opacity=20);
    opacity:0.2;
    cursor:pointer;
}
.pop-close:hover{
    text-decoration:none;
    filter:alpha(opacity=40);
    opacity:1;
    color:#000;
}
.ui-mask{
    position:absolute;
    left:0;
    top:0;
    z-index:777;
    background:#000;
    filter:alpha(opacity=50);
    opacity:0.5;
    zoom:1;
}
.pop-title{
    width:100%;
    height:60px;
    cursor:move;
}
.pop-main{
    padding:20px;
    text-align:center;
}
.pop-inner{
    padding-top:50px;
    margin-right:-20px;
    overflow:hidden;
    zoom:1;
}
.pop-inner img{
    width:130px;
    height:130px;
}
.weixin-list{
    padding-left:65px;
}
.weixin-list li{
    float:left;
    margin-right:70px;
    display:inline;
}
.weixin-info{
    padding-top:10px;
    font-size:16px;
    color:#585858;
    font-family:"微软雅黑", serif;
}
.bot-weibo-wrap{
    padding-top:15px;
}
.bot-weibo-wrap .yh-homesns-wrap{
    padding-left:0;
}
.bot-weibo-wrap .yh-homesns-wrap a{
    margin:0 9px 0 0;
}
/* common */
.header-wrap{
    padding:25px 0;
}
.logo-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo-wrap h1{
    font-size:22px;
    line-height:1.875;
}
.app-header-search{
    display:flex;
    align-items:center;
}
.app-header-search .input{
    background:#fff;
    width:250px;
    height:34px;
    border:1px solid #c9c5c5;
    padding:0 14px 0 16px;
    color:#333;
    border-radius:17px 0 0 17px;
}
.app-header-search .input:focus::placeholder{
    color:#cecece;
}
.app-header-search .app-search-submit{
    cursor:pointer;
    width:50px;
    height:34px;
    color:#fff;
    border:0;
    background:#0fa8bf;
    border-radius:0 17px 17px 0;
}
.top-nav-wrap{
    margin-top:20px;
}
.nav-list{
    width:100%;
    border-top:1px solid #ededed;
    border-bottom:1px solid #ededed;
}
.nav-list li{
    float:left;
    margin-right:40px;
    display:inline;
}
.nav-list li a{
    float:left;
    font-size:16px;
    display:inline-block;
    text-decoration:none;
    line-height:3.666667;
    white-space:nowrap;
    color:#6a6a6a;
}
.nav-list li a:hover{
    color:#8e6955;
}
.nav-list li.active a{
    color:#a74b1d;
    font-weight:bold;
}
.nav-list li a.design{
    background-position:5px 2px;
}
.nav-list li a.design:hover{
    background-position:9px -87px;
}
.nav-list li a.about{
    background-position:-107px 2px;
}
.nav-list li a.about:hover{
    background-position:-106px -86px;
}
.nav-list li a.contact{
    background-position:-224px 2px;
}
.nav-list li a.contact:hover{
    background-position:-222px -85px;
}
.nav-list li a.blog{
    background-position:-338px 2px;
}
.nav-list li a.blog:hover{
    background-position:-338px -85px;
}
.nav-list li a.home{
    background-position:-455px 2px;
}
.nav-list li a.home:hover{
    background-position:-455px -85px;
}
.home-container{
    padding:0 40px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 6px 6px rgba(100, 100, 100, 0.3);
}
.home-container-inner, .footer-inner{
    /*padding:0 25px;*/
    position:relative;
    overflow:hidden;
}
.header-wrap{
    margin-top:0px;
    padding:20px 40px 20px;
    background:#fff;
    box-shadow:0 5px 6px rgba(100, 100, 100, 0.3);
}
/* footer */
.home-footer{
    margin-bottom:0px;
    padding:10px 40px 40px;
    background:#fff;
    box-shadow:0 5px 6px rgba(100, 100, 100, 0.3);
}
.link-wrap{
    padding:20px 0 10px;
    border-bottom:1px solid #e8e3d9;
}
.link-title h1{
    font-size:24px;
    color:#bbb;
}
.copyright-wrap{
    padding-top:40px;
    color:#acacac;
}
.link-list{
    margin-right:-50px;
    overflow:hidden;
    zoom:1;
}
.link-list a{
    float:left;
    margin-right:20px;
    display:inline;
    color:#878787;
}
.link-list a:hover{
    color:#ff7020;
}
.link-list i{
    float:left;
    padding:0 5px;
    font-family:serif;
    color:#a9a9a7;
}
.require-red{
    color:#f60;
    font-family:serif;
    margin-right:3px;
}
.copyright-info{
    float:left;
}
.browser-advice{
    float:right;
}
.fixed-bot{
    width:64px;
    height:58px;
    border-radius:5px;
    background:url(../images/common/rss.png) center center #000 no-repeat;
    opacity:0.6;
    filter:alpha(opacity:60);
    position:fixed;
    _position:absolute;
    right:30px;
    bottom:115px;
    _bottom:auto;
    cursor:pointer;
    overflow:hidden;
    z-index:9999;
}
.fixed-bot:hover{
    opacity:0.8;
    filter:alpha(opacity:80);
}
.rss-icon{
}
/* Media Queries - Small Tablet (from 480px to 799px)*/
@media screen and (min-width:480px) and (max-width:799px){
    .header-wrap{
        padding-bottom:1.5em;
    }
    .wrap-box{
        width:auto;
    }
    .logo-wrap{
        float:none;
        text-align:center;
    }
    .top-nav-wrap{
        float:none;
        width:90%;
        margin:0 8% 1.5px;
    }
    .header-wrap{
        height:auto;
        background:#dfcfc5;
    }
    .nav-list{
        margin-right:0;
    }
    .nav-list li{
        width:13%;
        margin-right:8%;
    }
    .nav-list li:last-child{
        margin-right:0;
    }
    .category-list li{
        width:90%;
        margin:0 8% 1.5em;
    }
    .copyright-info{
        float:none;
        margin-bottom:0.5em;
    }
    .browser-advice{
        float:none;
    }
}
/* Media Queries - Desktop up from 800px */
@media screen and (min-width:0px) and (max-width:479px){
    .wrap-box{
        width:auto;
    }
    .logo-wrap{
        float:none;
        text-align:center;
    }
    .top-nav-wrap{
        float:none;
        width:90%;
        margin:0 5% 1.5px;
    }
    .header-wrap{
        height:auto;
        background:#dfcfc5;
    }
    .nav-list{
        margin-right:0;
    }
    .nav-list li{
        width:100%;
        margin-right:0;
        margin-bottom:0.1em;
        text-align:center;
    }
    .nav-list li a{
        float:none;
        background:none;
        line-height:3;
        display:block;
        width:100%;
        border-bottom:1px solid #fff;
        padding-top:0;
        transition-duration:0.3s;
    }
    .nav-list li a:hover{
        background:#c2a594;
        color:#fff;
    }
    .category-list li{
        width:90%;
        margin:0 8% 1.5em;
    }
    .copyright-info{
        float:none;
        margin-bottom:0.5em;
    }
    .browser-advice{
        float:none;
    }
}
/*分页样式*/
.pagination{
    display:inline-block;
    padding-left:0;
    margin:20px 0;
    border-radius:4px;
}
.pagination > li{
    display:inline;
}
.pagination > li > a, .pagination > li > span{
    position:relative;
    float:left;
    padding:12px 17px;
    margin-left:-1px;
    line-height:1.42857143;
    color:#666;
    text-decoration:none;
    background-color:#fff;
    border:1px solid #ddd;
}
.pagination > li:first-child > a, .pagination > li:first-child > span{
    margin-left:0;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{
    color:#2a6496;
    background-color:#eee;
    border-color:#ddd;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{
    z-index:2;
    color:#fff;
    cursor:default;
    background-color:#f60;
    border-color:#fe8101;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus{
    color:#777;
    cursor:not-allowed;
    background-color:#fff;
    border-color:#ddd;
}
.pagination-lg > li > a, .pagination-lg > li > span{
    padding:10px 16px;
    font-size:18px;
}
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span{
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
}
.pagination-sm > li > a, .pagination-sm > li > span{
    padding:5px 10px;
    font-size:12px;
}
.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span{
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}
.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span{
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
}
.comment-wrap .verify-img{
    width:120px;
    border:1px solid #ccc;
}
.app-web-page{
    padding-top:15px;
    display:flex;
    justify-content:center;
}
/* msg */
.comment-info-main{
    display:flex;
    justify-content:center;
}
.comment-wrap .input-text, .comment-wrap .blog-text{width:490px;}
/* about me */
.about-me{padding-top:20px;display:flex;}
.about-title-list li{float:left;}
.about-title-list li a{float:left;height:60px;line-height:60px;font-family:"微软雅黑";background:#e6e6e6;color:#999;font-size:28px;padding:0 60px;}
.about-title-list li a:hover{background:#dcdcdc;color:#666;}
.about-title-list li.on a{background:#fff;color:#8e6955;}
.me-img{margin-right:30px;}
.me-img img{width:400px;border-radius:50%;}
.me-info{font-size:18px;font-family:"微软雅黑";line-height:24px;}
.me-info p{margin-bottom:30px;text-indent:2em;color:#585858;}
.concept-info{padding-top:50px;line-height:30px;font-size:18px;font-family:"微软雅黑";}
.concept-info p{margin-bottom:30px;text-indent:2em;color:#585858;}
/* blog */
.blog-main{float:left;width:830px;}
.blog-sider{float:right;width:225px;}
.main-items{margin-bottom:15px;}
.blog-title{line-height:45px;}
.blog-title h1{height:40px;font-weight:normal;font-size:25px;font-family:"微软雅黑";}
.title-link{height:40px;display:block;text-shadow:1px 1px 1px #ccc;overflow:hidden;}
.blog-title-info{padding:10px 0 10px;}
.title-info-list a{float:left;font-size:12px;margin-left:5px;line-height:13px;color:#aaa;transition-duration:0.3s;}
.title-info-list .fa{margin-right:5px;}
.blog-content{padding:0 0 15px 0;line-height:25px;}
.blog-content p{text-indent:2em;color:#585858;margin-bottom:15px;}
.blog-all{text-align:right;}
/* sider */
.sider-items{}
.sider-items:last-child{
    margin-bottom:0;
}
.sider-title{line-height:50px;border-bottom:1px dashed #ccc;}
.sider-title h1{font-weight:normal;}
.sider-content{padding:20px 0 0;}
.sider-content .input-text{width:150px;}
.art-list li{}
.files-list li{margin-bottom:15px;}
.art-num{font-size:12px;margin-left:3px;color:#b7b7b7;}
.blog-taginfo{padding:15px 0;font-size:12px;color:#aaa;line-height:19px;border-top:1px dashed #dbdad7;border-bottom:1px dashed #dbdad7;}
.blog-taginfo:hover .blog-titlename, .blog-taginfo:hover .blog-url{color:#000;}
.blog-tag{float:left;}
.blog-share{float:right;line-height:24px;}
.blog-ok{float:left;margin-left:10px;margin-top:5px;transition-duration:0.3s;}
.blog-ok i{display:inline-block;padding:0 5px;color:#fff;border:1px solid #cd7248;}
.blog-support{background:#cd7248;}
.blog-ok:hover i.blog-support{background:#fff;color:#cd7248;}
.blog-ok i.blog-oknum{color:#cd7248;background:#fff;}
.blog-ok:hover .blog-oknum{background:#cd7248;color:#fff;}
.blog-yetok i{background:#e5e5e5;border:1px solid #e5e5e5;color:#666;}
.blog-yetok i.blog-oknum{color:#666;}
.blog-yetok:hover i.blog-support{background:#e5e5e5;color:#666;}
.blog-yetok:hover .blog-oknum{background:#fff;color:#666;}
.bdsharebuttonbox{float:left;}
.blog-comment{padding:0 0 15px 0;}
.blog-share-tips{width:500px;}
.comment-wrap li{padding-bottom:15px;clear:both;overflow:hidden;zoom:1;}
.comment-lab{float:left;width:120px;text-align:right;padding-right:10px;}
.comment-tier{line-height:35px;}
.art-prev-wrap{float:left;}
.art-next-wrap{float:right;}
.art-prev{width:260px;height:15px;overflow:hidden;}
.art-arr{font-family:serif;margin:0 5px;color:#aaa;}
.blog-blumb{margin-bottom:15px;}
.read-img{border:1px solid #ccc;}
.blumb-link{display:block;border:1px solid #ccc;transition:border linear 0.2s, box-shadow linear 0.2s;}
.blumb-link:hover{box-shadow:1px 1px 1px #a3cdef;border:1px solid #9ac5e8;}
/* comment */
.comment-list-wrap{}
.comment-list li{padding:20px 0 10px;border-bottom:1px dashed #ccc;clear:both;overflow:hidden;zoom:1;}
.comment-list li:hover{border-bottom:1px solid #9ac5e8;}
.comment-headimg{float:left;width:50px;margin-right:20px;}
.comment-headimg img{border-radius:50%;}
.comment-main{margin-left:60px;margin-top:-6px;}
.comment-user{float:left;}
.comment-name{overflow:hidden;}
.comment-user h1{float:left;color:#9ac5e8;font-size:14px;}
.comment-revert{float:right;}
.comment-date{margin-left:10px;font-size:12px;color:#888;}
.comment-replay{display:inline-block;overflow:hidden;}
.bot-sign{display:inline-block;margin:2px 0 0 3px;border-width:5px;border-style:solid;border-color:#aaa #fff #fff #fff;}
.comment-content{color:#666;}
.blog-text{width:442px;vertical-align:top;}
.blog-btn{width:490px;}
.reply-items{margin-top:10px;padding:15px 0 5px;border-top:1px dashed #ccc;}
.reply-headimg{float:left;width:50px;}
.reply-headimg img{border-radius:50%;}
.reply-main{margin-left:60px;}
.reply-main .comment-user h1{font-size:12px;font-weight:normal;}
.reply-main .comment-content{padding-bottom:0;}
/*.comment-date{float:left;}*/
.commet-name{overflow:hidden;}
.reply-content{font-size:12px;}
.blog-tips-info{height:30px;line-height:30px;margin:5px 0 10px -100px;text-align:center;}
.comment-msg{padding:0 0 0 70px;color:#f60;}
.use-page{padding:20px 0;text-align:center;}
/* msg */
.msg-comment .comment-info-main{margin-left:140px;}
.comment-wrap .input-text, .comment-wrap .blog-text{width:490px;padding:20px;}
/* errors */
.app-errors{
    width:80%;
    margin:120px auto;
    display:flex;
    flex-flow:row;
    flex:1;
    min-height:calc(100vh - 361px);
}
.app-error-img{
    /*float:left;*/
}
.app-error-txt .title{
    font-size:2em;
    color:#000;
}
.app-error-txt .info{
    font-size:1.5em;
    color:#606266;
}
.app-error-txt{
    /*float:left;*/
    margin-left:100px;
    margin-top:100px;
}
.app-error-button{
    margin-top:20px;
    display:inline-block;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    -webkit-appearance:none;
    text-align:center;
    box-sizing:border-box;
    outline:0;
    transition:.1s;
    font-weight:500;
    font-size:14px;
    color:#fff;
    background-color:#409eff;
    border:1px solid #409eff;
    border-radius:20px;
    padding:12px 23px;
}
.app-error-button:hover{
    background:#66b1ff;
    border-color:#66b1ff;
    color:#fff;
}
.app-errors-footer{
    text-align:center;
    color:#999;
}
.app-detail-copyright{
    font-size:12px;
    padding-top:15px;
    margin-top:15px;
    border-top:1px solid #ccc;
    line-height:20px;
    color:var(--minor);
}
.app-detail-copyright .item .fa{
    margin-right:3px;
}
.app-detail-copyright .item:nth-child(1) .fa{
    color:blue;
}
.app-detail-copyright .item:nth-child(2) .fa{
    color:green;
}
.app-detail-copyright .item:nth-child(3) .fa{
    color:orange;
}
.assist{
    display:flex;
    font-size:14px;
}
.assist i{
    color:var(--classA);
}
.assist > *{
    margin:0 10px 0 0;
}
.blog-title-info .fa{
    position:relative;
    top:-1px;
}
.assist .fa{
    margin-right:4px;
    font-size:14px;
    position:relative;
    top:-1px;
}
.assist .date .fa{
    color:orange;
}
.assist .comment .fa{
    color:red;
}
.assist .like .fa{
    color:blue;
}
.assist .views .fa{
    color:green;
}
.assist .words .fa{
    color:orange;
}
.assist .comment b{
    color:red;
}
.assist .like b{
    color:#6b6bbd;
}
.assist .views b{
    color:#6eb26e;
}
.assist .words b{
    color:#bd9456;
}
.app-blog-content{
    padding:20px 0;
}