.cnbgradient {position: relative;}
.cnbgradient:before {content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 30%; background: linear-gradient(0deg, rgba(16,16,16,1) 0%, rgba(16,16,16,1) 7%, rgba(16,16,16,0) 100%);}

.cnbmain {aspect-ratio: 21/9; overflow: hidden;}
.cnbmain video {width: 100%;}
.cnbmain-logo {position: absolute; top: 50%; left: 50%; width: 250px; transform: translate(-50%,-50%); transition: 0.3s all}
.cnbmain-play {opacity: .25; position: absolute; top: 50%; left: 50%; width: 125px; transform: translate(-50%,-50%); transition: 0.3s all}
.cnbmain-info {position: absolute; bottom: 100px; left: 0; right: 0; text-align: center;}

.cnbmain-click:hover .cnbmain-logo {opacity: 0; width: 200px; transition: 0.3s all;}
.cnbmain-click:hover .cnbmain-play {opacity: 1; width: 75px; transition: 0.3s all;}

.cnbfull-cover {width: 200px; margin: 0 auto; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden;}
.cnbfull-cover img {width: 100%;}
.cnbfull-row {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; grid-auto-flow: row dense;}
.cnbfull-info {position: relative; grid-column: span 3; text-align: center; padding-top: 50px;}
.cnbfull-info h1 {margin-bottom: 10px;}
.cnbfull-autor {font-size: 11pt;}
.cnbfull-player {font-size: 35pt; text-align: center; padding-top: 30px; width: 400px; max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; grid-auto-flow: row dense;}
.cnbfull-player-nav {transform: scale(0.8); opacity: .7;}
.cnbfull-btn {margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-flow: row dense; margin-top: 30px; width: 90px;}
.cnbfull-like {aspect-ratio: 1/1;}

.cnbfull-cart {background: rgba(255,255,255,.1); margin-top: 50px; padding-bottom: 50px;}
.cnbfull-cart-licenses {padding-top: 50px; font-size: 14pt; font-weight: bold;}

.cnbline-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.cnbline-content {
  display: inline-block;
}

.cnbline .cnbline-text {
  display: inline-block;
  padding-left: 0;
  animation: cnbline 15s linear infinite;
}

@keyframes cnbline {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 959px) {
    .cnbmain {aspect-ratio: 1/1;}
    .cnbmain video {width: auto; height: 100%;}
    .cnbmain-logo {width: 30%;}
    .cnbmain-play {width: 15%;}
    .cnbmain-info {left: 15%; right: 15%;}
    .cnbmain-click:hover .cnbmain-logo {width: 25%; transition: 0.3s all;}
    .cnbmain-click:hover .cnbmain-play {width: 10%; transition: 0.3s all;}
}