.article-list {

    margin: 0 -13px;

}

.article-list .item {

    width: 25%;

    padding: 0 13px;

}

.article-list .item:nth-child(4n+1) {

    clear: left;

}

.article-list .box {

    max-width: 300px;

    margin: 0 auto 50px;

    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-list .pic {

    position: relative;

    overflow: hidden;

}

.article-list .txt {

    position: relative;

    padding: 15px 0 0;

}

.article-header .date,

.article-list .txt .date{

    float: left;

    position: relative;

    font-size: 14px;

    text-align: center;

    color: #fff;

    line-height: 0.5;

    padding: 18px 9.424px 18px;

    margin-right: 15px;

    background: #555555;

    font-family: 'Cormorant Garamond',serif;

    transition: all 0.3s ease;

    z-index: 2;

    display: none;

}

.article-header .date small,

.article-list .txt .date small{

    font-size: 40px;

    display: block;

    font-weight: 600;

    line-height: 0.6;

}

.article-list .box .txt .date::before {

    content: '';

    position: absolute;

    width: 0;

    height: 100%;

    background: #777777;

    left: 0;

    top: 0;

    transition: all 0.3s ease;

    z-index: -1;

}

.article-list .box:hover .txt .date::before {

    width: 100%;

}

.article-header .date2{

    position: absolute;

    right: 0;

    color: #555;

    font-size: 25px;

    border: 1px solid #ddd;

    padding: 15px 9.424px 21px;

    font-family: 'Cormorant Garamond',serif;

    display: none;

}

.article-list .name {

    position: relative;

    height: 55px;

    margin: 0;

    font-size: 18px;

    color: #555555;

    font-weight: 500;

    letter-spacing: 0.35px;

    line-height: 1.45;

    top: 7px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: all 0.3s ease;

}

.article-list .box:hover .name {

    color: #777777;

}

.article-list .description {

    position: relative;

    color: #999;

    font-size: 14px;

    letter-spacing: 0.35px;

    line-height: 1.65;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    height: 65px;

    margin: 20px 0;

    transition: all 0.3s ease;

}

.article-list .box:hover .description {

    color: #777777;

}

.article-header {

    max-width: 1280px;

    margin: 0 auto;

    border-bottom: solid 1px #ddd;

    position: relative;

    padding: 0 0 15px;

    line-height: 1.5;

}

.article-header .title {

    float: right;

    width: 100%;

    margin-top: 10px;

    font-weight: 500;

    color: #555;

    font-size: 22px;

    margin: 0;

}

.article-detail {

    padding: 30px 0;

}

.article-detail .editor {

    max-width: 1280px;

    margin: 0 auto;

}

/*-fb-*/

.fb {

    max-width: 1280px;

    display: block;

    margin: 15px auto 5px;

    overflow: hidden;

}

.share_box{

    max-width: 1280px;

    display: block;

    margin: 0 auto;

}

.a2a_default_style .a2a_svg {

    display: none;

}

.share_box .share-link .btn ,

.share_box .share-link .icon-ic-share-linecall,

.share_box .share-link .icon-ic-share-w {

    color: #cccccc;

    cursor: pointer;

    font-size:25px;

}

.share_box .share-link .btn.blogger:hover {

    color: #F26C38;

}

.share_box .share-link .btn.facebook:hover {

    color: #405D9A;

}

.share_box .share-link .btn.google:hover {

    color: #F34537;

}

.share_box .share-link .btn.twitter:hover {

    color: #39A0CE;

}

.share_box .share-link .btn.mail:hover {

    color: #F6C13D;

}

.share_box .share-link .btn.linkedin:hover {

    color: #0177B5;

}

.share_box .share-link .icon-ic-share-t:hover {

    color: #36465C;

}

.share_box .share-link .btn.line:hover {

    color: #00C300;

}

.share_box .share-link .icon-ic-share-linecall:hover {

    color: #00C300;

}

.share_box .share-link .icon-ic-share-w:hover {

    color: #F70B19;

}

.share_box .share-link .btn.pinterest:hover {

    color: #DE220A;

}

.share_box .share-link .btn.plurk:hover {

    color: #E9443D;

}

.share_box .share-link .icon-ic-share-linecall,

.share_box .share-link .icon-ic-share-w {

    font-size: 25px;

    width: 25px;

    height: 30px;

    line-height: 40px;

    border-radius: 15px;

    margin: 0;

    padding: 0px 0 0;

}

.share_box .share-link .btn {

    width: 25px;

    padding: 3px 0 0;

}

/*-keyword-*/

.keyword_box{

    margin-top: 10px;

    font-size: 14px;

    z-index: 90;

    position: relative;

}

.keyword_box .icon-ic-keyword{

    color: #555;

    vertical-align: top;

}

.keyword_box li:before {

    content: ' , ';

    display: inline-block;

    margin: 0 2px;

}

.keyword_box li:nth-last-child(1):before {

    display: none;

}

.keyword_box li {

    padding: 0;

    margin: 0 0 3px;

    border: unset!important;

}

.keyword_box li a{

    color: #777;

    line-height: 1;

    transition: all .3s ease;

    float: left;

    background: #f6f6f6;

    padding: 5px 3px;

    transition: all 0.3s ease;

}

.keyword_box li:hover a{

    color: #777;

    text-decoration: underline;

}

.keyword_box.detail{

    margin: 15px auto;

    max-width: 1280px;

    display: block;

}    

.keyword_box .ic.icon-ic-keyword{

    float: left;

    margin: 6px 10px 0 0;

}

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

    .article-list {

        margin: 0 -10px;

    }

    .article-list .item {

        padding: 10px;

    }

}

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

    .article-list .item {

        width: 50%;

    }

    .article-list .item:nth-child(4n+1) {

        clear: none;

    }

    .article-list .item:nth-child(2n+1) {

        clear: left;

    }

    .article-list .item:nth-child(odd){

        border-left:none;

    }

    .article-list .name {

        font-size: 16px;

        height: 48px;

    }

    .article-list .txt .date,

    .article-header .date,

    .article-header .date2  {

        padding: 13px 9.424px 13px;

    }

    .article-list .description {

        margin: 10px 0 0;

    }

    .article-header .title {

        font-size: 18px;

    }

}

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

    .article-list .box {

        margin: 0 auto 30px;

    }

}

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

    .article-list .item {

        width: 100%;

    }

    .article-list .item:nth-child(n) {

        clear: none;

    }

    .article-list li+li {

        border-left: none;

    }

    .article-header .date{

        float: none;

        width: 48px;

        display: block;

        margin-bottom: 10px;

    }

    .article-header .title{

        float: none;

        width: 100%;

        padding-right: 0;

    }

    .article-header .date2 {

        position: absolute;

        right: 0;

        top: 0;

        border: 0;

    }

}