@charset 'utf-8';

.wr-gallery { margin: -15px;;}
.wr-gallery li { padding: 15px;}
.wr-gallery li a { display: block; position: relative; z-index: 2; color: #111;}
.wr-gallery li a .img-wrap { position: relative; border: 1px solid #fff; }
.wr-gallery li a .img-wrap:before,
.wr-gallery li a .img-wrap:after { opacity:0; content:''; display: block; position: absolute; z-index: 2; transition: 0.3s; }
.wr-gallery li a .img-wrap:before { left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);  }
.wr-gallery li a .img-wrap:after { content:'OVER VIEW'; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 130px; height: 35px; text-align: center; font-size: 14px; font-weight: 500; color: #fff; text-align: center; line-height: 35px; border-radius: 18px; background: #fbb61b; }
.wr-gallery li a .subject { position: relative; padding: 0 0 0 25px; margin: 20px 0 0; line-height: 1; transition: 0.1s; }
.wr-gallery li a .subject:before { content:''; display: block; position: absolute; left: 0; top: 0; width: 4px; height: 100%;   background: #fbb61b; transition: 0.1s; }

/*
.wr-gallery li a:hover .img-wrap:before  { opacity: 1;}
.wr-gallery li a:hover .img-wrap:after  { opacity: 1;  top: 50%;}
.wr-gallery li a:hover .subject:before { width: 8px; }
*/

@media(min-width:769px){
    .wr-gallery li a:hover .subject { padding: 0 0 0 29px }
}
@media(max-width:768px){
    .wr-gallery { margin: -10px;}
    .wr-gallery li { padding: 10px;}
    .wr-gallery li a .subject { padding: 0 0 0 15px; margin: 15px 0 5px; font-size: 15px; }
}
@media(max-width:576px){
    .wr-gallery { margin: -5px}
    .wr-gallery li { padding: 5px}
    .wr-gallery li a .subject { margin: 10px 0 10px; }
}
@media(max-width:480px){
    .wr-gallery { margin: -5px}
    .wr-gallery li { padding: 5px}
    .wr-gallery li a .subject  { padding: 0 }
    .wr-gallery li a .subject:before { width: 0;} 
}