/* application List ==============================================================*/
.application { width: 90%; margin:2% auto; display: flex;  flex-wrap: wrap; align-content: flex-start;    }
.application li{ width: 100%;  margin: 20px 0px; align-content: flex-start;  }
.application li figure { position: relative;  overflow: hidden; width:100%;  align-content: flex-start;  text-align: center; cursor: pointer;}
.application li figure img { position: relative; display: block;  height:auto;  width: 100%;  padding:0px;  z-index: 0;  transition: opacity 0.35s, }
.application li  h3{ padding:10px; min-height:60px;  font-size:1rem;  font-weight: 700; color: #000; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.application li figure:hover img{ filter: grayscale(80%) blur(1px);  }
 
/* Products List ==============================================================*/
.application-list { width:100%;  margin:2% auto; display: flex; flex-wrap: wrap; flex-direction: row;}
.application-list li{ width: calc(100%/2 - 30px); margin: 1%; display: flex; flex-wrap: wrap; align-content: flex-start; flex-direction: row; }
.application-list li:nth-child(2n){ margin-right:0; }
.application-list li figure { position: relative;  overflow: hidden; width:50%;justify-content: center; align-items: center;}
.application-list li figure img { position: relative; display: block;  height:auto;  width: 100%; padding: 10px; opacity: 1;  z-index: 0;   transition: opacity 0.35s, transform 0.35s; transform: translate3d(0px,0,0);}
.application-list li figcaption{  width:50%; margin-top: -40px;  position: relative; z-index: 99; display: flex; flex-wrap: wrap;  align-content: center;  }
.application-list li figcaption h3{width: 100%; margin-top: 32px; padding:10px; word-spacing: -0.15em;  font-size: 1rem;  font-weight: 700; color: #000;    }

/* For some effects it will show as a button */
.application-list li figure:hover img{ filter: grayscale(50%); transform: scale(1.05, 1.05); transition: all 0.5s ease 0s; }

.btn-more { width:80%; padding:10px; margin:8px 0px; font-weight: 400; text-align: center; color: #0070c9; border: solid 1px #0070c9; transition: all 0.5s ease 0s;}
a.btn-more:hover { color: #fff!important;  background: #0070c9;   box-shadow: 0px 1px 6px rgba(0,0,0,.5); 	transition: all 0.2s ease 0s;}
.btn-more::after { content: "";  position: absolute; width:60px; height:24px; vertical-align: middle; display: block; right:12%;  top:30%; bottom: 0;  margin: auto; background: url(../images/icon/btn-more.svg) no-repeat right top;	transition: all 0.2s ease 0s;}
.btn-more:hover::after { right:10%;  transition: all 0.2s ease 0s;}