.grayBg {

    position: absolute;

    left: 0;

    right: 0;

    z-index: 1;

    width: 100%;

    height: 21.875vw;

    background-color: #f7f7f7;

}







.case {

    padding: 100px 0;

}

.case>.tit  {

    width: 607px;

    height: 87px;

    margin: 0 auto;

}

.case>.tit h2 {

    text-align: center;

    margin: 0;

}

.case>.tit .en h2 strong {

    font-size: 46px;

    color: #f5f5f5;

}

.case>.tit .zh {

    transform: translateY(-38px);

    -moz-transform: translateY(-38px);

    -o-transform: translateY(-38px);

    -ms-transform: translateY(-38px);

    -webkit-transform: translateY(-38px);

}

.case>.tit .zh h2 span {

    font-size: 24px;

    color: #333;

}

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

    .case {

        padding: 50px 0;

    }

}

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

    .case {

        padding: 50px 0;

    }

    .case>.tit {

        width: 100%;

        height: auto;

        margin-bottom: 5vw;

    }

    .case>.tit .zh {

        transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        -webkit-transform: translateY(0);

    }

}

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

    .case>.tit .en h2 strong {

        font-size: 9.375vw;

    }

    .case>.tit .zh h2 {

        line-height: 6.25vw;

    }

    .case>.tit .zh h2 span {

        font-size: 6.25vw;

    }

}

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

    .case {

        padding: 50px 0;

    }

}







.items {

    position: relative;

    z-index: 2;

    width: 1400px;

    /* padding: 30px 0 5.7292vw; */

    margin: 0 auto;

    background-color: #fff;

}

.items .cont {

    width: 1320px;

    margin: 0 auto;

}

.items .cont #ul {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    margin: 0 -20px;

    /* padding-top: 30px; */

}

.items #list {

    width: 48%;

    margin: 20px 1%;

}

.items #list .bigbox {

    display: block;

    height: 376px;

    position: relative;

    border-radius: 10px;

    overflow: hidden;

}

.items #list .bigbox img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 1s;

}

.items #list:hover .bigbox img {

    transform: scale(1.05);

}

.items #list .bigbox .mask {

    position: absolute;

    left: 0;

    top: 0;

    z-index: 2;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0);

    transition: all .5s ease;

}

.items #list:hover .bigbox .mask {

    background-color: rgba(0, 0, 0, .45);

}

.items #list .bigbox .textbox {

    position: absolute;

    bottom: -88px;

    left: 0;

    z-index: 3;

    width: calc(100% - 80px);

    padding: 40px;

    color: #fff;

    transition: .5s;

    opacity: 0;

}

.items #list:hover .bigbox .textbox {

    bottom: 0;

    opacity: 1;

}

.items #list .bigbox .textbox h2 {

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, .35);

    font-size: 32px;

    line-height: 42px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.items #list .bigbox .textbox .text {

    opacity: .85;

    max-height: 78px;

    line-height: 26px;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    -webkit-line-clamp: 2;

}

.items #list .bigbox .textbox .more {

    width: 130px;

    height: 48px;

    text-align: center;

    line-height: 48px;

    margin-top: 40px;

    border-radius: 5px;

    background-color: #ac8b6f;

}



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

    .items {

        width: 100%;

    }

    .items .cont {

        width: 85.7%;

    }

    .items #list .bigbox {

        height: 26.875vw;

    }

}

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

    .items {

        box-sizing: border-box;

        padding: 0 10px;

    }

    .items .cont #ul {

        display: block;

    }

    .items #list {

        width: 98%;

    }

    .items #list .bigbox {

        display: block;

        height: 59.375vw;

    }

}

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

    .items {

        padding-top: 10px;

    }

}

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

    .items #list:hover .bigbox img {

        transform: scale(1);

    }

    .items #list .bigbox .textbox {

        width: 100%;

        padding: 10px 20px;

    }

    .items #list .bigbox .textbox {

        bottom: 0;

        opacity: 1;

    }

    .items #list .bigbox .textbox .text {

        display: none;

    }

    .items #list .bigbox .textbox h2 {

        line-height: normal;

        font-size: 20px;

        margin: 0;

        padding-bottom: 5px;

    }

    .items #list:hover .bigbox .mask {

        background-color: rgba(0, 0, 0, 0);

    }

    .items #list .bigbox .textbox .more {

        display: none;

    }

}