.demo{padding:30px 30px 50px;min-width:1100px}.demo .labelBox li{font-size:15px}.demo .labelBox li a{color:#444}.demo .labelBox li a:hover{color:#27c48f;text-decoration:underline}.demo .labelBox li.active{color:#27c48f}.demo .popularBox,.demo .updateBox{display:none}.demo .popularBox h3,.demo .updateBox h3{font-size:20px;border-bottom:1px solid #ccc}.demo .popularBox h3 span,.demo .updateBox h3 span{margin-bottom:-1px;display:inline-block;height:35px;line-height:35px;border-bottom:2px solid #27c48f}.demo .popularBox ul,.demo .updateBox ul{margin-top:15px}.demo .popularBox.popularBox li .thumbnail,.demo .updateBox.popularBox li .thumbnail{padding:0;border:0;background:#f5f5f5}.demo .popularBox.popularBox li .thumbnail >a,.demo .updateBox.popularBox li .thumbnail >a{display:inline-block;height:178px;width:100%;overflow:hidden;position:relative}.demo .popularBox.popularBox li .thumbnail >a img,.demo .updateBox.popularBox li .thumbnail >a img{height:100%;width:100%;transition:600ms}.demo .popularBox.popularBox li .thumbnail >a strong,.demo .updateBox.popularBox li .thumbnail >a strong{display:inline-block;position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(0,0,0,0);color:#fff;font-size:25px;transition:600ms}.demo .popularBox.popularBox li .thumbnail >a strong span,.demo .updateBox.popularBox li .thumbnail >a strong span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:600ms}.demo .popularBox.popularBox li .thumbnail >a:hover strong,.demo .updateBox.popularBox li .thumbnail >a:hover strong{background:rgba(0,0,0,.8)}.demo .popularBox.popularBox li .thumbnail >a:hover strong span,.demo .updateBox.popularBox li .thumbnail >a:hover strong span{opacity:1}.demo .popularBox.popularBox li .thumbnail >a:hover img,.demo .updateBox.popularBox li .thumbnail >a:hover img{transform:scale(1.05) translate(-10px)}.demo .popularBox.popularBox li .thumbnail .caption h4,.demo .updateBox.popularBox li .thumbnail .caption h4{margin:3px;font-size:18px;height:45px;overflow:hidden}.demo .popularBox.popularBox li .thumbnail .caption h4 a,.demo .updateBox.popularBox li .thumbnail .caption h4 a{color:#222}.demo .popularBox.popularBox li .thumbnail .caption h4:hover a,.demo .updateBox.popularBox li .thumbnail .caption h4:hover a{color:#27c48f}.demo .popularBox.popularBox li .thumbnail .caption p,.demo .updateBox.popularBox li .thumbnail .caption p{font-size:15px;color:#222}.demo .popularBox.popularBox li .thumbnail .caption p a,.demo .updateBox.popularBox li .thumbnail .caption p a{text-decoration:none;color:#222}.demo .popularBox.popularBox li .thumbnail .caption p a.payIncoBox,.demo .updateBox.popularBox li .thumbnail .caption p a.payIncoBox{display:inline-block;width:20px;height:20px;line-height:20px;background:#27c490;border-radius:50%;color:#fff;text-align:center;font-size:12px;text-indent:1px;transition:600ms}.demo .popularBox.popularBox li .thumbnail .caption p a.payIncoBox:hover,.demo .updateBox.popularBox li .thumbnail .caption p a.payIncoBox:hover{transform:rotateZ(360deg)}.demo .popularBox.popularBox li .thumbnail .caption p:nth-of-type(1),.demo .updateBox.popularBox li .thumbnail .caption p:nth-of-type(1){height:60px;overflow:hidden}.demo .popularBox.popularBox li .thumbnail .caption p:nth-of-type(2),.demo .updateBox.popularBox li .thumbnail .caption p:nth-of-type(2){height:20px}.demo .popularBox.updateBox >ul li,.demo .updateBox.updateBox >ul li{margin-bottom:30px;perspective:1000px}.demo .popularBox.updateBox >ul li .media,.demo .updateBox.updateBox >ul li .media{padding:15px;background:#f5f5f5;transition-duration:1000ms;transition-delay:100ms;transform-style:preserve-3d;transform-origin:center top;backface-visibility:hidden}.demo .popularBox.updateBox >ul li .media .media-left,.demo .updateBox.updateBox >ul li .media .media-left{transition:600ms}.demo .popularBox.updateBox >ul li .media .media-left img,.demo .updateBox.updateBox >ul li .media .media-left img{width:250px;height:140px}.demo .popularBox.updateBox >ul li .media .media-left:hover,.demo .updateBox.updateBox >ul li .media .media-left:hover{transform:translateX(-10px)}.demo .popularBox.updateBox >ul li .media .media-body,.demo .updateBox.updateBox >ul li .media .media-body{padding-left:15px}.demo .popularBox.updateBox >ul li .media .media-body h4,.demo .updateBox.updateBox >ul li .media .media-body h4{margin-bottom:10px;font-size:18px;overflow:hidden;padding-top:3px}.demo .popularBox.updateBox >ul li .media .media-body h4 a,.demo .updateBox.updateBox >ul li .media .media-body h4 a{color:#222}.demo .popularBox.updateBox >ul li .media .media-body h4:hover a,.demo .updateBox.updateBox >ul li .media .media-body h4:hover a{color:#27c48f}.demo .popularBox.updateBox >ul li .media .media-body p,.demo .updateBox.updateBox >ul li .media .media-body p{font-size:15px;color:#222;word-break:break-all}.demo .popularBox.updateBox >ul li .media .media-body p:nth-of-type(1),.demo .updateBox.updateBox >ul li .media .media-body p:nth-of-type(1){max-height:105px;overflow:hidden}.demo .popularBox.updateBox >ul li .media .media-body p:nth-of-type(2),.demo .updateBox.updateBox >ul li .media .media-body p:nth-of-type(2){height:20px}.demo .popularBox.updateBox >ul li .media .media-body p .payIncoBox,.demo .updateBox.updateBox >ul li .media .media-body p .payIncoBox{display:inline-block;width:20px;height:20px;line-height:20px;background:#27c490;border-radius:50%;color:#fff;text-align:center;font-size:12px;text-indent:1px;transition:600ms}.demo .popularBox.updateBox >ul li .media .media-body p .payIncoBox:hover,.demo .updateBox.updateBox >ul li .media .media-body p .payIncoBox:hover{transform:rotateZ(360deg)}.demo .popularBox.updateBox >ul li.active .media,.demo .updateBox.updateBox >ul li.active .media{transform:rotateX(-90deg) translateZ(0);opacity:0}.demo .pageBox ul.m-pagination-page{width:100%;background:#f5f5f5;padding:10px}.demo .pageBox ul.m-pagination-page li >a{width:24px;height:40px;line-height:40px;text-align:center}.demo .pageBox ul.m-pagination-page li.active a{background:#27c48f;border-color:#27c48f}.demo .emptyBox{display:none;height:200px;line-height:200px;font-size:16px;text-align:center}
#article_tab{margin-bottom:20px}#article_tab h3{z-index:10;height:50px;margin:0;line-height:50px;color:#fff;background:#27c490;font-size:20px}#article_tab h3 span{font-size:16px}#article_tab .tab_main{min-height:250px;background:#f7f7f7}#article_tab .list-group li.list-group-item{box-sizing:border-box;border:0;border-left:3px solid #f7f7f7;background:#f7f7f7}#article_tab .list-group li.list-group-item a{font-size:16px;color:#444;cursor:pointer}#article_tab .list-group li.list-group-item a:hover{color:#27c490}#article_tab .list-group li.list-group-item:first-child{padding-top:20px;border-radius:0}#article_tab .list-group li.list-group-item.active,#article_tab .list-group li.list-group-item:hover{border-left:3px solid #27c490}#article_tab .list-group li.list-group-item.active a,#article_tab .list-group li.list-group-item:hover a{color:#27c490}#article_tab .list-group li.list-group-item.active .tab_sub a,#article_tab .list-group li.list-group-item:hover .tab_sub a{color:#444;font-size:14px}#article_tab .list-group li.list-group-item .tab_sub{padding-left:0;display:none}#article_tab .list-group li.list-group-item .tab_sub li{padding:5px 0 5px 15px}#article_tab .list-group li.list-group-item .tab_sub li:hover a,#article_tab .list-group li.list-group-item .tab_sub li.active a{color:#27c490}#article_tab .list-group li.list-group-item .tab_sub li:last-child{padding-bottom:0}
.sideBox .trianBox a{display:inline-block;width:100%;overflow:hidden;cursor:pointer}.sideBox .trianBox a img{width:100%;transition:600ms}.sideBox .trianBox a img:hover{transform:scale(1.05)}.sideBox .popularList{display:none}.sideBox .popularList h3{font-size:20px;height:35px;line-height:35px;border-bottom:2px solid #27c48f}.sideBox .popularList ul li{margin-top:10px;font-size:15px}.sideBox .popularList ul li a{color:#222}.sideBox .popularList ul li a:hover{color:#27c48f}.sideBox .popularList ul li:nth-of-type(even) span.badge{background:#e96f57}.sideBox .popularList ul li:nth-of-type(odd) span.badge{background:#27c48f}.sideBox .recommendBox{display:none}.sideBox .recommendBox h3{font-size:20px;height:35px;line-height:35px;border-bottom:2px solid #27c48f}.sideBox .recommendBox li .thumbnail{padding:0;border:0;border:1px solid #ccc}.sideBox .recommendBox li .thumbnail >a{display:inline-block;height:200px;width:100%;overflow:hidden}.sideBox .recommendBox li .thumbnail >a img{height:100%;width:100%;transition:600ms}.sideBox .recommendBox li .thumbnail >a img:hover{transform:scale(1.05)}.sideBox .recommendBox li .thumbnail .caption{padding-top:5px}.sideBox .recommendBox li .thumbnail .caption h4{margin:5px 0;font-size:16px}.sideBox .recommendBox li .thumbnail .caption h4 a{color:#222}.sideBox .recommendBox li .thumbnail .caption h4:hover a{color:#27c48f}.sideBox .recommendBox li .thumbnail .caption p{font-size:15px;color:#555;height:60px;overflow:hidden}
.loadingBox{height:150px;line-height:75px;font-size:16px;text-align:center}.loadingBox span:nth-of-type(1){animation-delay:50ms}.loadingBox span:nth-of-type(2){animation-delay:100ms}.loadingBox span:nth-of-type(3){animation-delay:150ms}.loadingBox span:nth-of-type(4){animation-delay:200ms}.loadingBox span:nth-of-type(5){animation-delay:250ms}.loadingBox span:nth-of-type(6){animation-delay:300ms}.loadingBox span:nth-of-type(7){animation-delay:350ms}.loadingBox span:nth-of-type(8){animation-delay:400ms}.loadingBox span:nth-of-type(9){animation-delay:450ms}.loadingBox span:nth-of-type(10){animation-delay:500ms}