#tboxes {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tbox {
    width:23%;
    margin:0.5rem;
    display: flex;
}
@media screen and (max-width: 960px) {
    .tbox {
        width: 31%
    }
}
@media screen and (max-width: 660px) {
    .tbox {
        width: 42%
    }
}
.tbox .vbox {
    padding:0.5rem;
    flex: 1;
}
.tbox .img {
    width:100%;
    height:auto;
    border:3px solid #000;
    cursor:pointer;
    overflow:hidden;
}
.tbox .img:hover {
    border-color:#999;
}
#gbox, #gbox #ibox, #gbox #overbox {
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    margin:auto;
    width:0px;
    height:0px;
    opacity: 0
}

#gbox {
    background-color:rgba(0,0,0,0.76);
    padding:2rem;
    overflow:hidden;
    z-index: 9000
}
#gbox #ibox {
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    transition-duration:1s;
}
#gbox #overbox {
    display: block
}


#gbox.show, #gbox.show #ibox, #gbox.show #overbox {
    width:100vw;
    height:100vh;
    opacity:1;
}

#close {
    position:absolute;
    top:1rem;
    right:2rem;
    width:2rem;
    height:2rem;
    color:#999;
    font-size:2rem;
    line-height:2rem;
    text-align:center;
    display:inline-block;
    cursor:pointer;
}
#close:hover {
    color:#fff;
}
#title {
    position:absolute;
    bottom:2rem;
    left:3rem;
    width:auto;
    height:2.5rem;
    color:#999;
    font-size:1.3rem;
    line-height:2.5rem;
    padding:0 1.5rem;
    display:inline-block;
    cursor:default;
}
#back {
    position:fixed;
    top:0.72rem;
    left:0.22rem;
    width:2.5rem;
    height:2.5rem;
    color:#666;
    background-color:#aaa;
    font-size:0;
    background-image:url(../gallery/i/back.png);
    background-size:cover;
    background-repeat:no-repeat;
    border: 0 solid;
    border-radius: 50%;
    display:inline-block;
    z-index: 9999
}
#back:hover {
    background-color:#fff;
}