.gallery, .videoList{
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
}

.gallery li, .videoList li{
	flex:0 0 32%;
	margin: 0 2% 2% 0;
	position: relative;
}

.gallery li:nth-child(3n),
.videoList li:nth-child(3n) {
	margin-right: 0;
}

.recThumb {
	width: 100%;
	height: 0;
	padding-bottom: 66%;
}

.gallery li div.hoverDesc {
	color: rgba(255, 255, 255, 0);
	background-color: rgba(0, 0, 0, 1);
	background-image: url('../images/iconEnlarge.png');
	background-repeat: no-repeat;
	background-size: 25% auto;
	background-position: center center;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	transition: all 0.3s ease-out;
	width: 100%;
	height: 0;
	padding-bottom: 66%;
}

.gallery li:hover div.hoverDesc {
	color: rgba(255, 255, 255, 1);
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;
  }
  
  
.videoList li div.hoverDesc {
	  color: rgba(255, 255, 255, 0);
	  background-color: rgba(0, 0, 0, 0);
	  background-image: url('../images/youtubeBlack.svg');
	  background-repeat: no-repeat;
	  background-size: 25% auto;
	  background-position: center center;
	  opacity: 0.7;
	  position: absolute;
	  left: 0;
	  top: 0;
	  overflow: hidden;
	  transition: all 0.3s ease-out;
	  width: 100%;
	  height: 0;
	  padding-bottom: 66%;
  }  
  
.videoList li:hover div.hoverDesc {
	  color: rgba(255, 255, 255, 1);
	  background-color: rgba(0, 0, 0, 0.5);
	  background-image: url('../images/youtube.svg');
	  opacity: 1;
 }  

.gallery li a p {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #FFF;
	margin-bottom: 0;
}

/* for 手機裝置(螢幕尺寸<768px) */
@media screen and (max-width:767px){
   .gallery li, .videoList li{
	   flex:0 0 48%;
	   margin: 0 2% 2% 0;
	   position: relative;
   }
   
   .gallery li:nth-child(3n),
   .videoList li:nth-child(3n) {
	   margin-right: 2%;
   }
   
   .gallery li:nth-child(2n),
   .videoList li:nth-child(2n) {
	   margin-right: 0;
   }
}