.banner {
    width: 100%;

}

.banner .banner-1 {
    width     : 1200px;
    height    : 300px;
    margin    : 0 auto;
    background: url(../img/banner\ \(1\).jpg) no-repeat;
    margin-top: 100px;
}

/* 项目展示 */
.project {
    width: 100%;

}

.project .project-1 {
    width        : 1200px;
    margin       : 0 auto;
    margin-top   : 47px;
    /* height    : 200px; */


}

.project-a {
    width              : 600px;
    height             : 20px;
    /* background-color: aqua; */
    float              : left;
}

.project-b {
    width              : 600px;
    height             : 20px;
    /* background-color: pink; */
    float              : left;
}

.project-a .head-1 a {
    color: #668aca;
}

.project-b .nav-list .nav-item {
    width     : 102px;
    height    : 20px;
    float     : right;
    text-align: center;
}

.project-b .nav-list .line {
    width           : 0.1px;
    height          : 8px;
    background-color: #b5b5b5;
    margin-top      : 7px;
    float           : right;
}

.nav-item::after {
    width           : 12px;
    height          : 1px;
    background-color: #668aca;
    content         : '';
    display         : block;
    margin          : 0 auto;
    margin-top      : 1px;
    opacity         : 0;
}

.nav-item:hover::after {
    opacity: 1;
}

.nav-item:hover a {
    font-size: 16px;
    color    : #668aca;
}

.nav-item.active a {
    font-size: 16px;
    color    : #668aca;
}

.nav-item.active::after {
    opacity: 1;
}

/* 项目 */
.card {
    width        : 1200px;
    margin       : 0 auto;
    margin-top   : 69px;
    margin-bottom: 200px;
}

.card .card-1 {
    width                 : 360px;
    height                : 270px;
    float                 : left;
    margin-right          : 60px;
    /* background-color   : aqua; */
    margin-bottom         : 21px;
    overflow              : hidden;
    border-radius         : 8px;
    position              : relative;

}

.card .card-1 .tp {
    width        : 360px;
    height       : 180px;
    border-radius: 8px;
    opacity      : 1;
    transition   : all 1s ease;
}

.card .card-1 .box {
    transition: all 1s ease;
}

.card .card-1 .text {
    margin-top : 27px;
    margin-left: 50px;
    line-height: 14px;
    opacity    : 1;

}

.card .card-1 .text-2 {
    font-size  : 12px;
    line-height: 12px;
    margin-top : 9px;
    margin-left: 50px;
    opacity    : 1;
}

.card .card-1 a img {
    width        : 30px;
    height       : 30px;
    display      : block;
    border-radius: 50%;
    position     : absolute;
    top          : 215px;
    left         : 279px;
    opacity      : 1;
}

/* .card .card-1:hover .text-2 {
    opacity: 0;
} */

.card .card-1:hover .box {
    opacity: 0;
}

.card .card-1 .tp-1 {
    width      : 360px;
    height     : 270px;
    position   : absolute;
    top        : 0;
    left       : 0;
    /* opacity : 0; */
}

.card .card-1 .text-a {
    color         : #fff;
    position      : absolute;
    top           : 65px;
    left          : 50px;
    font-size     : 14px;
    line-height   : 14px;
    /* opacity    : 0; */
    z-index       : 8;
    transition    : all 1s ease;
}

.card .card-1 .text-b {
    color         : #fff;
    font-size     : 12px;
    line-height   : 16px;
    position      : absolute;
    top           : 79px;
    left          : 50px;
    /* opacity    : 0; */
    z-index       : 8;
    transition    : all 1s ease;
}

.card .card-1 .text-c {
    color         : #fff;
    font-size     : 12px;
    line-height   : 16px;
    position      : absolute;
    top           : 116px;
    left          : 50px;
    /* opacity    : 0; */
    z-index       : 8;
    transition    : all 1s ease;
}

.card .card-1 .box-1 {
    opacity   : 0;
    transition: all 1s ease;

}

.card .card-1:hover .box-1 {
    opacity: 1;
}

.card .card-1 .mask {
    width           : 360px;
    height          : 270px;
    background-color: rgba(0, 0, 0, .5);
    position        : absolute;
    top             : 0px;
    left            : 0;
    transform       : translateY(-100%);
    transition      : all 1s ease;
}

.card .card-1 .mask img {
    position: absolute;
    left    : 279px;
    top     : 180px;
}

.card .card-1:hover .mask {
    transform: translateY(0);
}

.project .project-1.cg {
    margin-top: 55px;
}

/* .project .project-1 .card .card-1.cg {
    margin-bottom: 80px;
} */
html,
body {
    /* 让网页滚动 变的平滑  */
    scroll-behavior: smooth;
}