body{color: #666666;font-family:"微软雅黑";font-size:16px;background-repeat: no-repeat;background-position: top center;}
a{text-decoration: none;color: #337ab7;}
a:hover{color: #dd4b39;}
input,select,img,textarea:focus{outline: none;}
.text-truncate1{display: -webkit-box !important;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.text-truncate2{display: -webkit-box !important;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.text-truncate3{display: -webkit-box !important;overflow: hidden;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.text-truncate4{display: -webkit-box !important;overflow: hidden;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.row-lists>.row>div{margin-bottom: 12px;}

.callout{border-radius:3px;margin:0 0 15px 0;padding:8px 15px;border-left:4px solid #dee2e6;background-color:#f8f9fa;color:#212529;}
.callout.callout-info{border-color:#5bc0de;background-color:#f4f8fa;color:#087990;}
.callout.callout-danger{border-color:#d9534f;background-color:#fdf7f7;color:#b02a37;}
.callout.callout-warning{border-color:#f0ad4e;background-color:#fcf8f2;color:#997404;}
.callout a{color:#009e3c !important;text-decoration:none !important;}
.callout a:hover{text-decoration:underline !important;}
.callout h3,.callout h4{font-weight:bold;}
.callout p{margin-bottom:8px;}
.callout p:last-child{margin-bottom:0px;}
.highlights code{font-size: inherit;color: inherit;font-family: inherit;border: 1px solid #dedede;margin: 0px 5px;padding: 2px 6px;word-break: break-all;white-space: pre;display: inline-block;border-radius: 4px;}
.highlights strong{padding: 2px 5px;border-bottom: 2px solid #d9534f;color: #333333;display: inline-block;}
.highlights .table td{font-size: 14px;}

.navbar{padding: 0;}
.navbar .container{position: relative;z-index: 1001;}
.navbar-vague-box{box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;}
.navbar-vague-c{position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow:hidden;}
.navbar-vague{position: absolute;top: -6px;left: -6px;right: -6px;bottom: -6px;z-index: 100;background-position: top center;background-repeat: no-repeat;filter: blur(5px);}
.navbar-vague-bg{position: absolute;z-index: 101;left: 0;top: 0;right: 0;bottom: 0;}
.navbar-brand{padding: 0;font-size: 0;}
.navbar-brand .logo{height: 34px}
.navbar-toggler{padding: 25px 25px;position: relative;display: inline-block;cursor: pointer;border: none;border-radius: 0;}
.navbar-toggler .navbar-toggler-icon,.navbar-toggler:before,.navbar-toggler:after{width: 12px;height: 2px;display: inline-block;position: absolute;top: 50%;left: 50%;background: #333333;transform: translate(-50%, 0);}
.navbar-toggler.collapsed:before{content: " ";transform: translate(-50%, -200%);}
.navbar-toggler.collapsed:after{content: " ";transform: translate(-50%, 200%);}
.navbar-toggler.collapsed .navbar-toggler-icon{display: inline-block;}
.navbar-toggler:before{content: " ";transform: translate(-50%, 0%) rotate(-45deg);transition: all .3s;}
.navbar-toggler:after{content: " ";transform: translate(-50%, 0%) rotate(45deg);transition: all .3s;}
.navbar-toggler .navbar-toggler-icon{display: none;}
.navbar-toggler:hover{background: rgba(255,255,255,0.24);}
.navbar-nav .nav-item .nav-link{font-size: 14px;padding: 10px 10px;color: #333333;}
.navbar-nav .nav-item .nav-link.active{color: #dd4b39;}
.navbar-nav .nav-item .nav-link:hover{background: rgba(255,255,255,0.24);}

.app-content{margin-top: 115px;}

.main-header{padding:0 12px;border-radius: 4px;display: flex;background:#fafafa;flex-direction: column;}
.main-header .l{display: flex;margin-right: 12px;}
.avatar-box{margin-top:-44px;margin-right:5px;}
.avatar-box .avatar{width:80px;height:80px;border-radius: 4px;padding:5px;display:inline-block;background:#fff;box-shadow:0 0 1px #bfb7a3;position:relative;}
.avatar-box .avatar .img{border-radius: 4px;height:100%;width:100%;}
.avatar-box .avatar .signs{padding:8px 12px;position:absolute;left:90px;top:0;font-size:12px;overflow:hidden;border-radius:3px;background:rgba(0,0,0,0.5);color:rgba(255,255,255,0.75);transition: all .3s;}
.avatar-box .avatar .signs .item{white-space: nowrap;}
.counts{padding:8px 0;display: flex;}
.counts .item{border-right:1px solid #e8e8e8;padding:0 12px;}
.counts .item span{font-size: 12px;display:block;text-align:center;color:#666666;}
.counts .item:last-child{border-right:none;}

.search{display: flex;padding: 4px 0 12px 0;}
.search .item{border-radius: 0;border: 1px solid #dee2e6;margin-left: -1px;}
.search .item:first-child{border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
.search .item:last-child{border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
.search .select{font-size: 14px;color: #212529;padding: 4px 4px;}
.search .text{flex: 1;font-size: 14px;color: #212529;padding: 4px 8px;}
.search .btn-search{font-size: 14px;color: #212529;padding: 4px 8px;}

.main-body{padding:12px 0;}

.media-list{border-radius: 4px;border:1px solid rgba(255,255,255,0.8);box-shadow:0 1px 1px rgba(0,0,0,0.15);background-color:#fafafa;}
.media-list .body{display:flex;position: relative;overflow: hidden;}
.media-list .image{margin:12px 12px 12px 0;width:132px;border-radius: 4px;overflow: hidden;}
.media-list .image .img{width:100%;transition: all .3s;}
.media-list .body:hover .image .img{transform: scale(1.1);}
.media-list .flag{font-size:10px;height:18px;line-height:18px;top:3px;right:-28px;width:80px;position:absolute;background:#dd4b39;color:#fff;text-align:center;transform:rotate(45deg);z-index: 100;}
.media-list .detail{padding:12px;flex: 1;}
.media-list .detail .title{margin-bottom:0px;font-size:16px;color:#333333;display: -webkit-box;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.media-list .body:hover .detail .title{color:#dd4b39;}
.media-list .detail .desc{font-size: 14px;-webkit-line-clamp: 2;color:#999999;margin:0;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;}
.media-list .detail .title em,.media-list .detail .desc em{color:#dd4b39;font-style:normal;}
.media-list .foot{padding:6px 12px;border-top:1px solid #e8e2d2;display: flex;justify-content: space-between;}
.media-list .foot .tags{margin-right: 12px;color:#999999;font-size: 0;}
.media-list .foot .tags i{font-size: 12px;}
.media-list .foot .tags span{font-size: 12px;margin-left: 5px;}
.media-list .foot .tags a{font-size: 12px;margin-left: 5px;color: #337ab7;}
.media-list .foot .tags a:hover{color:#dd4b39;}
.media-list .foot .tags:last-child{margin-right: 0;}

.card{margin-bottom:12px;border-radius: 4px;border:1px solid rgba(255,255,255,0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.15);background-color:#fafafa;}
.card-header{padding: 8px 12px;border-bottom:1px solid #e8e2d2;position:relative;text-align:center;font-size:14px;font-weight:bold;color:#dd4b39;}
.card-header::before,.card-header::after{height:8px;width:8px;transform: translateY(-50%);content:' ';position:absolute;border-radius:50%;z-index:100;top:50%;background-color:#d0c6b0;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2) inset;}
.card-header::before{left:15px;}
.card-header::after{right:15px;}
.card-body{padding: 12px;}
.card-footer{padding: 8px 12px;border-top:1px dotted #e8e2d2;}

.card .signs{font-size: 14px;color: #666666;}
.card .call-me{display: flex;}
.card .call-me .item{flex: 1;text-align: center;}
.card .call-me .item i{font-size: 16px;color: #666666;cursor:pointer;}
.card .call-me .item i:hover{color:#dd4b39;}

.card .tags{font-size: 0;}
.card .tags .label{padding:6px 8px;font-size:12px;margin:0 8px 8px 0;border-radius:2px;display:inline-block;color: #ffffff;}
.card .tags .label:nth-child(1n){background:#3c8dbc;}
.card .tags .label:nth-child(2n){background:#00a65a;}
.card .tags .label:nth-child(3n){background:#0cc0cc;}
.card .tags .label:nth-child(4n){background:#dd4b39;}
.card .tags .label:nth-child(5n){background:#f39c12;}
.card .tags .label:hover{opacity:0.5;}

.card .lists .item{font-size: 14px;padding-bottom: 6px;margin-bottom: 6px;border-bottom: 1px dotted #e8e2d2;}
.card .lists .item:last-child{margin-bottom: 0;border-bottom: none;}
.card .lists .item a{color: #333333;}
.card .lists .item a:hover{color: #dd4b39;}

.media-comment{display: flex;}
.media-comment .image{width: 40px;height: 40px;margin-right: 12px;}
.media-comment .image .img{border-radius: 3px;width: 100%;height: 100%;}
.media-comment .detail{flex: 1;}
.media-comment .detail .title{font-size: 14px;color: #666666;}
.media-comment .detail .desc{font-size: 14px;color: #999999;}

.media-addon{border-radius: 4px;display: block;overflow: hidden;background-color: #ffffff;position: relative;}
.media-addon .flag{font-size:10px;height:18px;line-height:18px;top:3px;right:-28px;width:80px;position:absolute;background:#dd4b39;color:#fff;text-align:center;transform:rotate(45deg);z-index: 100;}
.media-addon .image{overflow: hidden;}
.media-addon .image .img{width: 100%;transition: all .3s;}
.media-addon:hover .image .img{transform: scale(1.1);}
.media-addon .detail{padding: 6px 10px;}
.media-addon .detail .title{font-size: 14px;color: #333333;}
.media-addon .detail .desc{margin-top: 6px;display: flex;justify-content: space-between;}
.media-addon .detail .desc .item{font-size: 0;}
.media-addon .detail .desc .item i{font-size: 14px;color: #999999;}
.media-addon .detail .desc .item .num{font-size: 14px;margin-left: 5px;color: #999999;}
.media-addon .detail .desc .item .free{font-size: 14px;color: #00a65a;}
.media-addon .detail .desc .item .price{font-size: 14px;color: #dd4b39;}

.breadcrumb{padding: 12px;margin: 0;border-radius: 4px;border: 1px solid rgba(255, 255, 255, 0.8);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);background-color: #fafafa;}
.breadcrumb .breadcrumbs-item{font-size: 14px;color: #666666;}
.breadcrumb .breadcrumbs-item:hover{color: #dd4b39;}
.breadcrumb .breadcrumbs-item+.breadcrumbs-item::before{content: '>';font-family: Arial;color: #cccccc;margin:0 5px;}

.pagination{margin-bottom: 0;flex-wrap: wrap;}
.pagination .page-link{background-color: #fafafa;color: #666666;border-color: #e8e2d2;}
.pagination .page-link:hover{background-color: #eaeaea;}
.pagination .page-link.active{background-color: #dd4b39;border-color: #dd4b39;color: #ffffff;}

.footer{padding: 16px 0;background: #fafafa;text-align: center;font-size: 0;}
.footer .item{margin-right: 12px;font-size: 12px;color: #666666;display: inline-block;}
.footer .item:last-child{margin-right: 0;}
.footer a.item{color: #337ab7;}
.footer a.item:hover{color:#dd4b39;}

.timeline{margin-top: 12px;position:relative;}
.timeline:before{left:19px;width:2px;content:' ';position:absolute;top:0;bottom:0;background:#fafafa;}
.timeline .item{margin-bottom: 12px;display: flex;}
.timeline .item .year{font-size: 12px;border-radius: 2px;background-color: #dd4b39;color: #ffffff;padding: 4px 8px;position:relative;transition: all .3s;}
.timeline .item:hover .year{transform: rotate(-5deg) scale(1.1);}
.timeline .item .image{width:40px;height:40px;border-radius:50%;position:relative;overflow:hidden;}
.timeline .item .image .img{width:100%;height:100%;transition: all .3s;}
.timeline .item:hover .image .img{transform: rotate(-5deg) scale(1.1);}
.timeline .item .detail{margin-left:8px;flex: 1;border:1px solid rgba(255, 255, 255, 0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.15);border-radius:4px;background:#fafafa;}
.timeline .item .detail .title{padding:8px;border-bottom:1px solid #e8e2d2;display: flex;justify-content: space-between;align-items: center;}
.timeline .item .detail .title .text{font-size:14px;color: #666666;}
.timeline .item .detail .title .time{font-size:12px;color: #666666;}
.timeline .item .detail .desc{font-size: 14px;padding: 8px;color: #999999;}
.timeline .item .detail .desc p{margin:0;}

.arc-box{margin: 12px 0;padding: 12px;border-radius: 4px;border: 1px solid rgba(255, 255, 255, 0.8);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);background-color: #ffffff;}
.arc-title{font-size: 16px;color: #333333;font-weight: bold;}
.arc-tags{display: flex;flex-wrap: wrap;}
.arc-tags .tags{margin-right: 12px;color:#999999;font-size: 0;}
.arc-tags .tags i{font-size: 12px;}
.arc-tags .tags span{font-size: 12px;margin-left: 5px;}
.arc-tags .tags a{font-size: 12px;margin-left: 5px;color: #337ab7;}
.arc-tags .tags a:hover{color:#dd4b39;}
.arc-tags .tags:last-child{margin-right: 0;}
.arc-box .content{margin-top: 15px;}
.arc-box .content.line{margin-top: 12px;padding-top: 12px;border-top: 1px dotted #eaeaea;}
.arc-box .content img{max-width: 100%;}
.arc-box .content p{margin-bottom: 12px;}
.prenext{margin-top:12px;padding-top:12px;font-size: 14px;border-top:1px dotted #eaeaea;}
.prenext span,.prenext a{color: #666666;}
.prenext a:hover{color: #dd4b39;}

.msg-input{margin-bottom:10px;}
.msg-input textarea{padding: 10px 10px;width: 100%;height: 90px;font-size: 14px;border: 1px solid #eee;border-radius: 4px;background: #fafafa;resize: none;display: inline-block;vertical-align: top;outline-style: none;}
.reply-btn-box{padding:10px 0;display:none;}
.reply-btn-box .boxs{display:flex;justify-content: space-between;}
.reply-btn-box .OwO-box{width:230px;}
.msg-box{padding:15px 0 0;display:flex;border-bottom: 1px solid #eee;}
.msg-box .msg-box{border-bottom: none;border-top: 1px solid #eee;}
.msg-box .image{width: 30px;height: 30px;margin-right:6px;}
.msg-box .image .img{border-radius:50%;width:100%;height:100%;}
.msg-box .detail{flex:1;}
.msg-box .detail .header{display:flex;justify-content: space-between;align-items: center;}
.msg-box .detail .header .name{font-size: 14px;color:#333;}
.msg-box .detail .header .info{font-size:0;}
.msg-box .detail .header .info .item{font-size: 12px;color:#999;margin-right:10px;}
.msg-box .detail .header .info .item:last-child{margin-right:0;}
.msg-box .detail .header .actions{font-size:0;}
.msg-box .detail .header .actions .item{font-size: 14px;color:#999;margin-right:10px;cursor:pointer;}
.msg-box .detail .header .actions .item:last-child{margin-right:0;}
.msg-box .detail .header .actions .item:hover{color:#dd4b39;}
.msg-box .detail .msg-content{color:#666;font-size:14px;white-space: pre-line;padding:10px 0;}

@media (min-width:576px){
    .reply-btn-box .OwO-box{width:380px;}
}
@media (min-width:992px){
    
    .row-lists>.row>div{margin-bottom: 24px;}
    
    .navbar-toggler{display:none;}
    .navbar-nav .nav-item .nav-link{font-size: 16px;padding: 16px 16px;}
    
    .app-content{margin-top: 240px;}
    
    .main-header{flex-direction: row;align-items: center;}
    .search{padding: 0;}
    
    .main-body{padding:24px 0;}
    
    .media-list .image{margin:12px 12px 12px  0;width:252px;}
    .media-list .image .flag{font-size:12px;height:22px;line-height:22px;top:8px;left:-21px;}
    .media-list .detail .title{margin-bottom:10px;font-size:16px;}
    .media-list .detail .desc{font-size: 14px;-webkit-line-clamp: 5;}
    .media-list .foot{padding:10px 12px;}
    .media-list .foot .tags{margin-right: 15px;}
    
    .card{margin-bottom:24px;}
    .card .lists .item{padding-bottom: 10px;margin-bottom: 10px;}
    
    .timeline{margin-top: 24px;}
    .timeline .item{margin-bottom: 24px;}
    .timeline .item .year{font-size: 14px;}
    .timeline .item .detail{margin-left:12px;}
    .timeline .item .detail .title{padding:12px;}
    .timeline .item .detail .desc{padding: 12px;}
    
    .arc-box{margin: 24px 0;}
    .arc-title{font-size: 24px;}
    .arc-tags{margin-top: 10px;}
    .arc-box .content{margin-top: 30px;}
    .arc-box .content.line{margin-top: 20px;padding-top: 20px;}
    
    .msg-input{margin-bottom:20px;}
    .msg-input textarea{padding: 12px 12px;}
    .reply-btn-box .OwO-box{width:500px;}
    .msg-box .image{width: 40px;height: 40px;margin-right:12px;}
}
@media (min-width:1200px){
}
@media (min-width:1400px){
    .container{max-width: 1424px;}
}