html,body{
    overflow-x: hidden;
}
hr{
    border-top: solid 1px #ccc;
    margin: 0;
}

.left{float: left}
.right{float: right}

.article-body{padding: 0;  max-width: 920px }
.article-body.single{max-width: 1180px}
.article-body blockquote{
    text-align: left;
    text-indent: 35px;
}
.article-body .thumbnail{margin: 10px -5px 0px 0;}

.article-body img{padding: 0;margin: 0 auto;}

.article-container{
    background-color: white;
    width: 100%;
    padding-bottom: 20px;
    position: relative;
}
.article-container .leftArrow{
    position: fixed;
    z-index: 100;
    left: 20px;
    top:50%;
    width: 100px;
}

.article-container .leftArrow .arrow{
    position: relative;

    background: url("../images/l_r.png") transparent -1px -1px;

}
.article-container .leftArrow:hover .arrow{
    background: url("../images/l_r.png") #888 -1px 49px;

}
.article-container .rightArrow{
    position: fixed;
    z-index: 101;
    right: 20px;
    top:50%;
    width: 100px;
}
.article-container .rightArrow .arrow{

    position: relative;
    left: 50px;
    background: url("../images/l_r.png") transparent 51px -1px;

}
.article-container .rightArrow:hover .arrow{
    background: url("../images/l_r.png") #888 51px 49px;

}
.article-container .disable{
    cursor: default;
}
.article-container .disable.rightArrow:hover .arrow{
    cursor: default;
    background: url("../images/l_r.png") transparent 51px -1px;
}
.article-container .disable.leftArrow:hover .arrow{
    cursor: default;
    background: url("../images/l_r.png") transparent -1px -1px;
}
.article-container .arrow{
    width: 50px;
    height: 50px;
    top:50%;

    border-radius: 6px;
    opacity: 0.6;                    /* Firefox, Safari(WebKit), Opera */
    -ms-filter: "alpha(opacity=60)"; /* IE 8 */
}


.work-head{
    padding: 20px 0;
    width: 100%;
    border-bottom: solid 1px #999;
    border-top: solid 1px #eee;
    background-color: #666;
    color: #fff;
    min-height: 90px;
}
.work-head .container{
    position: relative;
}
.work-head .avatar{
    position: absolute;
    left: 20px;
}
.work-head .at_author{
    margin: 0 0 0 70px;

}
.work-head .author_info .name a{
    color: white;
    font-size: 20px;
    line-height: 20px;
    margin-left: 2px;
}

.work-head .right_info{
 }
.right_info div,.right_info span{
    padding:0;
    display: block;
    color:#888;
}

.work-head .clear{
    clear: both;
    float: none;
    height: 0;
}
.work-head .author_info{

    height: 22px;
}
.work-head .author_info span.count {
    margin: 0 0 0 14px;
    color: #ccc;
}
.work-head span.timeago{
    color: #999;
margin: 0 0 0 14px;
 }
.work-head .op_right{}
.work-head form{
   float: right;
    margin:0 3px;
}

.work-head form button{
    padding: 0 7px;
    height: 24px;
    margin-top: -2px;
}
.work-head .fav{
    margin-right: 3px;
    width:50px;
    height: 50px;
border: none;
    background:url(../images/zan_cang_50-50.png) #444444 -100px -1px;
    border: 0;
}
.work-head .rcm{
    width:50px;border: none;
    height: 50px;
    background:url(../images/zan_cang_50-50.png) #ff7f7f -50px -1px;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
    .work-head .fav{
        background-image: url("../images/zan_cang_50-50@2x.png");
        background-size:300%;
    }
    .work-head .rcm{
        background-image: url("../images/zan_cang_50-50@2x.png");
        background-size:300%;
    }
}
.work-head .fav:hover{
    background-color: #333;
}
.work-head .rcm:hover{
    background-color: #ff6060;
}
.work-head .fav.un{
    background-position-y: -51px;
}
.work-head .rcm.un{
    background-color: #ff7f7f;
    background-position-y: -51px;
}

.work-head #measureForm{margin:0 20px;}

.work-head .count {margin:-2px 15px 0;line-height: 20px}

