@charset "utf-8";


  * { box-sizing: border-box; margin: 0; padding: 0; }

    .carousel-container {
      position: relative;
      width: 100%;
      max-width: 100%;
      height: 50vh;
      overflow: hidden;
      margin: 50px auto;
    }

    .carousel-slide {
      position: absolute;
      top: 15%;
      left: 0;
      display: flex;
      height: auto;
    }

    .carousel-slide img {
      width: 100vw;
      height: auto;
      /* height: auto; */
      flex-shrink: 0;
    }

    .caption {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: scale(0.8);
      background-color: transparent;
      color: #fff;
      padding: 10px 20px;
      font-size: 1.8rem;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
    }

    .caption.animate {
      animation: captionMove 2s forwards;
    }

    @keyframes captionMove {
      0% {
        left: 30%;
        transform: scale(0.6);
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      70% {
        left: 50%;
        transform: scale(1);
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }