.bannerArea{
    overflow: hidden;
}

.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);
}

/* .hotCaseArea */
.hotCaseArea,
.upcomingCaseArea,
.classicCaseArea{
    overflow: hidden;
    padding: 7% 0;
}

.hotCaseArea .title b,
.upcomingCaseArea .title b,
.classicCaseArea .title b{
    font-size: calc(3px + 2.5vw);
    font-family: "Cinzel", serif;
    font-weight: 500;
    color: #071760;
    display: block;
}

.hotCaseArea .title h2,
.upcomingCaseArea .title h2{
    border-top: 1px solid #989898;
    padding-top: 2%;
}

.hotCaseArea .hotCaseSlick .item .Img,
.upcomingCaseArea .hotCaseSlick .item .Img,
.classicCaseArea .classicSlick .item .Img{
    margin: 0 10%;
    overflow: hidden;
}

.hotCaseArea .hotCaseSlick .item a .Img .innerImg .image,
.upcomingCaseArea .hotCaseSlick .item a .Img .innerImg .image,
.classicCaseArea .classicSlick .item a .Img .innerImg .image{
    transition: all 0.4s ease;
}

.hotCaseArea .hotCaseSlick .item:hover a .Img .innerImg .image,
.upcomingCaseArea .hotCaseSlick .item:hover a .Img .innerImg .image,
.classicCaseArea .classicSlick .item:hover a .Img .innerImg .image{
    transform: scale(1.1);
    transition: all 0.4s ease;
}


.hotCaseArea .hotCaseSlick .item .caseInfo,
.upcomingCaseArea .hotCaseSlick .item .caseInfo,
.classicCaseArea .classicSlick .item .caseInfo{
    color: #fff;
    text-align: center;
    padding-top: 3%;
}

.hotCaseArea .hotCaseSlick .item::after,
.upcomingCaseArea .hotCaseSlick .item::after,
.classicCaseArea .classicSlick .item::after{
    content: '';
    width: 96%;
    height: 60%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

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

.classicCaseArea .title h2{
    display: inline-block;
}


/* .hotCaseArea */
.hotCaseArea::after{
    content: '';
    width: 48%;
    height: 105%;
    background-image: url(../images/case/decoPic-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.hotCaseArea .title {
    text-align: right;
    margin-right: 12%;
}

.hotCaseArea .slickBox{
    padding-right: 10%;
}

.hotCaseArea .hotCaseSlick .item::after,
.classicCaseArea .classicSlick .item::after{
    background: #071760;
    transition: all 0.4s ease;
}

.hotCaseArea .hotCaseSlick .item:hover::after,
.classicCaseArea .classicSlick .item:hover::after{
    background: #051040;
    transition: all 0.4s ease;
}

.hotCaseArea .hotCaseSlick .item .caseInfo .area{
    background: #5f2f8c;

}

.hotCaseArea .hotCaseSlick .slick-track {
    margin-left: 0;
}

.hotCaseArea .hotCaseSlick .slick-next,
.hotCaseArea .hotCaseSlick .slick-prev {
    top: 105%;
}

/* upcomingCaseArea */
.upcomingCaseArea{
    background: #071760;
}

.upcomingCaseArea::after{
    content: '';
    width: 49%;
    height: 100%;
    background-image: url(../images/case/decoPic-2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.upcomingCaseArea .slickBox{
    padding-left: 10%;
    z-index: 2;
}

.upcomingCaseArea .title {
    margin-left: 12%;
    color: #fff;
    z-index: 2;
}

.upcomingCaseArea .title b{
    color: #fff;
}

.upcomingCaseArea .hotCaseSlick .slick-track {
    margin-right: 0;
}

.upcomingCaseArea .hotCaseSlick .item::after{
    background: #5f2f8ccf;
    bottom: 0;
}

.upcomingCaseArea .hotCaseSlick .item:hover::after{
    background: rgb(95, 47, 140);
    transition: all 0.4s ease;
}

.upcomingCaseArea .hotCaseSlick .item .caseInfo{
    padding-bottom: 7%;
}

.upcomingCaseArea .hotCaseSlick .slick-next,
.upcomingCaseArea .hotCaseSlick .slick-prev {
    top: 110%;
}

.upcomingCaseArea .hotCaseSlick .slick-prev:after,
.upcomingCaseArea .hotCaseSlick .slick-next:before,
.upcomingCaseArea .hotCaseSlick .slick-prev:before,
.upcomingCaseArea .hotCaseSlick .slick-next:after {
    color: #fff;
}

/* classicCaseArea */
.classicCaseArea {
    padding-bottom: 10%;
}

.classicCaseArea .title{
    text-align: center;
    margin-bottom: 5%;
}

.classicCaseArea .title h2{
    padding-top: 0.5%;
    
}

.classicCaseArea .title h2::after{
    content: '';
    width: 320%;
    height: 1px;
    background: #989898;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.classicCaseArea .slickBox{
    padding: 0 7%;
}

@media (max-width: 991px) {
    .bannerArea .Img .innerImg{
        padding-top: 50%;
    }

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

    .hotCaseArea .hotCaseSlick .slick-track {
        margin-left: auto;
    }

    .hotCaseArea,
    .upcomingCaseArea,
    .classicCaseArea{
        overflow: hidden;
        padding: 15%  0;
    }

    .hotCaseArea .title{
        margin-bottom: 10%;
    }

    .hotCaseArea .title b,
    .upcomingCaseArea .title b,
    .classicCaseArea .title b{
        font-size: calc(12px + 3vw);
    }

    .hotCaseArea .hotCaseSlick .item .caseInfo .area,
    .classicCaseArea .classicSlick .item .caseInfo .area{
        font-size: calc(10px + 1vw);
    }

    .hotCaseArea .slickBox,
    .upcomingCaseArea .slickBox{
        padding: 0 5%;
    }
    
    .upcomingCaseArea{
        padding-bottom: 17%;
    }

    .upcomingCaseArea::after{
        width: 47%;
        height: 44%;
    }

    .upcomingCaseArea .title {
        margin-left: 15%;
        margin-bottom: 7%;
    }

    .classicCaseArea .title h2{
        padding-top: 1%;
    }

    .classicCaseArea .title h2::after{
        width: 220%;
    }

}