@charset "utf-8";

.wrap-grandi {margin:10px 0}
.wrap-grandi:after {display:block;visibility:hidden;clear:both;content:""}

.bx-grandi{position:relative;float:left;overflow:hidden;margin:10px 1%;width:31.33%;background:#333;color:#fff;text-align:left}
.bx-grandi *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .6s ease;transition:all .6s ease}
/*.bx-grandi img{opacity:.8;height:100%;vertical-align:top;-webkit-transition:opacity .35s;transition:opacity .35s}
.bx-grandi figcaption{position:absolute;bottom:0;left:0;width:100%;height:100%}
.bx-grandi figcaption>div{height:50%;overflow:hidden;width:100%;position:relative}
.bx-grandi h2,.bx-grandi h3{margin:0;position:absolute;left:0;padding:0 30px;font-size:16px;}
.bx-grandi h2{font-weight:900;top:0}
.bx-grandi h3{font-size:1em;bottom:0;font-weight:500}
.bx-grandi h3:nth-of-type(2){opacity:0;-webkit-transform:translateY(150%);transform:translateY(150%)}
.bx-grandi a{left:0;right:0;top:0;bottom:0;position:absolute}
.bx-grandi:hover img,.bx-grandi.hover img{opacity:.3;-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.bx-grandi:hover figcaption h3:first-of-type,.bx-grandi.hover figcaption h3:first-of-type{-webkit-transform:translateY(150%);transform:translateY(150%);opacity:0}
.bx-grandi:hover figcaption h3:nth-of-type(2),.bx-grandi.hover figcaption h3:nth-of-type(2){opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}*/

.bx-grandi img {max-width: 100%;height: auto;}
.bx-grandi .gall_wrap {position:absolute;bottom:0;left:0;width:100%;height:100%;background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));box-sizing: border-box;}
.bx-grandi .gall_txt{position: absolute;bottom: 20px;left: 20px;color: #fff;}
.bx-grandi .gall_txt h3{font-size: 20px;color: #d4c8ab;}
.bx-grandi .gall_date{margin-bottom: 20px;color: #fff6cf;font-family: 'GmarketSansMedium';}
.bx-grandi .gall_date .datetime{margin-right: 15px;}

@media screen and (max-width:767px) {
    .bx-grandi{width:48%;}
    .bx-grandi .gall_txt h3{font-size: 16px;}
}

@media screen and (max-width:480px) {
    .bx-grandi .gall_txt{bottom: 12px;left: 12px;}
    .bx-grandi .gall_txt h3{font-size: 10px;}
    .bx-grandi .gall_date{font-size: 10px;margin-bottom: 10px;}
    .bx-grandi .gall_date .datetime{margin-right: 6px;}
}