.banner {
    width: 100%;

}

.banner .banner-1 {
    width     : 1200px;
    height    : 300px;
    margin    : 0 auto;
    margin-top: 100px;
}

/* 产品中心 */
.product {
    width: 100%;
}

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

.product .product-1 .title {
    float: left;
}

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

.product .product-1 .nav {
    float         : right;
    /* width      : fit-content; */
    width         : 494px;
    transform     : translateX(43px);
}

.product .product-1 .nav .item {
    float              : left;
    width              : 98px;
    height             : 20px;
    /* background-color: aqua; */
    text-align         : center;
}


.product .product-1 .nav .line {
    width           : 0.8px;
    height          : 8px;
    background-color: #b5b5b5;
    margin-top      : 7px;
    float           : left;
}

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

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

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

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

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




/* 产品展示 */
.product .product-a {
    width        : 1200px;
    margin       : 0 auto;
    display      : block;
    /* margin-top: 34px; */
}

.product .product-a .product-b {
    float              : left;
    width              : 360px;
    height             : 390px;
    /* background-color: aqua; */
    margin-right       : 60px;
    position           : relative;
    overflow           : hidden;
}

.product .product-a .product-b img {
    width : 360px;
    height: 320px;
}

.product .product-a .product-b .text {
    margin-top : 18px;
    margin-left: 129px;
    font-size  : 16px;
    line-height: 26px;

}

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

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

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

.product .product-a .product-b .mask .text-a {
    font-size : 30px;
    color     : #f8f8f8;
    margin-top: 118px;
    position  : absolute;
    top       : 0px;
    left      : 80px;
}

.product .product-a .product-b .mask .text-b {
    margin-left: 64px;
    font-size  : 16px;
    color      : #f8f8f8;
    line-height: 30px;
    margin-top : 10px;
}

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

.product .product-a.tt {
    margin-bottom: 202px;
}

.product .product-a.pp {
    margin-top: 113px;
}