.block-index { height: calc(100vh - 80px); } .video-container { z-index: 2; position: absolute; left: 0; top: 0; bottom: 0; right: 0; /* background: url('../images/poster.png') no-repeat left center; background-size: cover; */ } .video-container video { object-fit: cover; width: 100%; height: 100%; } .main-index { z-index: 8; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 100%); } .main-index .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .main-index .title { font-size: 3.6rem; color: white; } .main-index .title span { display: block; line-height: 4.8rem; text-align: center; } .main-index .en { font-size: 2.5rem !important; font-weight: bold; } .main-index .en span { line-height: 2.5rem !important; } .main-index .position a { position: absolute; right: 1rem; bottom: 2rem; } .icon-triangle-arrow { position: absolute; left: 50%; bottom: 10rem; display: block; margin-left: -2rem; width: 4rem; height: 4rem; background: url('../images/logo-button.png') no-repeat center; background-size: contain; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(.9); } 70% { transform: scale(1); box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0); } 100% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @media (max-width: 767.98px) { .header-container h2 { display: none; } .block-index { height: calc(100vh - 65px); } .block-index .container h2 { font-size: 2.8rem; line-height: 3.2rem; } .icon-triangle-arrow { /* width: 1.5rem; height: 1.5rem; */ bottom: 5rem; } }