.banner_wrapper{
    
    left: 50%;
    transform: translate(-50%, 100%); 
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
    animation: slideUp 1s ease forwards;
    animation-delay: 1s; /* delay before it slides up */
    z-index: 1000;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .banner_wrapper{
        width:960px;
        position: fixed;
    bottom: 0;
    }
  }
  @media (max-width: 1024px) {
    .banner_wrapper{
        width:100%;
        position: fixed;
    bottom: 67px;
    }
  }


.banner_wrapper.visible {
    bottom: 30px;
}
.close_banner{
    position: absolute;
    left: 10px;
    top: 8px;
    font-size: 21px;
    font-weight: bold;
    width: 40px;
    padding: 1px;
    border: solid 1px #ffffff82;
    text-align: center;
    color: #000;
    background: #ffffff5e;
    border-radius: 10px;
    cursor: pointer;
    z-index: 999999;

}

@keyframes slideUp {
    from {
      transform: translate(-50%, 100%);
    }
    to {
      transform: translate(-50%, 0);
    }
  }