@charset "utf-8";

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

.bx-grandi{font-family:'Source Sans Pro',Arial,sans-serif;position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:200px;max-width:300px;height:300px;width:100%;color:#fff;text-align:center;font-size:16px; border-radius:30px;}
.bx-grandi *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .35s ease;transition:all .35s ease}
.bx-grandi img{max-width:100%}
.bx-grandi:after,.bx-grandi:before,.bx-grandi figcaption:after,.bx-grandi figcaption:before{background:#0a0a0a;height:25%;position:absolute;content:'';opacity:0;-webkit-transition:all .35s steps(4);transition:all .35s steps(4);z-index:1;left:50%;right:50%}
.bx-grandi:before{top:0;-webkit-transition-delay:0;transition-delay:0}
.bx-grandi:after{top:25%;-webkit-transition-delay:.1s;transition-delay:.1s}
.bx-grandi figcaption:before{top:50%;-webkit-transition-delay:.2s;transition-delay:.2s;z-index:-1}
.bx-grandi figcaption:after{top:75%;-webkit-transition-delay:.3s;transition-delay:.3s;z-index:-1}
.bx-grandi figcaption{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;padding:30px}
.bx-grandi h2,.bx-grandi p,.bx-grandi .icons{margin:0;width:100%;opacity:0}
.bx-grandi h2{font-weight:900;text-transform:uppercase}
.bx-grandi p{margin-top:10px;font-size:11px;font-family:'돋움',Dotum,Verdana,applegothic;letter-spacing:-1px;}
.bx-grandi .icons{position:absolute;bottom:30px;left:0;width:100%}
.bx-grandi i{padding:0 10px;display:inline-block;font-size:24px;color:#fff;text-align:center;opacity:.8;text-decoration:none}
.bx-grandi i:hover{opacity:1}
.bx-grandi:hover:after,.bx-grandi.hover:after,.bx-grandi:hover:before,.bx-grandi.hover:before,.bx-grandi:hover figcaption:after,.bx-grandi.hover figcaption:after,.bx-grandi:hover figcaption:before,.bx-grandi.hover figcaption:before{left:0;right:0;opacity:.8}
.bx-grandi:hover figcaption h2,.bx-grandi.hover figcaption h2,.bx-grandi:hover figcaption p,.bx-grandi.hover figcaption p,.bx-grandi:hover figcaption .icons,.bx-grandi.hover figcaption .icons{-webkit-transition-delay:.25s;transition-delay:.25s}
.bx-grandi:hover figcaption h2,.bx-grandi.hover figcaption h2,.bx-grandi:hover figcaption .icons,.bx-grandi.hover figcaption .icons{opacity:1}
.bx-grandi:hover figcaption p,.bx-grandi.hover figcaption p{opacity:.7}