.inspiration.work-head{
    background-color: transparent;
    text-align: center;
    border: none;
    padding-bottom:0 ;
}
.inspiration.work-head .topic{
    width:200px;
    margin: 20px auto 0;
    color:#333;
}
.inspiration.work-head form {
    float: none;
    display: inline;
    margin: 0;
    padding: 0;
}
.inspiration.work-info{
    background-color: transparent;
}

.relative{
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    padding: 10px 0 30px;
}
.inspiration.work-info span {
    color: #333;
}
.inspiration.work-info a {
    color: #999;
}
.work-title{text-align: center;
}

.work-info{
    padding: 20px;
    background-color: #666;
}
.work-info a.category{
    color: #fff;
    text-decoration: underline;
}


.work-info .info_title{
    color: #aaa;
    font-size: 14px;
}
.work-info div{

    font-size:14px
}
.work-info .label{
    background-color: #ccc;
    color: #666;
}
.inspiration.work-info .label{
    background-color: #666;
    color: #eee;
}
.comment{
    background-color: #f7f8fa;
    padding: 20px 20px 100px;
}
.article-comment a{
    color: #94B5AE;
}

.article-comment {
    margin: 11px -20px 20px;

}

.article-comment .list-group-item {
    position: relative;
    display: block;
    padding: 10px 20px;
    min-height: 80px;
    background-color: #f7f8fa;
}

.list-group-item .comment-avatar{
    position: absolute;
    left: 15px;
    top:12px;
}
.list-group-item .pull-left{
    margin-left: 60px;
}
.list-group-item .pull-right{
    position: absolute;
    right:15px;
    top:2px;
}
.comment-input {
    margin-top: 20px;
}
.comments-pager {
    margin-bottom: -50px;
    margin-left: 20px;
}



.avatar img,.comment-avatar img{
    border-radius: 3px;
}


.comment .comment-avatar{
    margin-left: 20px;
    margin-top:2px;
}
.comment .comment-form{
    position: relative;
    display: block;
    width: 100%;
}
.comment .form-group{
    width:auto;
    margin: 0px 80px;

}
.comment .form-group {

}
.blank{
    height: 100px;
    background-color:#f7f8fa;
}
.comment .status-post-submit{
    position: absolute;
    right: -60px;
    top:2px;

}
.comment .status-post-submit input{
    width:50px;
    height: 50px;
    padding: 0;
    text-align: center;
}

.mobile #com_group{
    margin: 10px 5px 0  !important;
}
.mobile #com_group .timeago{
    display: none;
}

#com_group{
    margin: 10px 60px 0 ;
}


#com_group .pull-right{
    margin: 6px 10px;
}
#com_group  .del_form{
    padding: 0;
    margin: 0;
    float: right;
}

#com_group .pull-right .comBtn{

    height: 20px;
    line-height: 18px;
    padding: 0 0 0 20px;
    margin: 0  5px;float: right;

}
#com_group .comment-avatar{
    margin-left: 0;
}
#com_group .pull-right .replay_btn{
    background:url(../images/Reply.png) no-repeat 0 0;
}

#com_group .pull-right .delete_btn{
    background:url(../images/Delete.png) no-repeat 0 0;
}

#com_group .timeago{
    padding: 0;
    margin: 0 5px;
    height:20px;
    line-height: 20px;
}



/*-------------*/
div.jumbotron.mobile{
    height: 206px!important;
}
.jumbotron.mobile h2.work-title{
    font-size: 32px!important;
    bottom:70px!important;
}

.jumbotron{position:relative; top:0px;height: 306px;overflow: hidden;padding: 0;margin:0 -5px;}
.jumbotron img{position:absolute; width: 100%; min-width:600px; margin-top:-50px;left:0;
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-filter: blur(4px);
    filter: blur(4px);}
.jumbotron h2.work-title{
    position:absolute;
    bottom:80px;
    z-index:99;
    font-size: 40px;
    left:20px;
    right:20px;
    text-align: left;
    color:white;
}

