@media only screen and (max-width: 767px) { body { margin: 0; padding: 0; } .container { margin: 0; padding: 0; height: 180vh; width: 100vw; background-size: cover; background-repeat: no-repeat; background-position: center; } .top-floating { top: 0; left: 0; width: 100%; height: 50px; z-index: 99; position: fixed; line-height: 50px; text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; } .top-floating img { float: right; margin-right: 2vw; margin-top: 2vh; } .carousel { /* top: 55vh; */ top: 116vh; /* width: 100vw; */ height: 76px; display: flex; margin: 0 3vw; overflow: hidden; position: absolute; } .carousel img { width: 100%; height: auto; z-index: 1; margin-left: 10px; animation: carousel 15s infinite; } @keyframes carousel { 0% { transform: translateX(0%); animation-timing-function: linear; } 33% { transform: translateX(-100%); animation-timing-function: linear; } 66% { transform: translateX(-200%); animation-timing-function: linear; } 100% { transform: translateX(-280%); animation-timing-function: linear; } } } @media only screen and (min-width: 768px) { body { padding: 0; margin: 0 30vw; background-color: rgba(26, 1, 2, 1); } .container { margin: 0; padding: 0; height: 210vh; width: calc(30vw - 1px); background-size: cover; background-position: center; background-repeat: no-repeat; } .top-floating { top: 0; z-index: 99; height: 10vh; position: fixed; width: calc(30vw - 1px); background-size: contain; background-repeat: no-repeat; } .top-floating img { float: right; margin-top: 2.5vh; margin-right: 1vw; } .carousel { height: 140px; display: flex; overflow: hidden; position: absolute; top: calc(134vh - 1px); width: calc(30vw - 1px); } .carousel img { width: 100%; height: auto; margin-left: 10px; animation: carousel 15s infinite; } @keyframes carousel { 0% { transform: translateX(0%); animation-timing-function: linear; } 33% { transform: translateX(-90%); animation-timing-function: linear; } 66% { transform: translateX(-190%); animation-timing-function: linear; } 100% { transform: translateX(-280%); animation-timing-function: linear; } } }