﻿/* css重写 */

.flbg {

    margin-bottom: 15px;

}



.flow-mode {

    float: right;

    line-height: 40px;

    margin-top: 5px;

}



.flow-mode span {

    padding: 0px 10px;

    font-size: 1.5em;

    background: #fff;

    float: left;

    margin: 0 5px 0 10px;

    border-radius: 4px;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);

    cursor: pointer;

    color: #7d7d7d;

}

span.flow-mode-curl {

    color: #eee;

    background: #3c3b3b;

}

.cat_mode {

    margin-top: 15px;

    margin-right: 10px;

}



.cx-cover {

    opacity: 0;

}

.cx-cover {

    position: absolute;

    top: 0;

    left: 0;

    text-align: center;

    width: 100%;

    background: rgba(0, 0, 0, 0.45);

    height: 100%;

    color: #fff;

    text-shadow: 1px 1px 3px #000;

    font-size: 25px;

}

.cx-cover img {

    width: 50px !important;

    height: 50px !important;

    position: absolute;

    top: 50%;

    margin-top: -25px;

    left: 50%;

    margin-left: -25px;

    -webkit-filter: blur(0px)!important;

    -moz-filter: blur(0px)!important;

    -ms-filter: blur(0px)!important;

    filter: blur(0px)!important;

}

.Article_list li:hover .cx-cover{

    opacity: 1;

    transition:.5s;

    -moz-transition:.5s;

    -webkit-transition:.5s;

    -o-transition:.5s

}

.Article_list li:hover .post_left img{

    -webkit-filter: blur(1px);

       -moz-filter: blur(1px);

        -ms-filter: blur(1px);    

            filter: blur(1px); 

}

  



/******************

    图片格子布局

******************/

.flow-image .Article_list{

    max-width: 1200px;

    width: 100%;

    margin: 0 auto;

    margin-bottom: 10px;

    height: auto;

    overflow: hidden;

}



.flow-image .Article_right {

    display: none;

}



.flow-image .Article_list li {

    float: left;

    width: 25%;

    overflow: hidden;

    position: relative;



}
.zzcw img{
    width: 100%;display: block;
}
.zzcw a{
    position: absolute;right: 10px;bottom: 10px;
    text-align: center;font-size: 14px;
    padding: 10px 30px;color: #f00;
    background: rgba(255,255,255,0.8);
}
.zzcw a:hover{
    background: rgba(255,255,255,1);
}


@media screen and (min-width: 600px) {
    .flow-image .Article_list{
    padding-top: 20px;
}
}

.flow-image .Article_list li .Articles{

    width:100%;

    background: #fff;

    overflow: hidden;

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.10);



}

.flow-image .Article_list li:hover .Articles{

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);



}

.flow-image .post_left{

    position: relative;

    

}

.flow-image .post_left img{

    width:100%;

    height:170px;

}

.flow-image .post_right p{

    display: none;

    

}

.flow-image .post_right .cat {

    height: 50px;

    line-height: 50px;

    padding: 0 10px;

}

.flow-image .post_right .cat .sort {

    background: #2196F3;

    padding: 2px 8px;

}

.flow-image .post_right .cat .sort a{

    color:#fff;

}

.flow-image .post_right h2 {

    font-size: 15px;

    padding: 5px 10px;

    line-height: 25px;

    font-weight: 500;

    height: 50px;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

}

.flow-image .post_right h2 a{

    color: #333b4b;

}

.flow-image .post_right .post_meta>span>i{

    color: #565656;

    font-size: 1.2em;

}



.flow-image .post_right .post_meta {

    font-size: 12px;

    background: rgb(253, 252, 252);

    color: #6a7180;

    border-top: 1px solid #e9eaed;

    padding: 15px;

    height: 40px;

    line-height: 10px;

}



@media (max-width: 800px){

    .flow-image .Article_list li {

        width: 50%;

        padding: 5px;

    }

}



/******************

    Blog列表布局

******************/

.flow-blog{

    max-width: 1180px;

}

.flow-blog .Article_list{

    max-width: 1200px;

    width: 68.5%;

    padding-right: 15px;

    float: left;

    margin-top: 5px;

    margin-bottom: 10px;

    height: auto;

    overflow: hidden;

}

.flow-blog .Article_list li{

    background: #fff;

    padding: 20px;

    margin-bottom: 20px;

    zoom: 1;

    position: relative;

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.10);

}

