.banner-area {
    height: 880rem;
    background-image: url('../img/case/banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;
}
.banner-area .banner-content {
    padding-top: 300rem;
}
.banner-area .banner-content img {
    width: 513rem;
    height: 288rem;
    display: block;
}
.banner-area .banner-content .apply-btn {
    margin-top: 106rem;
    width: 146rem;
    height: 54rem;
    line-height: 54rem;
    text-align: center;
    border-radius: 4rem;
    background: #ffffff;
    font-size: 24rem;
    color: #000;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}
.banner-area .banner-content .apply-btn:hover {
    transform: scale(1.1);
}
@media (max-width: 767px) {
    .banner-area {
        height: 308rem;
        background-image: url('../img/case/m_banner.png');
    }
    .banner-area .banner-content {
        padding-top: 46rem;
        padding-left: 40rem;
    }
    .banner-area .banner-content img {
        width: 256rem;
        height: 144rem;
    }
    .banner-area .banner-content .apply-btn {
        margin-top: 30rem;
        width: 110rem;
        height: 40rem;
        line-height: 40rem;
        font-size: 20rem;
    }
    .banner-area .banner-content .apply-btn:hover {
        transform: none;
    }
}
.case-cell {
    padding-top: 80rem;
    display: none;
    padding-bottom: 80rem;
}
.case-cell .title {
    font-size: 40rem;
    line-height: 56rem;
    color: #000;
    text-align: center;
}
.case-cell .case-info {
    box-shadow: 0 0 17rem 0 rgba(0,0,0,0.1);
    border-radius: 24rem;
    margin-top: 80rem;
    height: 670rem;
    position: relative;
    overflow: hidden;
}
.case-cell .case-info:hover .overview-cell {
    display: none;
}
.case-cell .case-info:hover .detail-cell {
    display: block;
}
.case-cell .case-info .img-bg {
    width: 100%;
    height: 100%;
    display: block;
}
.case-cell .case-info .overview-cell {
    padding: 48rem;
    background: rgba(0,0,0,0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.case-cell .case-info .overview-cell .name {
    font-size: 32rem;
    font-weight: 600;
    line-height: 46rem;
    color: #ffffff;
}
.case-cell .case-info .overview-cell .name-en {
    padding-top: 24rem;
    font-size: 32rem;
    font-weight: 400;
    line-height: 44rem;
    color: #919191;
}
.detail-cell {
    padding: 24rem 48rem 48rem;
    background: rgba(0,0,0,0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
}
.detail-cell .sub-title {
    padding-top: 24rem;
    font-size: 24rem;
    font-weight: 600;
    line-height: 34rem;
    color: #ffffff;
}
.detail-cell .desc {
    font-size: 16rem;
    font-weight: 400;
    line-height: 22rem;
    padding-top: 24rem;
    color: #ffffff;
}
@media (max-width: 767px) {
    .case-cell {
        padding-top: 40rem;
        padding-bottom: 40rem;
    }
    .case-cell .title {
        font-size: 32rem;
        line-height: 46rem;
    }
    .case-cell .case-info {
        margin: 80rem auto 0;
        width: 702rem;
        height: 336rem;
    }
    .case-cell .case-info .overview-cell {
        padding: 24rem;
        box-sizing: border-box;
    }
    .case-cell .case-info .overview-cell .name {
        font-size: 26rem;
        line-height: 36rem;
    }
    .case-cell .case-info .overview-cell .name-en {
        padding-top: 0;
        font-size: 18rem;
        line-height: 26rem;
    }
    .detail-cell {
        padding: 24rem;
        box-sizing: border-box;
    }
    .detail-cell .desc {
        padding-top: 8rem;
    }
}