html {
    scroll-behavior: smooth;
  }
.cta-button {
    border-radius: 2em;
    background: #000000;
    color: #FFFFFF;;
    border-color: #000000;
    font-family: poppins;
    font-size: 21px;
    font-weight: 500;
    padding: 0.4em 1.5em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 2em;
    border: 0;
    margin-top: 20px;
  }
  .cta-button:hover{
    background: #202020;
    transition-duration: 0.5s;
    color: #FFFFFF  ;
}
  .cta-button:focus{
  color: #FFFFFF  ;
}
  .arrow-icon {
    display: inline-block;
    animation: animate__pulse 1.2s ease-in-out infinite;
    animation-delay: 0s;
    font-size: 1.2em;
  }
  .kv-title{
    font-family: 'Poppins';
  }
  /* 動畫定義 */
  @keyframes animate__pulse {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, -10%, 0);
      transform: translate3d(0, -6%, 0);
      visibility: visible;
    }
    50% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0%, 0);
      transform: translate3d(0, 0%, 0);
      visibility: visible;
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, -10%, 0);
      transform: translate3d(0, -6%, 0);
      visibility: visible;
    }
  }
@media screen and (min-width: 601px) and (max-width: 800px){
    .kv-title{
      font-size: 120%;
      text-align: center;
      display: flex;
    }
    .kv-subtitle{
      font-size: 18px;
      text-align: center;
      display: inline-flex;
    }
    .kv-period{
      font-size: 18px;
      text-align: center;
    }
    .cta-button{
      width: 100%;
      text-align: center;
      display: inline-block;
    }
    .arrow-icon {
      padding-left: 0.75em;
  }
}
@media screen and (min-width: 500px) and (max-width: 600px){
    .kv-title{
        font-size: 120%;
        text-align: center;
        display: inline-flex;
    }
    .kv-subtitle{
      font-size: 18px;
      text-align: center;
      display: inline-flex;
    }
    .kv-period{
      font-size: 18px;
      text-align: center;
    }
    .cta-button{
      width: 100%;
      text-align: center;
      display: inline-block;
    }
    .arrow-icon {
      padding-left: 0.75em;
  }  
}
@media screen and (min-width: 801px) and (max-width: 1219px){
}
@media screen and (min-width: 900px) and (max-width: 1219px){
}
@media screen and (min-width: 801px) and (max-width: 999px){
}
@media screen and (min-width: 1000px) and (max-width: 1219px){
}