.f-common-0002-items{clear:both;}
.f-common-0002-item{position: relative;margin: 15px 0;}

.f-common-0002-img{display:block;height:330px;overflow:hidden;}
.f-common-0002-img img{min-width:100%;height:100%;margin:0px auto;transition:600ms;}
.f-common-0002-item:hover .f-common-0002-img img{transform:scale(1.1);}
.f-common-0002-img img{height:100%;width:100%;object-fit:cover;}
.f-common-0002-text{position: absolute;left: 0;right: 0;top: 0;bottom: 0;padding: 15px;text-align: center;	display: flex;flex-direction:column; justify-content: center;}
.f-common-0002-text:after{position: absolute;content:"";display: block;left: 15px;right: 15px;top: 15px;bottom: 15px;transition: all 0.36s ease-out 0s;-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;opacity: 0; -webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;}
.f-common-0002-item:hover .f-common-0002-text:after{animation-name: flipInY;opacity: 1;}
.f-common-0002-text h4{line-height: 160%;margin-bottom: 3px;position: relative;z-index: 2;top: 20px;transition:all 300ms ease-in-out 0s;opacity: 0;}
.f-common-0002-text h4:after{content:"";display: block;height: 1px;width: 80%;background: #ccc;margin: 10px auto 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.f-common-0002-item:hover .f-common-0002-text h4{opacity: 1;top: 0;}
.f-common-0002-text p{line-height: 160%;margin: 0;position: relative;z-index: 2;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:all 300ms ease-in-out 0s;top: 10px;opacity: 0;}
.f-common-0002-item:hover .f-common-0002-text p{top: 0;opacity: 1;}
.f-common-0002-text p:after{position: relative;top: -40px;width: 0;height: 0;content: "";display: block;margin: 10px auto;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;animation-delay: 0.2s;opacity: 0;border-top-width: 6px; border-top-style: solid; border-right: 4px solid transparent;border-left: 4px solid transparent;}
.f-common-0002-item:hover .f-common-0002-text p:after{top: 0;opacity: 1;}





@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
        transform: perspective(400px) rotate3d(0,1,0,-20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
        transform: perspective(400px) rotate3d(0,1,0,10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
        transform: perspective(400px) rotate3d(0,1,0,-5deg)
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}@keyframes flipInY {
     0% {
         -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
         transform: perspective(400px) rotate3d(0,1,0,90deg);
         -webkit-transition-timing-function: ease-in;
         transition-timing-function: ease-in;
         opacity: 0
     }
     40% {
         -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
         transform: perspective(400px) rotate3d(0,1,0,-20deg);
         -webkit-transition-timing-function: ease-in;
         transition-timing-function: ease-in
     }
     60% {
         -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
         transform: perspective(400px) rotate3d(0,1,0,10deg);
         opacity: 1
     }
     80% {
         -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
         transform: perspective(400px) rotate3d(0,1,0,-5deg)
     }
     100% {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }
 }.flipInY {
      -webkit-backface-visibility: visible!important;
      backface-visibility: visible!important;
      -webkit-animation-name: flipInY;
      animation-name: flipInY
  }