@charset "UTF-8";

.project-page .main-content .project-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .5rem .4rem;
    margin: 0 auto;
}

    .project-page .main-content .project-list > li {
        width: 23%;
        height: auto;
        position: relative;
        color: #2d282f;
        padding: 0;
        margin: 0 1%;
        padding-bottom: .2rem;
        margin-bottom: .4rem;
        background: #f9f9f9;
    }

        .project-page .main-content .project-list > li:after {
            display: none;
            position: absolute;
            top: .85rem;
            left: 15%;
            height: 28%;
            width: .03rem;
            background: #282828;
            z-index: 1;
        }
         .project-page .main-content .project-list > li > a:hover
         {
            color: #2d282f;
             
         }

@media(max-width:767px) {
    .project-page .main-content .project-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: .5rem 0;
        margin: 0 auto;
    }

        .project-page .main-content .project-list > li {
            width: 46%;
            height: auto;
            position: relative;
            color: #2d282f;
            padding: 0;
            margin: 0 2%;
            padding-bottom: .2rem;
            margin-bottom: .4rem;
            background: #f9f9f9;
        }

            .project-page .main-content .project-list > li > a > p {
                height: auto !important;
                padding: 0 .3rem !important;
                padding-top:.3rem!important;
                font-size: .3rem !important;
                max-height:inherit!important;
            }

            .project-page .main-content .project-list > li > a > h3 {
                padding-left: .3rem !important;
                font-size: .26rem !important;
                padding-top: .3rem !important;
            }
}

@media (min-width:768px) {
    .project-page .main-content .project-list > li:after {
        display: block;
        top: 1.25rem;
        left: 15%;
        height: 27%;
    }
}

@media (min-width:992px) {
    .project-page .main-content .project-list > li:after {
        top: 1.4rem;
        left: 13%;
        height: 26%;
    }
}

@media (min-width:1200px) {
    .project-page .main-content .project-list > li:after {
        top: 1.5rem;
        left: 13%;
        height: 24%;
    }
}

.project-page .main-content .project-list > li > a > img {
    max-width: 100%;
    width: 100%;
    height: auto;
    z-index: 0;
    border-radius: 6px 6px 0px 0px;
}

.project-page .main-content .project-list > li > a > p {
    overflow: hidden;
    padding-left: 0;
    margin-bottom: .2rem;
    max-height: .6rem;
    font-size: .3rem;
    word-break: break-all;
    line-height: 1.5;
    color: #2d282f;
    text-decoration: none;
}

.project-page .main-content .project-list > li > a > h3 {
    padding-left: 0;
    padding-top: .1rem;
    font-size: .26rem;
    color: #2d282f;
    text-decoration: none;
}

@media (min-width:768px) {
    .project-page .main-content .project-list > li > a > p {
        height: auto;
        padding: 0 .3rem;
        font-size: .2rem;
    }

    .project-page .main-content .project-list > li > a > h3 {
        padding-left: .3rem;
        font-size: .16rem;
        padding-top: .3rem;
    }
}