[un-cloak] {
    display: none;
}

html {
    scroll-padding-top: 60px;
}

@media screen and (max-width: 768px) {
    html {
        scroll-padding-top: 40px;
    }
    
}

.page-container {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .smart-customer-wrapper {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
  }

  .swiper-button-next {
    right: 5% !important;
  }
  
  .swiper-button-prev:after {
    left: 380% !important;
  }
  
  @media screen and (max-width: 1024px) {
    .swiper-button-next {
      right: -10% !important;
    }
  
    .swiper-button-prev{
      left: -46% !important;
    }
  }

  /* 掠光動畫 */
@keyframes pictureShine {
    0% {
      transform: translateX(-150%) skewX(-20deg);
      opacity: 0;
    }
    30% {
      transform: translateX(500%) skewX(-20deg);
      opacity: 0.6;
    }
    40% {
      transform: translateX(510%) skewX(-20deg);
      opacity: 0;
    }
    100% {
      transform: translateX(510%) skewX(-20deg);
      opacity: 0;
    }
  }
  
  .picture-shine {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  
  .picture-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateX(-150%) skewX(-20deg);
    animation: pictureShine 3s ease-out infinite;
    pointer-events: none;
  }

  /* 打字效果 */
  @keyframes typing {
    0% { width: 0; }
    25% { width: 100%; }      /* 0~60% 是打字過程 */
    80% { width: 100%; }      /* 60%~80% 停在滿字 */
    100% { width: 0; }        /* 80%~100% 回退成 0 */
  }
  
  @keyframes blinkCaret {
    50% { border-color: transparent; }
  }
  
  .typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing 8s steps(20, end) infinite;
  }