﻿.banner {
    position: relative;
}
.page {
    width: 100%;
    height: 100vh;
}
.page .item{position:absolute;top:0;height:100%;width:100%;}
.item .bg {
    background-image: url('../../Images/brand/video/banner.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.content-wrap {
    color: #fff;
    position: absolute;
    top: 55%;
    left: 20%;
    z-index: 100;
}
.slide-content p{font-size:3rem;width:max-content;}
.slide-content {position:absolute;top:0;width: max-content;}
.desc {
     margin-top: 1rem;
    line-height: 2;
    font-size: 1.25rem;
    display:inline-block
}
.arrow-down {
    position: absolute;
    width: 2px;
    z-index: 10;
    left: 50%;
    height: 60px;
    border-radius: 10px;
    bottom: 0;
    background: rgba(255,255,255,.3);
    margin-left: -1px;
    overflow:hidden;
}
.down-line {
    display: inline-block;
    height: 60px;
    width: 2px;
    background: #fff;
    animation: arrow 1.5s ease-in-out infinite;
}
@keyframes arrow {
    0% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }
    to {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }
}
.video-wrap {
    padding: 10rem 10%;
    background: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.video-wrap .item{width:47.5%;padding:1.5rem;margin-bottom:2rem}
.video-wrap .video{position:relative;line-height:0;cursor:pointer;margin-bottom:1rem;height:90%}
.video-wrap .item:hover{background:#eee}
button.btn {
    width: 3.8em;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    margin-left: -1.9em;
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-top:-1.9em
}
.video-pause-btn{display:none;}
.cover {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
    z-index: 2;
}
.video-info {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.video-title{flex:1 1 0%}
.video-title img{width:1.5rem;margin-right:.25rem;vertical-align:text-bottom}
.video-title span{vertical-align:text-bottom;line-height:1}
.duration{color:#ccc}
.show-video{opacity:0}
.poster{position:absolute;height:100%;width:100%}
.video:hover .cover{opacity:0.3}
.show-video.active{opacity:1}