#banner-img{
	height: 600px;width: 100%;	position: relative;
}
#banner-img ul li{
   
    list-style: none;
    position: relative;
    z-index: -1;
	height: 160px;
    filter: brightness(40%);
	margin: 0;
	padding: 0;

}
/*.img1{
	display: block;float: left;height: 160px;width: 110px;
}*/
.left{
	transition: all 300ms linear
}
.right{
	transition: all 300ms linear;
}
#show{
	height: 600px;width:100%;
     z-index: 2;
	position: absolute;
	bottom: 0;

	text-align: center;
	
}
#show h3{
     color:white;
	padding-top: 30px;
	}
#introduce{
	position: relative;
	height: 150px;
	width: 820px;
	margin: 0 auto;
	text-align: center;
	display: block;
	overflow: hidden;
	}
.intext.textative{
	color:white;
	
	height: 150px;
	width: 100%;
  	opacity: 1;
	transform-origin: bottom;

}
.intext{
	position: absolute;
	opacity: 0;
	color:white;
	
	height: 150px;
	width: 100%;
	transform-origin: top;
}
/*.intext.bottomative{
	position: absolute;
	opacity: 0;
	color:white;
	font-size: 20px;
	height: 150px;
	width: 100%;
	transform-origin: top;	
	top:-100px
}*/
#show p{
     color:white;
	font-size: 20px;
	}
#banner-show{
	position: absolute;
	bottom:0px;
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
}
#fantastic{
	position: relative;
	width: 100%;
	height: 100%;
}
#fantastic img{
	display: block;
    max-height: 100%;
	padding: 0;
	margin: 0;
    border-radius: 8px;
    position: absolute;
    bottom: 0px;
    
}
#fantastic img:hover{
	
    filter: brightness(100%) !important;
    transform: perspective(600px) rotateY(0deg) !important;
}