@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500;700;900&display=swap");


html,body{
    font-family: 'Noto sans TC', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
    -webkit-user-drag: none;
    overflow-x: hidden;
    background-color: rgb(20, 20, 20);
    user-select: none;
}
.main {
    width: 100%;
    height: 100vh;
    background: url(../img/kv.jpg) center top no-repeat ;
    background-size: cover;
    position: relative;
}
.main .header{
    width: 100%;
    height: 90vh;
    position: relative;
    display: block;
}
.main .header .logobox{
  width: 100%;
  position: absolute;
  bottom: 2.2em;
}
.main .header .logobox #title{
  width: 48%;
  margin: 0 auto;
}
.main .header .logobox #title img{
  width: 100%;
}
.main .header .logobox #btn {
    width: 16%;
    margin: 0 auto;
    margin-top: -2em;
    position: relative;
    bottom: 0;
}
.main .header .logobox #btn img {
    width: 100%;
}
.main .footer {
    width: 100%;
    height: 12vh;
    background-color: rgb(20, 20, 20);
    font-family: Arial, Helvetica, sans-serif;
  }
  .main .footer #footercopy {
    font-size: 12px;
    color: #ffffff;
    margin: 0 auto;
    padding: 2.6em 0 4em 4em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.6em;
    width: 100%;
  }
  .main .footer #footercopy .con {
    display: flex;
    gap: 0.8em;
    width: 22%;
  }
  .main .footer #footercopy .con img {
    width: 40%;
    object-fit: contain;
  }
  .main .footer #footercopy .con-2 {
    width: 22%;
    position: relative;
    top: -1.6em;
  }
  .main .footer #footercopy .con-2-wrap {
    display: flex;
    gap: 1.6em;
    width: 100%;
  }
  .main .footer #footercopy .con-2 img {
    width: 40%;
    object-fit: contain;
  }
  .main .footer #footercopy .con-2-wrap img:nth-child(2) {
    position: relative;
    width: 34%;
  }
  .main .footer #footercopy .con-2 p {
    position: relative;
    top: -0.4em;
  }
  .main .footer p {
    line-height: 1.2;
    font-weight: 300;
    color: rgb(218, 218, 218);
  }
  .main .footer #footercopy .grade {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    position: relative;
    top: -0.3em;
  }
  .main .footer #footercopy .grade img {
    width: 8%;
  }
  .main .footer #footercopy .grade p {
    line-height: 1.3em;
  }



  @media screen and (min-width: 768px) and (max-width: 1024px) { 

    .main {
      width: 100%;
      height: 100vh;
      background: url(../img/kv.jpg) center top no-repeat ;
      background-size: cover;
      position: relative;
    }

    .main .header .logobox {
      bottom: 3em;
  }

    .main .header .logobox #title {
      width: 96%;
    }

    .main .header .logobox #btn {
      width: 30%;
    }

    .main .footer {
      height: auto;
    }

    .main .footer #footercopy {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      gap: 4em;
      padding: 6em 0 10em 0;
    }

    .main .footer #footercopy .con, .main .footer #footercopy .con-2, .main .footer #footercopy .grade {
      width: 80%;
      justify-content: center;
    }

    .main .footer #footercopy .con {
      flex-direction: column;
    }

    .main .footer #footercopy .con p, .main .footer #footercopy .con-2 p {
      text-align: center;
      line-height: 1.4;
    }

    .main .footer #footercopy .con img {
      width: 100%;
      height: 3em;
    }

    .main .footer #footercopy .con-2 {
      top: 0em;
    }

    .main .footer #footercopy .con-2-wrap {
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.2em;
    }

    .main .footer #footercopy .con-2 img {
      width: 100%;
    }

    .main .footer #footercopy .con-2-wrap img:nth-child(1) {
      height: 2.25em;
    }

    .main .footer #footercopy .con-2-wrap img:nth-child(2) {
      height: 7em;
      margin-bottom: 0.3em;
    }


  }



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

    .main {
      width: 100%;
      height: 100vh;
      background: url(../img/kv_mob.jpg) center top no-repeat ;
      background-size: cover;
      position: relative;
    }

    .main .header {
      height: 88vh;
    }

    .main .header .logobox {
      bottom: 2em;
    }

    .main .header .logobox #title {
      width: 100%;
    }

    .main .header .logobox #title img {
      transform: scale(1.25);
      padding-right: 1.2em;
    }

    .main .header .logobox #btn {
      width: 50%;
      margin-top: 0.6em;
    }

    .main .footer {
      height: auto;
    }

    .main .footer #footercopy {
      display: flex;
      flex-wrap: wrap;
      gap: 4em;
      padding: 6em 0 10em 0;
    }

    .main .footer #footercopy .con, .main .footer #footercopy .con-2, .main .footer #footercopy .grade {
      width: 90%;
      justify-content: center;
    }

    .main .footer #footercopy .con {
      flex-direction: column;
    }

    .main .footer #footercopy .con p, .main .footer #footercopy .con-2 p {
      text-align: center;
      line-height: 1.4;
    }

    .main .footer #footercopy .con img {
      width: 100%;
      height: 1.8em;
    }

    .main .footer #footercopy .con-2 {
      top: 0em;
    }

    .main .footer #footercopy .con-2-wrap {
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.2em;
    }

    .main .footer #footercopy .con-2 img {
      width: 100%;
    }

    .main .footer #footercopy .con-2-wrap img:nth-child(1) {
      height: 1.62em;
    }

    .main .footer #footercopy .con-2-wrap img:nth-child(2) {
      width: 50%;
      height: 6em;
      margin-bottom: 0.3em;
    }

    .main .footer #footercopy .grade {
      flex-wrap: wrap;
    }

    .main .footer #footercopy .grade img {
      width: 10%;
    }

    .main .footer #footercopy .con-2, .main .footer #footercopy p {
      font-size: 0.8em;
    }

  }