.bannerArea .Img .innerImg{
    padding-top: 28%;
}

.bannerArea .TxtBox{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    text-align: center;
    color: #fff;
}

.bannerArea .TxtBox .title b{
    font-size: calc(3px + 5vw);
}

.bannerArea .TxtBox .title h2{
    letter-spacing: calc(1px + 0.1vw);
}

/* engineeringArea */
.engineeringArea{
    padding: 7% 10% 2% 10%;
}

.engineeringArea .col{
    margin-bottom: 5%;
}

.engineeringArea .item .caseInfo{
    color: #fff;
    text-align: center;
    padding-top: 3%;
}

.engineeringArea .item::after{
    content: '';
    width: 96%;
    height: 60%;
    background: #071760;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    transition: all 0.4s ease;
}

.engineeringArea .item:hover::after{
    background: #051040;
    transition: all 0.4s ease;
}


.engineeringArea .item .caseInfo .area{
    padding: 12px 20px;
    background: #5f2f8c;
    display: inline-block;
    font-weight: 400;
    font-family: 'Noto Sans TC', sans-serif;
    margin-top: 3%;
}

.engineeringArea .item .Img{
    margin: 0 10%;
    overflow: hidden;
}

.engineeringArea .item a .Img .innerImg .image{
    transition: all 0.4s ease;
}

.engineeringArea .item:hover a .Img .innerImg .image{
    transform: scale(1.1);
    transition: all 0.4s ease;
}
@media (max-width: 991px) {
    .bannerArea .Img .innerImg{
        padding-top: 50%;
    }

    .bannerArea .TxtBox .title b{
        font-size: calc(10px + 5vw);
    }

    .engineeringArea{
        padding: 15% 5%;
    }


    .engineeringArea .item .caseInfo  .area{
        font-size: calc(10px + 1vw);
    }
}