.imageList{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.imageList > li{padding:0;margin:0;flex:0 0 50%;}
.imgBox-wrap{display:grid;grid-template-columns:repeat(2,1fr);position:relative;}
    .imgBox-wrap::before{
        content:"\f105";
        font-family:'FontAwesome';
        font-size:30px;
        color:#fff;
        display:flex;align-items:center;justify-content:center;
        width:60px;height:60px;border-radius:100%;
        position:absolute;left:50%;top:50%;
        transform:translate(-50%, -50%);background-color:#48c8d8;
        z-index:2;
    }
.imgBox-wrap > div {position:relative;}
.imgBox-wrap > div::after {content:'';display:block;text-align:center;font-size:20px;padding:12px 0;}
.imgBox-wrap > div.img_1::after {content:'Before';background-color:#f0f0f0;}
.imgBox-wrap > div.img_2::after {content:'After';background-color:#48c8d8;color:#fff;}
.imgBox-wrap > div.img_2::before {content:'';position:absolute;width:100%;height:100%;left:0;top:0;border:solid 3px #48c8d8;}
.imageList .imgBox{background-repeat:no-repeat;background-size:cover;background-position:50% 50%;}
.imageList .imgBox.blank{background-size:contain;background-size:50%;}
.imageList .imgBox > img{width:100%;height:auto;opacity:0;}
.imageList.view{grid-template-columns:repeat(1,1fr);}
.modal .modal-header .close{background-color:#fff;}
@media(max-width:767px){
    .imageList{grid-template-columns:repeat(1,1fr);}
    .imgBox-wrap::before{width:40px;height:40px;font-size:20px;}
    #bo_cate .nav-tabs.nav-justified{flex-wrap:wrap;white-space:nowrap;border:none;}
    #bo_cate .nav-tabs.nav-justified .nav-item{flex:0 0 33.3333%;max-width:33.3333%;margin:0;}
    #bo_cate .nav-tabs.nav-justified .nav-item .nav-link{border-radius:15px;border:solid 1px #ccc;margin:1px;}
    #bo_cate .nav-tabs.nav-justified .nav-item .nav-link:hover, #bo_cate .nav-tabs.nav-justified .nav-item .nav-link.active{border-color:rgb(237,32,36);}
}