.banner .banner-1 {
    width          : 100%;
    height         : 700px;
    background     : url(../img/banner.jpg) no-repeat center;
    background-size: cover;
}

.banner .btn {
    width              : 107px;
    height             : 14px;
    /* background-color: aqua; */
    margin             : 0 auto;
    transform          : translateY(670px);
}

.banner .btn .btn-1 {
    width           : 8px;
    height          : 8px;
    float           : left;
    margin-top      : 3px;
    border-radius   : 50%;
    margin-right    : 9px;
    display         : block;
    background-color: #fff;
    border          : 3px solid transparent;
    background-clip : content-box;
}

.banner .btn .btn-1:nth-child(5) {
    margin-right: 0;
}

.banner .btn-1:hover {
    background-color: #668aca;
    border-color    : #ffffff;
}

.banner .btn-1.active {
    background-color: #668aca;
    border-color    : #ffffff;
}

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

}

.project .project-1 {
    width : 1200px;
    margin: 0 auto;
}

.title {
    font-size  : 30px;
    height     : 28px;
    line-height: 28px;
    padding-top: 120px;
}

.title-1 {
    font-size  : 12px;
    height     : 10px;
    line-height: 10px;
    padding-top: 6px;
}

.line {
    width           : 60px;
    height          : 1px;
    background-color: #a1a1a1;
    float           : left;
    margin-top      : 6px;
}

.line-1 {
    width           : 300px;
    height          : 1px;
    background-color: #a1a1a1;
    float           : right;
    margin-top      : 6px;
}

.project .project-2 {
    margin: 58px auto;
    width : fit-content;
    height: 20px;
}

.project .project-2 .nav {
    width      : 102px;
    height     : 20px;
    line-height: 20px;
    text-align : center;
    float      : left;
}

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

.project .project-2 .nav:hover::after {
    opacity: 1;
}

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

.project .project-2 .line-3 {
    width           : 1px;
    height          : 8px;
    float           : left;
    background-color: #b5b5b5;
    margin-top      : 7px;
}

.project .project-1 .card {
    width : fit-content;
    height: 270px;
}

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

.project .project-1 .card-1 .aa {
    width          : 360px;
    height         : 180px;
    background     : url(../img/图片.jpg) no-repeat;
    background-size: 360px 180px;
    border-radius  : 8px;
    overflow       : hidden;
}

.project .project-1 .card-1.tp .aa {
    width          : 360px;
    height         : 180px;
    background     : url(../img/pro-img-2.0.jpg) no-repeat;
    background-size: 360px 180px;
    border-radius  : 8px;
    overflow       : hidden;
}

.project .project-1 .card-1.tp-1 .aa {
    width          : 360px;
    height         : 180px;
    background     : url(../img/pro-img-3.0.jpg) no-repeat;
    background-size: 360px 180px;
    border-radius  : 8px;
    overflow       : hidden;
}

.project .project-1 .card-1 .text {
    margin-top : 28px;
    margin-left: 50px;
    height     : 16px;
    line-height: 16px;
}

.project .project-1 .card-1 .text-1 {
    font-size  : 12px;
    margin-top : 7px;
    margin-left: 50px;
    height     : 12px;
    line-height: 12px;
}

.project .project-1 .card-1 .info {
    position: relative;
}

.project .project-1 .card-1 .info .tp {
    position: absolute;
    right   : 58px;
    bottom  : 0px;
}

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

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

.project .project-1 .card-1:hover {
    background     : url(../img/图片-1.jpg) no-repeat center;
    background-size: 100% 100%;
}

.project .project-1 .card-1.tp:hover {
    background     : url(../img/pro-img-2.jpg) no-repeat center;
    background-size: 100% 100%;
}

.project .project-1 .card-1.tp-1:hover {
    background     : url(../img/pro-img-3.jpg) no-repeat center;
    background-size: 100% 100%;
}


.project .project-1 .card-1:hover .aa {
    opacity: 0;
}

.project .project-1 .card-1:hover .info {
    opacity: 0;
}

.project .project-1 .card-1 .mask .text {
    color      : #fff;
    margin-top : 58px;
    margin-left: 50px;
    height     : 14px;
    line-height: 14px;
}

.project .project-1 .card-1 .mask .text-1 {
    color      : #fff;
    margin-top : 4px;
    font-size  : 12px;
    margin-left: 50px;
}

.project .project-1 .card-1 .mask .text-2 {
    font-size  : 12px;
    color      : #fff;
    margin-left: 50px;
    margin-top : 19px;
    line-height: 20px;
}

.project .project-1 .card-1 .mask .tp-1 {
    margin-bottom: -45px;
    margin-left  : 280px;
    border-radius: 50%;
}