.flow-blog .Article_list li:hover{

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);



}

.flow-blog .Article_list li:after{

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}



.flow-blog .post_left {

    float: left;

    width: 30%;

    position: relative;

}

.flow-blog .post_left img{

    width: 100%;

    height: auto;

}



.flow-blog .post_right {

    float: right;

    width: 70%;

    padding-left: 20px;

}



.flow-blog .post_right h2 {

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 10px;

    line-height: 25px;

}

.flow-blog .post_right h2 a {

    color: #383838;

}

.flow-blog .post_right p{

    color: #545454;

}



.flow-blog .post_right .post_meta {

    position: absolute;

    bottom: 20px;

    width: 60%;

    padding-left: 80px;

    color: #949292;

}

.flow-blog .post_right .cat {

    position: absolute;

    bottom: 20px;

    width: 50%;

    z-index: 2;

}



.flow-blog ._ajax_paged {

    max-width: 808px;

}





/******************

    Blog列表侧边

******************/

.flow-blog .widget_images {

    background: #fff;

}

.flow-blog .Article_right{

    width: 31.5%;

    float: right;

    background: #fff;

    height: 200px;

    margin-top: 5px;

    border: 1px solid rgba(0,0,0,.05);

    border-top: 3px solid #333;

}



.flow-blog .Article_right h3 {

    background: #fbf9f9;

    font-weight: 500;

    height: 50px;

    line-height: 50px;

}

.flow-blog .Article_right h3:before{

    content: " ";

    border: solid 5px rgba(0, 0, 0, 0);

    border-left: solid 5px #3c3b3b;

    width: 0;

    height: 0;

    display: inline-block;

}

.flow-blog .Article_right .fixed {

    width: 370px;

}



.flow-blog .pagination {

    max-width: 790px;

    margin:0;

    margin-bottom: 25px;

}



@media (max-width: 900px){

    .flow-blog .Article_list {

        width: 100%;

        padding-right: 5px;

        padding-left: 5px;

    }

    .flow-blog .Article_right {

        display: none

    }

}



@media (max-width: 700px){

    .flow-blog .post_right p {

        display: none

    }

}



@media (max-width: 600px){

    .flow-blog .Article_list li {

        padding: 10px;

        margin-bottom: 10px;

    }

    .flow-blog .post_right .post_meta {

        bottom: 10px;

    }

    .flow-blog .post_right h2 {

        font-size: 15px;

        font-weight: 500;

        line-height: 25px;

        height: 50px;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 2;

    }

    .flow-blog .post_right .cat {

        display: none

    }

    .flow-blog .post_right .post_meta {

        padding-left: 0px;

    }

}

@media (max-width: 350px){

    .flow-blog .usree_met {

        position: absolute;

        top:0;

        left: 0;

        color:#034946;

    }

}





/******************

    多功能小工具

******************/



.blog_widget {

    background: #fff;

    padding: 0 20px 20px;

}

.blog_widget a{

    font-weight: 500;

    color: #27374d;

}



.blog_widget li{

    position: relative;

    margin-top: 20px;

    overflow: hidden;

}

.blog_widget li .post-img{

    float: left;

    width: 100px;

    height: auto;

    max-height: 75px;

    position: relative;

}

.blog_widget li .post-img img {

    width: 100%;

    height: auto;

}

.blog_widget li .posts-title{

    margin-left: 115px;

}

.blog_widget li .posts-title span {

    font-size: 12px;

    color: #9A9A9A;

}

.blog_widget li .posts-title h4 {

    font-size: 15px;

    height: 40px;

    line-height: 20px;

    overflow: hidden;

    margin-bottom: 5px;

    padding-right: 15px;

}

.one-images li:first-child .post-img,

.max-images li .post-img {

    width: 100%;

    max-height: none;

}

.one-images li:first-child .posts-title h4 {

   margin-bottom: 28px;

}

.one-images li:first-child .posts-title,

.max-images li .posts-title{

    position: absolute;

    bottom: 0;

    background: rgba(0, 0, 0, 0.81);

    margin-left: 0;

    width: 100%;

    padding: 10px;

}

.one-images li:first-child .posts-title h4,

.max-images li .posts-title h4 {

    position: absolute;

    bottom: -18px;

    height:20px;

}

.game_rm .swiper-slide{
	transition: all 0.6s ease;
}
