body{
    background-image: url(../images/img/choose-bg.png);
    background-attachment: fixed;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}
.contentBox{
    padding: 10% 0;
    align-items: center;
    justify-content: center;
}
h3{
    padding-bottom: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.2rem;
}
h3::after{
    content: '';
    width: 30px;
    height: 1px;
    background: #000;
    position: absolute;
    bottom:0;
    left: 50%;;
    transform: translateX(-50%);
}
small{
    color: #595757;
    font-size: 0.7rem;
}
.itemBox{
    margin-top: 5%;
}
.item{
    border-radius: 30px;
    box-shadow: 0 0 10px #0000003e;
    padding: 15% 0 13% 0;
    background: #fff;
    display: block;
    color: #231815;
    transition: all 0.3s;
}
.item:hover{
    transform: scale(1.05);
    transition: all 0.3s;
    box-shadow: 0 0 0px;
}
.item::after{
    content: '';
    background-image: url(../images/icon/arrow-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 1.5rem;
    left: 1rem;
}
.item::before{
    content: 'CASE';
    font-weight: bold;
    position: absolute;
    top: 1.5rem;
    left: 3rem;
    font-size: 1rem;
}
.item .innerImg {
    padding-top: 28%;
}
.item .innerImg .image{
   width: 70%;
   left: 50%;
   transform: translateX(-50%);
   background-size: contain;
}
@media (max-width:991px) {
    body{
        background-image: url(../images/img/choose-bg-m.png);
        background-attachment:fixed;
        min-height: 100vh;
    }
    .contentBox{
        padding: 20% 0;
    }
    .itemBox{
        margin-top: 10%;
    }
    .item::after{
        width: 1.2rem;
        height: 1.2rem;
        top: 1rem;
    }
    .item::before{
        top: 0.9rem;
        left: 2.7rem;
        font-size: 0.9rem;
    }
    h3{
        font-size: 1.2rem;
    }
}