.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}