.banner{position:relative;width:100%;max-width:600px;margin:auto;height:500px}.banner ul{list-style:none;margin:0;padding:0;height:100%}.banner li{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}.banner li.active{opacity:1;z-index:1}.banner li img{width:auto;height:100%;max-width:none;position:absolute;left:50%;top:50%;border-radius:20px;transform:translate(-50%,-50%)}.banner li .text{position:absolute;z-index:10;border-radius:10px;padding:20px 30px;top:60%;left:50%;width:300px;transform:translate(0,-50%);color:var(--color-pri);opacity:0;transition:opacity .6s ease .3s,transform .8s ease}.banner li .text span{position:absolute;top:-15px;left:-15px}.banner li.active .text{opacity:1;transform:translate(-10%,-50%)}.banner li.fade-out .text{opacity:0;transform:translate(-20%,-50%);transition:opacity .6s ease,transform .6s ease}@media screen and (max-width:768px){.banner li .text span{position:absolute;top:-30px;left:40px}.banner{margin-top:20px;max-width:600px;height:300px}.banner li .text{top:80%;width:300px;padding:5px 10px;transform:translate(-40%,-50%)}.banner li.active .text{transform:translate(-50%,-50%)}.banner li.fade-out .text{transform:translate(-60%,-50%)}}