html,body{height:100vh;overflow:hidden;}
.banner {
    height: 100vh;
    background: url('../../../../Images/tasteing/index/club.jpg')no-repeat center;
    background-size: cover;
    position: relative;
}
.banner-cover {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: url('../../../../Images/tasteing/index/club-cover.jpg')no-repeat center;
    background-size: cover;
    opacity: 0;
}
.tasteing {
    position: absolute;
    top: 70%;
    width: 100%;
}
.tasteing ul{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
.tasteing .item{
    background:#fff;
    text-align:center;
    padding:3rem 0 5rem;
    width:25%;
    position:relative;
    cursor:pointer;
}
.tasteing h2{font-size:1.5rem;margin-bottom:1rem;font-weight:bold;}
.knowMore {
    margin-top: 1rem;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -2.5rem;
    z-index:50;
}
.knowMore>span{vertical-align:middle;color:#e7bd71;font-weight:bold;display:inline-block}
.tasteing .item:hover .arrow-line{width:1.5rem}
.arrow-line {
    height: 2px;
    width: 0;
    background: #e7bd71;
    margin-right: -6px;
    margin-left: 9px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    width: 10px;
    height: 10px;
    margin-left: -10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.item-cover {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    background: red;
    z-index: 10;
    line-height: 16;
    opacity:0;
    transition:opacity .25s linear;
}
.item-cover img{    
    max-height: 50%;
    margin-top: 5%;
    max-width: 70%;
}
.tasteing .item:hover .item-cover{opacity:1}
.tasteing .item a{color:#000}