.application .title { color:#fff;}
.application-list {  display: flex; flex-wrap: wrap; max-width:1000px; margin: 0 auto; padding: 30px 20px 50px 20px;}
.application-list li.flex-2 {  flex-grow: 0;  flex-shrink: 0;  flex-basis: 65%;  }
.application-list li.flex-2 img{width: 100%;  overflow: hidden; }
.application-list li{display: flex; flex: 0 0 32%; margin:5px; max-height: 300px;  justify-content: center; align-items: flex-start; position: relative; overflow: hidden;  color: #fff;text-align: center; box-shadow: 0 0 5px #555; transition: all 0.55s ease; background: #212121;}
.application-list li img{ width: 100%; height: auto; transition: all 0.55s ease;}
.application-list li:hover img{ opacity: 0.5;}
.application-list li .box-content{padding: 5px 10px 10px; position: absolute;bottom: 25px; right: 25px;}
.application-list li .box-content:before,.application-list li .box-content:after{content: ""; width: 767px; height: 2px;  position: absolute;  background: #fff; -webkit-transition: all 0.55s ease; transition: all 0.55s ease;}
.application-list li .box-content:before{  top: 0; left: 0; -webkit-transform: translateX(100%); transform: translateX(100%);}
.application-list li .box-content:after{  bottom: 0; right: 0; -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.application-list li .box-content-inner:before,.application-list li .box-content-inner:after{ content: "";  width: 2px;  height: 767px; position: absolute; background: #fff;  -webkit-transition: all 0.55s ease;  transition: all 0.55s ease;}
.application-list li .box-content-inner:before{  top: 0;  left: 0;  -webkit-transform: translateY(100%); transform: translateY(100%);}
.application-list li .box-content-inner:after{ bottom: 0; right: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%);}
.application-list li:hover .box-content:before,.application-list li:hover .box-content:after,.application-list li:hover .box-content-inner:before,.application-list li:hover .box-content-inner:after{  -webkit-transform: translate(0, 0); transform: translate(0, 0);}
.application-list li:hover .box-content:before,.application-list li:hover .box-content:after{ -webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
.application-list li h3{  font-size: 24px; font-weight: 400;  margin: 0; color: #fff;}
.application-list li .post{  display: block;padding: 5px 10px; font-size: 16px; font-weight: 700; color: #434343;  background: #fff;}
@media only screen and (max-width: 992px) {
  .application-list li{ flex: 0 0 48%;  padding: 0;  margin-bottom: 30px; }
  .application-list li.flex-2 {  flex-basis: 48%;  }
}
@media (max-width: 767px) {
  .application-list li{ flex: 0 0 100%;  padding: 0;  margin-bottom: 30px; }	
 .application-list li.flex-2 {  flex-basis: 100%;  }

}