html, body {
  padding: 0;
  margin: 0;
  // overflow: hidden;
  font-family: "Sen";
}

* {
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  //cursor: none;
  user-select: none;
  -webkit-user-drag: none;
}

#main {
  display: flex;
  overflow: hidden;   /* 限制動畫在 main 內 */
  position: relative;
  width: 100%;
  height: 100vh; 
  .part {
    flex: 1;
    position: relative; /* 讓 section 絕對定位相對於這裡 */
    overflow: hidden;
    .section {
      width: 100%;
      height: 100%;       /* 填滿 part */
      position: absolute;  /* 疊加在 part 內 */
      top: 0;
      left: 0;

      img {
        width: 100vw;
        height:  100vh;
        object-fit: cover;
        position: absolute;
        left: var(--x);
        pointer-events: none;
      }
    }
  }
}

.cursor {
  //width: var(--size);
  //height: var(--size);
  //border-radius: 50%;
  //background: white;
  //position: absolute;
  z-index: 1;
  //pointer-events: none;
  //mix-blend-mode: difference;

  // &-f {
  //   width: var(--size);
  //   height: var(--size);
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   background-image: url("data:image/svg+xml,%3Csvg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z' stroke='white'/%3E%3C/svg%3E%0A");
  //   background-size: cover;
  //   mix-blend-mode: difference;
  //   pointer-events: none;
  //   opacity: .5;
  // }
}

.buttons {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;

  button {
    border: none;
    background-size: contain;
    background: url("data:image/svg+xml,%3Csvg width='10' height='29' viewBox='0 0 10 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0V27L1 17.4857' stroke='white' stroke-width='2' /%3E%3C/svg%3E%0A") no-repeat;
    background-position: center;
    width: 10px;
    height: 30px;
    display: block;
    margin: 20px 0;
    padding: 0 15px;
    transition-duration: .6s;

    &.next {
      transform: scaleY(-1);
    }

    &.prev:active {
      transform: translateY(8px);
    }

    &.next:active {
      transform: scaleY(-1) translateY(8px);
    }
  }
}

.banner-box{
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    display: flex;
    justify-content: flex-start;
    // padding-left: clamp(1rem, 8vw, 10%);
      &::before{
      content: "";
      position: relative;
      left: 0;
      bottom: 0;
      // top: 50%;
      // transform: translateY(-50%);
      width: 30%;
      background-image: url(../images/b1.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      padding: 4.5% 0px;
      //padding-bottom: 9%;
      // padding: 32px 56px 15px 32px;
      // border-radius:0px 30px 0px 0px;
      z-index: 2;
    }
}


.banner-title {
  position: absolute;  
  inset-inline: 0;
  display: flex;
  justify-content: flex-start;
  padding-left: clamp(1rem, 5vw, 20%);
  z-index: 2;
  color: black;
  font-size: 2em;
  top: 10%;
}


.content {
  width: 90%;
  position: absolute;
  bottom: 20px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
  z-index: 99;
  font-size: .8em;

  p {
    margin: .5em auto;
  }

  kbd {
    width: 15px;
    height: 15px;
    border: 1px solid white;
    display: inline-block;
    border-radius: 3px;
    font-size: .9em;
    vertical-align: text-top;
  }

  a {
    color: rgba(227, 227, 227, 0.78);
    text-decoration: none;
    border-bottom: 1px solid currentColor;

    &:hover {
      padding-bottom: 1px;
    }
  }
}


@media(max-width:1024px){
  .banner-box{
      &::before{
      content: "";
      position: relative;
      left: 0;
      bottom: 0;
      width: 60%;
      background-image: url(../images/b1.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      padding: 9% 0px;
      z-index: 2;
    }
  }
  .banner-title {
    padding-left: clamp(1rem, 11vw, 20%);
    top: 10%;
  }  
}

@media(max-width:767px){
  .banner-box{
      &::before{
      content: "";
      position: relative;
      left: 0;
      bottom: 0;
      width: 85%;
      background-image: url(../images/mobile-b.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      padding: 15% 0px;
      z-index: 2;
    }
  }
  .banner-title {
    padding-left: clamp(1rem, 18vw, 20%);
    top: 10%;
    font-size: 1.5rem;
  }
}