@import url("https://use.typekit.net/vgc2fvf.css");

  body {

      color: var(--Bg);
      background: var(--Text);
      --Main: #ff6234;
      --SP2: "transducer-extended", 'Noto Sans TC', sans-serif;
      --Glass: rgba(255, 98, 52, .1);
  }

  .bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -3;
  }

  .hero {
      height: 100vh;
      position: relative;
  }

  section {
      width: 90%;
      padding: 100px 0;
      line-height: 1em;
  }

  h1 {
      font-size: 6vw;
      font-family: var(--SP);
      line-height: 1em;
      font-weight: normal;
      text-transform: uppercase;
  }

  /*Section1*/
  .heroImg {
      width: 65%;
      position: absolute;
      top: 5%;
      right: -10%;
      z-index: 1;
      animation: rotate 5s linear infinite;
  }

  .header {
      width: 100%;
      height: 60px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 5;
      background: var(--Glass);
      border: 1px solid rgba(255, 98, 52, 0.1);
      backdrop-filter: blur(5px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      font-weight: bold;
  }


  .heroImg04 {
      width: 8%;
      position: absolute;
      top: 52%;
      left: 45%;
  }

  .heroTitle01 {
      font-size: 9vw;
      line-height: 1.2em;
      font-weight: 900;
      position: absolute;
      top: 15%;
      left: -5%;
  }

  .heroTitle02 {
      font-size: 9vw;
      line-height: 1.2em;
      font-weight: 900;
      position: absolute;
      bottom: 10%;
      right: -5%;
  }

  .heroTitle01 div,
  .heroTitle02 div {
      position: relative;
  }

  .heroTitle01 div::before {
      content: '';
      width: 105%;
      height: 35%;
      background: var(--Glass);
      backdrop-filter: blur(10px);
      position: absolute;
      top: 25%;
      left: -5%;
      z-index: -1;
  }

  .heroTitle01 div::after {
      content: '';
      width: 100%;
      height: 40%;
      background: var(--Glass);
      backdrop-filter: blur(10px);
      position: absolute;
      top: 60%;
      left: 12%;
      z-index: -1;
  }

  .heroTitle02 div::before {
      content: '';
      width: 110%;
      height: 80%;
      background: var(--Glass);
      backdrop-filter: blur(10px);
      position: absolute;
      top: 25%;
      left: -5%;
      z-index: -1;
  }

  /*Section3*/
  .section3 {
     /* mix-blend-mode: soft-light; */
  }

  .section3 {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .section6 {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .section3Logo {
      width: 45%;
  }

  .section3Logo img {
      width: 100%;
  }

  .section6Logo {
      width: 50%;
      animation: rotate 5s linear infinite;
  }

  .address {
      font-size: 16px;
      font-weight: bold;
      background: var(--Bg);
      color: var(--Text);
      margin: 20px 0;
      padding: 10px;
  }

  @keyframes rotate {
      0% {
          transform: rotate(0deg);
      }

      25% {
          transform: rotate(10deg);
      }

      75% {
          transform: rotate(-10deg);
      }

      100% {
          transform: rotate(0deg);
      }
  }

  /*Section4*/
  .section4 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 100px;
      font-size: 20px;
      line-height: 1.8em;
      font-weight: 500;
      text-align: center;
  }

  .section7 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      gap: 50px;
      font-size: 16px;
      line-height: 1.8em;
      font-weight: 500;
  }

  .section4 h2,
  .section7 h2 {
      font-family: var(--SP2);
      font-size: 3vw;
      font-weight: 900;
      text-transform: uppercase;
  }

  .section7 h3 {
      font-size: 1.8em;
  }

  .section4 h2 {
      width: 150%;
      text-align: center;
      background: var(--Glass);
      color: var(--Main);
      backdrop-filter: blur(10px);
      display: block;
      padding: 15px 0;
      transform: rotate(-5deg);
      white-space: nowrap;
  }

  .icons {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 50px;
  }

  .icons img {
      width: calc(30% - 50px);
  }

  /*Section5*/
  .section5 {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 50px;

  }

  .section5Content h2 {
      font-size: 2em;
      font-weight: 900;
  }

  .section5Content {
      width: calc(50% - 25px);
      padding: 30px;
      backdrop-filter: blur(10px);
      border-radius: 10px;
      background: var(--Glass);
      border: 1px solid rgba(255, 98, 52, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      text-align: center;
  }

  .section5Content div {
      display: block;
      background: var(--Glass);
      padding: 10px 30px;
      border-radius: 40px;
      font-weight: bold;
      position: relative;
      line-height: 1.5em;

  }

  .section5Content div::before {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 8px 0 8px;
      border-color: var(--Glass) transparent transparent transparent;
      position: absolute;
      right: 17px;
      bottom: -12px;
      z-index: 1;
  }

  .section5Content p {
      display: block;
      padding: 10px 30px;
      border-radius: 40px;
      border: 1px solid var(--Bg);
      font-weight: bold;
      position: relative;
  }

  .section5Content p:nth-child(odd) {
      transform: rotate(3deg);
  }

  .section5Content p:nth-child(even) {
      transform: rotate(-3deg);
  }

  .section5Content p .fa-circle-check {
      font-size: 30px;
      position: absolute;
      top: -20px;
      left: 5px;
      background: var(--Main);
      border-radius: 50%;
  }

  .section5Content .fa-circle-arrow-right {
      font-size: 40px;
  }

  .section5Logo {
      width: 60%;
      margin-top: 100px;
  }

  .logoTitle {
      width: 100%;
      text-align: center;
      margin: 50px 0 0 0;
      color: var(--Main);
  }


  .partnerImg {
      width: 40%;
  }

  .faq {
      padding: 100px 0;
      border-radius: 10px;
      display: flex;
      align-items: stretch;
      background: transparent;
      gap: 50px;
  }

  .faqSection {
      justify-content: flex-start;
  }

  .faqSection02 {
      backdrop-filter: blur(10px);
      background: var(--Glass);
      border: 1px solid rgba(255, 98, 52, 0.1);
  }

  .footerTop:hover {
      color: var(--Bg);
  }

  .list div {
      font-size: 18px;
      padding: 10px 20px;
      margin-bottom: 10px;
      border: 1px solid var(--Main);
      border-radius: 30px;
      color: var(--Main);
      line-height: 1.2em;
  }

  /*////RWD////*/
  @media screen and (max-width:1660px) {}

  @media screen and (max-width:1440px) {}

  @media screen and (max-width:1366px) {}

  @media screen and (max-width:1280px) {
      .heroTitle01 {
          top: 20%;
          left: 0;
      }

      .heroTitle02 {
          bottom: 15%;
          right: 0;
      }
  }

  @media screen and (max-width:1024px) {
      .heroTitle01 {
          left: 5%;
      }

      .heroTitle02 {
          bottom: 20%;
          right: 5%;
      }
  }

  @media (orientation:landscape) and (max-height:767px) {}

  @media (orientation:portrait) and (max-height:1180px) {
      .heroImg {
          width: 80%;
          top: 10%;
          right: -10%;
      }


      .heroImg04 {
          width: 15%;
          top: 62%;
          left: 45%;
      }

      h1 {
          font-size: 7vw;
      }


      .heroTitle01 {
          font-size: 13vw;
          top: 32%;
          left: 0;
      }

      .heroTitle02 {
          font-size: 13vw;
          bottom: 12%;
          right: 0;
      }

      .section3Logo {
          width: 80%;
      }

      .section5Content {
          width: 100%;
      }

      .section6Logo {
          width: 70%;
      }


      .section7 h2 {
          font-size: 2.2em;
          width: 100%;
      }

      .section3 {
          gap: 50px;
          flex-direction: column;
      }



      .icons {
          width: 100%;
          text-align: center;
      }

      .section4 h2 {
          font-size: 5vw;
      }

      .partnerImg {
          width: 70%;
      }

  }

  @media (orientation:portrait) and (max-height:1024px) {}

  @media screen and (max-width:480px) {
      h1 {
          font-size: 12vw;
      }

      section {
          padding: 50px 0;
      }

      .header {
          font-size: 12px;
      }

      .heroTitle01 {
          font-size: 16vw;
          top: 32%;
          left: 0;
      }

      .heroTitle02 {
          font-size: 14vw;
          bottom: 15%;
          right: 0;
      }

      .section3 {
          flex-direction: column-reverse;
      }

      .section3Logo {
          width: 100%;
      }

      .section4 {

          font-size: 16px;
      }

      .section4 h2 {
          font-size: 30px;
      }

      .section7 {
          font-size: 12px;
      }

      .section7 h2 {
          font-size: 2.5em;
          line-height: 1.5em;
      }

      .icons {
          gap: 30px;
      }

      .icons img {
          width: calc(30% - 30px);
      }

      .section5 h1 {
          line-height: 1.5em;
      }

      .section5 h1 i {
          display: none;
      }

      .partnerImg {
          width: 100%;
      }
  }

  /*Iphone XR 414*896 */
  @media (orientation: portrait) and (max-height:896px) {}

  /*Iphone 12Pro 390*844 */
  @media (orientation: portrait) and (max-height:844px) {}

  @media (orientation: portrait) and (max-width:390px) {}

  /*Iphone 10 375*812 */
  @media (orientation: portrait) and (max-height:812px) {}

  @media (orientation: portrait) and (max-width:375px) {}

  /*Iphone 8Plus 414*736 */
  @media (orientation: portrait) and (max-height:736px) {}

  /*Iphone 8 375*667 */
  @media (orientation: portrait) and (max-height:667px) {}

  @media screen and (max-width:360px) {}

  @media screen and (max-width:320px) {}