.project .project-1 .card-1 .mask .tp-1.tp-2 {
    margin-bottom: -105px;
}

/* 产品展示 */
.product {
    width: 100%;
}

.product .product-1 {
    width : 1200px;
    margin: 0 auto;
}

.product .product-nav {
    width              : 1200px;
    height             : 114px;
    /* background-color: aqua; */
    margin             : 0 auto;
    margin-top         : 54px;
}

.product .product-nav .nav-list {
    width         : fit-content;
    /* 不写宽度 由内容撑起 */
    /* margin-left: 77px; */
    height        : 114px;
}

.product .product-nav .nav-list .nav-item {
    float         : left;
    margin        : 0 38px;
    width         : 164px;
    height        : 78px;
    display       : table-cell;
    /*主要是这个属性*/
    vertical-align: middle;
    text-align    : center;
    position      : relative;
    transition    : all 1s ease;
}

.product .product-nav .nav-list .nav-item .line {
    width           : 0px;
    height          : 1px;
    background-color: #668aca;
    position        : absolute;
    top             : 98px;
    left            : 74px;
    transition      : all 1s ease;
}

.product .product-nav .nav-list .nav-item:hover .line {
    width : 16px;
    height: 1px;
}

.product .product-nav .nav-list .nav-item .text {
    margin-top: 7px;
    transition: all 1s ease;
}

.product .product-nav .nav-list .nav-item .text.tt {
    margin-top: 0px;
}

.product .product-nav .nav-list .nav-item:hover .text {
    font-size: 16px;
    color    : #668aca;

}

.product .product-nav .nav-list .nav-item:hover {
    background-color: #668aca;
}




/* 产品展示 */
.product .product-2 {
    width              : 1200px;
    /* background-color: pink; */
    margin             : 0 auto;
    margin-top         : 110px;
}

.product .product-2 .product-list {
    width                       : 360px;
    height                      : 359px;
    margin-right                : 60px;
    float                       : left;
    /* background-color         : yellow; */
    /* margin-bottom            : 41px; */
    position                    : relative;
    overflow                    : hidden;
}

.product .product-2 .product-list .mask {
    background-color: rgba(0, 0, 0, .5);
    position        : absolute;
    left            : 0;
    top             : 0;
    width           : 360px;
    height          : 320px;
    opacity         : 0;
    transform       : translateY(-100%);
    transition      : all 1s ease;

}

.product .product-2 .product-list:hover .mask {
    opacity  : 1;
    transform: translateY(0);
}

.product .product-2 .product-list .mask .line {
    width           : 80px;
    height          : 1px;
    background-color: #f8f8f8;
    margin-top      : 150px;
}

.product .product-2 .product-list .mask .text {
    font-size    : 30px;
    color        : #f8f8f8;
    margin-top   : 118px;
    /* transition: all 1s ease; */
}

.product .product-2 .product-list .mask .text-1 {
    margin-left: 69px;
    font-size  : 16px;
    color      : #f8f8f8;
    line-height: 30px;
}

.product .product-2 .product-list .text-a {
    /* margin-left: 62px; */
    position   : absolute;
    left       : 62px;
    bottom     : 0px;
    font-size  : 16px;
    line-height: 28px;
    color      : #767676;
    transition : all 1s ease;

}

.product .product-2 .product-list:hover .text-a {
    opacity: 0;
}

/* 服务范围 */
.service {
    width: 100%;
}

.service .service-1 {
    width : 1200px;
    margin: 0 auto;

}

.service .img {
    background     : url(../img/图层\ 13.png) no-repeat;
    width          : 100%;
    height         : 700px;
    margin-top     : 60px;
    background-size: 100% 100%;
}

.service .service-2 {
    width              : 1200px;
    height             : 700px;
    /* background-color: aqua; */
    margin             : 0 auto;
    position           : relative;
}

.service .service-2 .box {
    width                 : 248px;
    height                : 148px;
    /* background-color   : aqua; */
    border                : solid 1px #f8f8f8;
    float                 : right;
    border-right          : none;
    margin-top            : 400px;
    text-align            : center;
    transition            : all 0.3s ease;
    /* position           : relative; */
}

.service .service-2 .box-1 {
    margin-right: 3px;
    border-right: solid 1px #f8f8f8;
}

.service .service-2 .box .text {
    font-size : 16px;
    color     : #ffffff;
    margin-top: 47px;

}

.service .service-2 .box .lien {
    width           : 30px;
    height          : 1px;
    background-color: #ffffff;
    margin-top      : 13px;
    margin-left     : 110px;
}

.service .service-2 .box .text-2 {
    margin-top: 13px;
    font-size : 12px;
    color     : #ffffff;
}

