.container-trending {width: calc(100% - 140px);margin: auto;}
.trending-list {padding-right: 0;padding-left: 50px;opacity: 0;position: relative;animation: trending-show .2s forwards;animation-delay: 1s;height: 200px;transition: all .5s ease 0s;-webkit-transition: all .5s ease 0s;-moz-transition: all .5s ease 0s;}
.trending-loading {height: 215px;width: 100%;background: linear-gradient(110deg, #1A212D 8%, #1a212d96 18%, #1A212D 33%);border-radius: 5px;background-size: 200% 100%;animation: 1.5s shine linear infinite;}
.swiper-container {margin: 0 auto;position: relative;overflow: hidden;z-index: 1;}
.trending-navi {position: absolute;top: 0;left: 0;bottom: 0;width: 35px;}
.trending-navi>div {position: absolute;height: 48%;top: 0;left: 0;right: 0;background: rgba(255,255,255,.1);border-radius: 25px;text-align: center;cursor: pointer;outline: 0;box-shadow: none}
.trending-navi>div.navi-prev {bottom: 0;top: auto}
.trending-navi>div:hover {background: var(--atv-color1);color: #111}
.trending-navi>div>i {position: absolute;font-size: 14px;left: 50%;top: 50%;transform: translate(-50%,-50%)}
.trending-list .item {width: 100%;height: auto;padding-bottom: 115%;position: relative;display: inline-block;overflow: hidden}
.trending-list .item .number {position: absolute;left: 0;top: 0;bottom: 0;overflow: hidden;width: 30px;text-align: center;font-weight: 600;cursor: default}
.trending-list .item .number span {position: absolute;bottom: 0;font-size: 20px;line-height: 1em;text-align: center;color: var(--atv-color1);z-index: 9;left: 0;right: 0}
.trending-list .item .number .film-title {width: 100px;text-align: left;height: 30px;transform: rotate(-90deg);position: absolute;bottom: 90px;width: 150px;line-height: 30px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;left: -62px;font-size: 15px;font-weight: 500}
.trending-list .item .film-poster {display: inline-block;background: rgba(255,255,255,.1);position: absolute;width: auto;left: 30px;right: 0;top: 0;bottom: 0;padding-bottom: 0;height: auto;margin-bottom: 0}
.trending-list .item .film-poster img {width: 100%;border-radius: 5px;}
.postreviewavg-show-qtip {position: absolute;bottom: 0;z-index: 999;right: 0;left: 0;padding: 5px;display: flex;align-items: flex-end;justify-content: space-between;background: -moz-linear-gradient(270deg,rgba(18,22,31,0) 0%,var(--atv-bg-color4) 85%);background: -webkit-linear-gradient(270deg,rgba(18,22,31,0) 0%,var(--atv-bg-color4) 85%);background: -o-linear-gradient(270deg,rgba(18,22,31,0) 0%,var(--atv-bg-color4) 85%);background: -ms-linear-gradient(270deg,rgba(18,22,31,0) 0%,var(--atv-bg-color4) 85%);background: linear-gradient(180deg,rgba(18,22,31,0) 0%,var(--atv-bg-color4) 85%);}
.postreviewavg-show-qtip .show-qtip {color: #fff;font-size: 18px;}
@media screen and (max-width: 759px) {
.trending-navi {display: none}
.trending-list {padding: 0}
.trending-list .item {padding-bottom: 150%}
.trending-list .item .number {bottom: auto;top: 0;right: auto;width: 40px;left: 0;height: 30px;background: #fff;z-index: 9}
.trending-list .item .number span {font-size: 18px;line-height: 30px;transform: none;text-align: center;color: #111}
.trending-list .item .film-poster {left: 0;top: 0;bottom: 0}
}
@keyframes shine {to {background-position-x: -200%;}}
@keyframes trending-show {from {opacity: 0;height: 215px} to {opacity: 1;height: auto}}