#banner , #banner .item { overflow: hidden; position: relative; background: #fff; z-index: 100; }
#banner >div * ,#banner {
	webkit-transition:  unset;
    -moz-transition:  unset;
    -ms-transition:  unset;
    -o-transition: unset;
    transition: unset;


}
#banner{
    margin-top: 90px;
}
#banner .item a {position: absolute;width: 100%;height: 100%;/* background: rgb(31 31 31 / .3); */top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;width: 100%;top: 30vh;left: 0;z-index: 3;display: none;}
#banner .info >* { -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; }
#banner .info h3 { display: block; line-height: 110%; text-align: center; font-size: 80px; font-weight: 700; color: #fff; -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; }
#banner .info p { margin-top: 30px; text-align: center; line-height: 160%; font-weight: 100; font-size: 25px; color: #fff; -webkit-transform: translateY(30px); transform: translateY(30px); transition-delay: .5s; opacity: 0; }
#banner .img {width: 100vw;/* height: 100vh; */height: calc(100vh - 90px);background: no-repeat 50% / cover;}

#banner .slick-active .img { -webkit-transform: scale(1); transform: scale(1); animation: banerBg 6s infinite linear; -webkit-animation: banerBg 6s infinite linear; }
#banner .slick-active .info >* { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

@media screen and (max-width: 1380px){
	#banner .img{
    background-position: 40% 50%;
    background-size: cover;
}
}
@media screen and (max-width: 768px){
	#banner .info h3 { font-size: 50px; }
	#banner .info p { font-size: 20px; }
	#banner .img{
    height: 468px;
    background-position: 50% 50%;
    }
}
@media screen and (max-width: 488px){
	#banner .img{
    height: 395px;
    background-position: 50% 50%;
    }
    #banner{
    margin-top: 65px;
}
}