/*项目部分 Begin*/
.listProject {
    width: 100%;
    height: auto;
    overflow: hidden;
}

    .listProject li {
        width: 23%;float:left;
        margin: 20px 1%;
        transition: all 0.5s;
        height: auto;
        overflow: hidden;
    }
        .listProject li:hover h2 {
            color: #44af35;
        }

        .listProject li:hover div img {
            border: 2px solid #1aa73f;
        }
        .listProject li:hover h2{
            font-weight:bold;
        }

        .listProject li div {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

            .listProject li div img {
                width: 98%;
                max-height:300px;
                border: 2px solid #fff;
                border-radius: 10px;
                transition: all 0.5s;
            }

        .listProject li h2 {
            width: 100%;
            height: 50px;
            overflow: hidden;
            line-height: 50px;
            overflow: hidden;
            font-size: 18px;
            transition: all 0.5s;
        }

        .listProject li h3 {
            width: 100%;
            height: 25px;
            overflow: hidden;
            line-height: 25px;
            overflow: hidden;
            font-size: 14px;
            color: #808080;
        }

        .listProject li s {
            display: block;
            width: 50px;
            height: 5px;
            background: linear-gradient(to right,#3c3 66%,#0b308e 100%);
            border-radius: 3px;
            transition: all 0.5s;
        }
/*项目部分 End*/


.projectsColor {
    width: 80%;
    height: auto;
    overflow: hidden;
    /*background-color: #e6e6e6;*/
    background-image:url("/Skins/UI/Cn/Images/projectBg.jpg");
    background-size:contain;
    margin-bottom: 30px;
}

    .projectsColor li {
        width: 55%;
        float: left;
        overflow: hidden;
        height: auto;
    }
        .projectsColor li img{
            width:100%;
        }

        .projectsColor li:nth-child(2) {
            width: 15%;

        }

        .projectsColor li:nth-child(3) {
            width: 15%;

        }

        .projectsColor li:nth-child(4) {
            width: 15%;

        }

.projectShowPic{
    width:58%;float:left;
    height:auto;overflow:hidden;
    margin-right:7%;
    position:relative;
    display:flex;
    align-items:center;
}
.projectShowPic img{
    width:100%;
}

.projectShowList {
    width: 35%;float:left;
    height:100%;
    display:table;
}
.projectShowListContent{
    width:100%;
    height:100%;
    display:table-cell;
    vertical-align:middle;
}
.projectShowList s {
    display: block;
    width: 100px;
    height: 5px;
    background: linear-gradient(to right,#3c3 66%,#0b308e 100%);
    border-radius: 3px;
    margin-bottom: 20px;
}
    .projectShowList h1 {
        width: 100%;
        height: auto;
        overflow: hidden;
        line-height:50px;
        color: #666;
        font-size:30px;
        font-weight:bold;
        margin-bottom:20px;
    }
    .projectShowList h3 {
        width:100%;
        height:auto;overflow:hidden;
        line-height:30px;
        color: #8a8a8a;
    }

    @media screen and (min-width:720px) and (max-width:1280px){
        .listProject li {
            width: 31%;
            float: left;
            margin: 20px 1%;
            transition: all 0.5s;
            height: auto;
            overflow: hidden;
        }
        .projectShowPic{
            height:100%;
        }
    }

    @media(max-width:720px){
        .listProject li {
            width: 48%;
            float: left;
            margin: 20px 1%;
            transition: all 0.5s;
            height: auto;
            overflow: hidden;
        }


        .projectsColor {
            width: 100%;
            height: auto;
            overflow: hidden;
            /*background-color: #e6e6e6;*/
            background-image: url("/Skins/UI/Cn/Images/projectBg.jpg");
            background-size: contain;
            margin-bottom: 30px;
        }

            .projectsColor li {
                width:65%;
                float: left;
                overflow: hidden;
                height: auto;
            }

                .projectsColor li img {
                    width: 100%;
                }

                .projectsColor li:nth-child(2) {
                    width: 10%;
                }

                .projectsColor li:nth-child(3) {
                    width: 10%;
                }

                .projectsColor li:nth-child(4) {
                    width: 10%;
                }


        .projectShowPic {
            width: 100%;
            margin-right: 0;
        }
        .projectShowList {
            width: 100%;
            margin-top:20px;
            height:auto;
        }

            .projectShowList h1 {
                font-size: 24px;
                margin-bottom: 10px;
            }
    }