.article-list {
    margin: 0 -6px;
}

.article-list .item {
    width: 50%;
    padding: 0 6px;
    margin-bottom: 40px;
}

.article-list .box {
    margin: 0 auto 0px;
    line-height: 1.65;
    overflow: hidden;
    max-width: 481px;
    position: relative;
}
.article-list .box .cover{
     font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;   
    z-index: 30;
}
.article-index-txt {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 100%;
    width: 372px;
    z-index: 2;
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.5s ease;
}

.article-list .box .pic img {

    width: 100%;

    -webkit-transition: all 0.5s linear;

    -moz-transition: all 0.5s linear;

    -o-transition: all 0.5s linear;

    transition: all 0.5s linear;
}

.article-list .box:hover .pic img {

    -ms-transform: scale(1.03);

    -moz-transform: scale(1.03);

    -webkit-transform: scale(1.03);

    -o-transform: scale(1.03);

    transform: scale(1.03);
}

.article-list .box:hover .article-index-txt {

    padding-bottom: 35px;
}

.article-list .pic {

    position: relative;

    overflow: hidden;

    margin: 0 0 10px 0;
}





.article-list .date {

    display: inline-block;

    font-size: 76px;

    font-weight: 900;

    line-height: 1;

    text-align: center;

    padding: 5px 0px;

    vertical-align: middle;

    margin: 0 5px 0 0;

    position: relative;

    display: inline-block;
}



.article-list .date small {

    display: block;

    font-size: 15px;

    font-weight: bold;

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;
}



.article-list li .article-text {

    display: inline-block;

    vertical-align: middle;

    width: calc(100% - 116px);
}



.article-list .name a {

    font-size: 16px;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    height: 29px;

    display: block;
}



.article-list .description a {

    letter-spacing: 0;

    max-height: 75px;

    font-size: 14px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    position: relative;
}

.article-list .box .more:before {

    content: '';

    width: 10px;

    height: 2px;

    display: inline-block;

    vertical-align: middle;

    margin-top: -2px;

    margin-right: 10px;

    transition: all .3s ease;
}

.article-list .box .more {

    font-size: 14px;

    letter-spacing: 0;

    display: block;

    text-align: right;

    margin-top: 8px;

    height: 0;

    transition: all .3s ease;

    overflow: hidden;
}

.article-list .box:hover .more {

    height: 23px
}

.article-list .box:hover .more:before {

    width: 40px;
}

.article-header {

    width: 100%;
    min-height: 80px;
    margin-bottom: 20px;

    text-align: center;

    position: relative;
}



.article-header .date {

    display: inline-block;

    font-size: 76px;

    font-weight: 900;

    line-height: 1;

    text-align: center;

    padding: 0px 0px;

    vertical-align: middle;

    margin: 0 5px 0 0;

    position: absolute;

    left: 0;

    top: -8px;
}



.article-header .date small {

    display: block;

    font-size: 15px;

    font-weight: bold;

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;
}

.article-header .date b {

    display: block;

    font-size: 18px;
}

.article-header .title {

    vertical-align: middle;

    font-size: 18px;

    font-weight: normal;

    display: block;

    padding-left: 110px;

    position: relative;

    margin: 0;

    text-align: left;
}



.article-detail {

    padding-bottom: 20px;
}

.article-detail .pic {

    margin-bottom: 30px;
}

.fb {

    text-align: center;

    margin-bottom: 30px;
}

.keyword_box {

    text-align: center;

    letter-spacing: 0;

    margin-top: 50px;

    margin-bottom: 10px;
}

.keyword_box .keyword_txt {

    font-size: 14px;
}

.keyword_box ul {

    display: inline-block;

    font-size: 14px;
}

.keyword_box ul li+li:before {
content: "|";
}

.article-list .keyword_box {

    text-align: left;

    padding-left: 36px;

    position: relative;

    overflow: hidden;

    transition: all .3s ease;

    margin: 8px auto;

    max-width: 481px;

    box-sizing: border-box;
}





.article-list .keyword_box .keyword_txt {

    position: absolute;

    left: 0;
}

.article-list .keyword_box li+li:before {

    position: absolute;

    left: 0;

    top: 0;

    content: "|"
}

.article-list .keyword_box li {

    position: relative;
}

.article-list .keyword_box li+li {

    padding-left: 10px;
}





@media screen and (max-width: 1000px) {

    .keyword_box {

        text-align: left;
    }

    .keyword_box .keyword_txt,
    .keyword_box ul {

        display: inline;
    }

    .article-list .pic {

        margin: 0 0 5px 0;
    }

    .article-list .item {

        margin-bottom: 15px;
    }

    .article-list .box {

        max-width: 294px;
    }

    .article-list .date {

        font-size: 43px;

        line-height: 1;

        padding: 0px;

        width: 60px;

        height: 60px;

        margin: 0 5px 0 0;
    }

    .article-list li .article-text {

        width: calc(100% - 70px);
    }

    .article-header .title {

        font-size: 16px;

        padding: 0;

        margin-top: 10px;
    }

    .article-header {

        margin-bottom: 10px;
    }

    .article-detail {

        padding-bottom: 0px;
    }

    .btn-box {

        padding-bottom: 10px;
    }

    .article-header .date {

        width: 90%;

        height: auto;

        margin: 0 auto 0px;

        padding: 5px 0;

        position: relative;
    }

    .share_box {

        margin: 10px 0 20px;
    }



    .article-list .item {

        float: left;

        width: 50%;

        margin-bottom: 15px;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;
    }

    .article-list .pic img {

        width: 100%;
    }

    .article-list .box {

        width: 100%;

        text-align: left;

        max-width: 100%;
    }



    .article-index-txt {

        position: static;

        box-sizing: border-box;

        width: 100%;
    }

    .article-list .box:hover .article-index-txt {

        padding-bottom: 15px;
    }

    .article-list .box .more {

        height: 23px;
    }
}



@media screen and (max-width: 767px) {

    .article-list {

        margin: 0 -7px;
    }

    .article-list .item {

        float: left;

        width: 100%;

        padding: 0 7px 10px;

        margin-bottom: 20px;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;
    }



    .article-list .box {

        width: 100%;

        text-align: left;

        max-width: 100%;

        margin: 0px 0px;
    }

    .article-list .pic {

        float: none;

        width: auto;
    }

    .article-list .txt {

        margin: 5px 0 0;

        padding: 15px 15px 20px;
    }

    .article-header,

    .article-header .date,

    .article-header .title {

        display: block;
    }
}