.jumbotron .author-info{
    position:absolute;
    bottom:30px;
    z-index:99;
    left:20px;
    color:white;
}
.jumbotron .author-info a {
    color: white;
    text-decoration: underline;
}
.jumbotron .timeago{
    color: #aaaaaa;
    padding-left: 20px;
}
.jumbotron .category{
    position:absolute;
    bottom:30px;z-index:99;color: #aaaaaa;right:20px;

}
.jumbotron .category a{
text-decoration: underline;color: #aaaaaa;
}
.jumbotron  .count{
    color: #aaaaaa;
    padding-left: 20px;
}
.jumbotron .shadow{
    position:absolute;
    left: 0;top:0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: url("../images/shadow_img.png") repeat-x bottom;
}
.jumbotron .container{
    position: relative;
    height:100%;
}

#work_body{margin: 20px auto 0;text-align: left;width:100%;text-align: center}
#work_body p{
    text-align: left;
    font-size: 14px;
    color: #444;
    margin: 0 20px 14px;
}
#work_body.pc p{
    margin:0 0px 14px;
}
#work_body .img_description{
    text-align: center;
    font-size: 12px;
    color: #888;
    margin: 10px 20px 20px;
}
#work_body.pc .img_description{
    margin:10px 0px 14px;
}


#followForm{
    float: left;
    position: relative;
    width: 80px;
    height: 0
}
#followForm .btn{
    width: 78px;
}
#followGroup ul{
    top:40px;
    padding: 0 ;
    border: none;
    min-width:0;

}
#followGroup ul li{

    padding: 0 ;
    margin: 0 0px;

}

#followForm .btn{
    padding: 0 ;
    margin: 0 0px;
    height:24px;

}

#template_reply .btn{
    height: 26px;
    margin: 5px 5px 0px;
    color:white;
    font-size: 12px;
    line-height: 26px;
    padding:0 14px;
}
#template_reply .btnGroup{
    width: 100%;
    text-align: right;
}
.comment_body{
    min-height: 40px;
}
.bdsharebuttonbox{
    margin-top: 8px;
}

/* Image style */
#scrollUp {
    background-image: url("../images/r_bottom.png");
    background-position: 0 0 !important;
    bottom: 20px;
    right: 0px;
    width: 36px;
    /* Width of image */
    height: 36px;
    /* Height of image */
    text-indent: -999999px;
}

.l_bottom{
    position: fixed;
    background-image: url("../images/r_bottom.png");
    width: 36px;
    /* Width of image */
    height: 36px;
    /* Height of image */
    z-indent: 999999px;
}

a.l_bottom:hover,#scrollUp:hover{
    background-position-x: -36px!important;
}
a.l_bottom.un{
    background-position-x: -72px!important;
}

ul.leftOP{
    margin: 0;
    padding: 0;
    position: fixed;
    bottom: 20px;
    left: 0px;
    display: block;
    width: 36px;
    z-index: 999;
}


ul.leftOP li{
    margin: 0;
    padding: 0;
    
}


ul.leftOP li a{
    background: #888;
    color:#fff;
    line-height: 36px;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    width: 36px;
    height: 36px;
    display: block;
    border-bottom: solid 1px #ddd;
}

a.r_bottom#editBtn{
    background: #aaa;
}

#shareBtn{
    background-position: 0 -36px ;
    right: 0px;
    bottom: 128px;

}

#commentBtn{
    background-position: 0 -72px ;
    right: 0px;
    bottom: 92px;
}
.favoriteBtn{
    background-position: 0 -108px ;
    right: 0px;
    bottom: 56px;
}

.recomendBtn{
    background-position: 0 -144px;
    right: 0px;
    bottom:20px;
}

.modal-content{height: 50px;min-width: 100px;margin: 0 auto;width: 230px; padding: 0 20px;}
.modal-dialog{position: absolute;bottom: 90px; right: 40px}


#attrOP{
    position:fixed;
    bottom: 0;
    z-index: 9999;
    background: #fff;
    border: solid 1px #ccc;
    padding: 30px 20px;
    width: 100%;
}


/******------------*****/

#swiper.swiper-container { position:fixed; background:#000; top:0; left:0; right:0; bottom:0; z-index:9999;}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}

.download{
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: url("../images/download.png") no-repeat center rgba(0,0,0,0.4);
    background-size: contain;
}
.download .close{
    position:absolute;
    right: 10px;
    top: 18px;
    width: 14px;
    height: 14px;
    background: url("../images/closedl.png") no-repeat center;
    background-size: contain;

}