.service .service-2 .box:hover {
    background-color: #668aca;
    transform       : scale(1.05);
    border          : none;
}

.service .service-2 .text-a {
    padding-top: 150px;
    font-size  : 30px;
    color      : #fff;
    float      : left;
    line-height: 30px;
}

.service .service-2 .text-b {
    color         : #ffffff;
    /* float      : left; */
    position      : absolute;
    left          : 0;
    top           : 215px;
    font-size     : 14px;
    line-height   : 28px;
    letter-spacing: 0px;
}


/* 新闻资讯 */
.news {
    width: 100%;

}

.news .news-1 {
    width : 1200px;
    margin: 0 auto;
}

.news .news-1 .box-2 {
    float: left;
}

.news .news-1 .box {
    width              : 570px;
    height             : 570px;
    /* background-color: aqua; */
    margin-top         : 67px;
    float              : left;
    margin-right       : 60px;
}

.news .news-1 .box .box-a {
    width     : 570px;
    height    : 270px;
    background: url(../img/news-1.jpg) no-repeat;
    overflow  : hidden;
}

.news .news-1 .box .box-a .mask {
    width           : 570px;
    height          : 90px;
    background-color: rgba(0, 0, 0, .5);
    margin-top      : 180px;
    position        : relative;
}

.news .news-1 .box .box-a .mask .text {
    padding-top: 11px;
    margin-left: 50px;
    color      : #fff;
    font-size  : 16px;
}

.news .news-1 .box .box-a .mask .text-1 {
    font-size  : 12px;
    color      : #fff;
    margin-left: 50px;
    line-height: 20px;
    padding-top: 8px;
}

.news .news-1 .box .box-a .mask .more {
    width   : 30px;
    height  : 30px;
    position: absolute;
    opacity : 1;
    top     : 48px;
    left    : 490px;
}

.news .news-1 .box .box-b {
    width           : 270px;
    height          : 270px;
    background-color: pink;
    float           : left;
    margin-right    : 30px;
    margin-top      : 30px;
    background      : url(../img/news-3.jpg) no-repeat;
    position        : relative;
    overflow        : hidden;
}

.news .news-1 .box .box-b.mr0 {
    background: url(../img/news-4.jpg) no-repeat;
}

.news .news-1 .box .box-b .bg {
    position     : absolute;
    top          : 228px;
    left         : 185px;
    overflow     : hidden;
    border-radius: 50%;
    transition   : all 1s ease;
    opacity      : 0;
    z-index      : 8;
}

.news .news-1 .box .box-b .mask {
    background-color   : rgba(0, 0, 0, .5);
    width              : 270px;
    height             : 90px;
    margin-top         : 270px;
    /* transform       : translateY(100%); */
    opacity            : 0;
    transition         : all 1s ease;
}

.news .news-1 .box .box-b:hover .mask {
    transform: translateY(-100%);
    opacity  : 1;
}

.news .news-1 .box .box-b:hover .bg {
    opacity: 1;
}

.news .news-1 .box-2 .box.mr0 {
    background: url(../img/news-5.jpg) no-repeat;
    overflow  : hidden;
    position  : relative;
}

.news .news-1 .box-2 .box.mr0 .mask {
    width           : 570px;
    height          : 90px;
    background-color: rgba(0, 0, 0, .5);
    margin-top      : 570px;
    opacity         : 0;
    transition      : all 1s ease;
}

.news .news-1 .box-2 .box.mr0:hover .mask {
    transform: translateY(-100%);
    opacity  : 1;
}

.news .news-1 .box-2 .box.mr0 .bg {
    position     : absolute;
    top          : 528px;
    left         : 485px;
    overflow     : hidden;
    border-radius: 50%;
    transition   : all 1s ease;
    opacity      : 0;
    z-index      : 8;
}

.news .news-1 .box-2 .box.mr0:hover .bg {
    opacity: 1;
}


/* 关于简设 */
.about {
    width        : 100%;
    margin-bottom: 100px;
}

.about .about-1 {
    width : 1200px;
    margin: 0 auto;
}

.about .about-1 .box {
    width     : 1200px;
    height    : 300px;
    margin-top: 67px;
}

.about .about-1 .box .box-1 {
    width : 500px;
    height: 300px;
    float : left;
}

.about .about-1 .box .box-2 {
    width : 700px;
    height: 300px;
    float : left;
}

.about .about-1 .box .text {
    float      : right;
    color      : #767676;
    line-height: 24px;
    margin-top : 28px;
}

.about .about-1 .box .text-1 {
    float      : right;
    color      : #767676;
    line-height: 24px;
    margin-top : 26px;
}

.about .about-1 .box .text-2 {
    line-height: 24px;
    margin-top : 26px;
    float      : right;
}