/*----------------------1440(筆電)----------------------*/

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

  .sidebar {
    width: 100px;
    height: 100px;
    font-size: 16px;
  }

  .kv-content {
    left: calc(50% - 550px);
    padding-top: 100px;
  }

  .kv-title1 {
    width: 460px;
    height: 68px;
    margin-bottom: 30px;
  }

  .kv-title2 {
    width: 406px;
    height: 85px;
    margin-bottom: 30px;
  }

  .kv-title3 {
    width: 408px;
    height: 18px;
    margin-bottom: 10px;
  }

  .btn-scroll {
    width: 453px;
    height: 17px;
    margin-bottom: 10px;
  }

  .kv-title3 {
    width: 453px;
    height: 17px;
  }


}

/*----------------------1280(筆電)----------------------*/

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

  .kv-content {
    left: calc(50% - 500px);
    padding-top: 70px;
  }

  .card1 {
    width: 260px;
    margin-right: 5px;
    margin-left: 5px;
  }

}


/*----------------------1024(平板)----------------------*/

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

  h1 {
    font-size: 30px;
    line-height: 1.5;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  p {
    font-size: 14px;
  }

  li,
  li a {
    font-size: 14px;
    line-height: 1.5;
  }

  .kv {
    background-image: url(../images/img-kv-pad.jpg);
    padding-bottom: 63.47%;
  }

  .kv-content {
    left: calc(50% - 400px);
    padding-top: 150px;
  }

  .kv-title1 {
    width: 345px;
    height: 51px;
    margin-bottom: 30px;
  }

  .kv-title2 {
    width: 304px;
    height: 64px;
    margin-bottom: 30px;
  }

  .btn-scroll {
    width: 362px;
    height: 13px;
    margin-bottom: 10px;
  }

  .kv-title3 {
    width: 362px;
    height: 13px;
  }

  .sec1, .sec2, .sec3 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .sec4 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .cards {
    justify-content: center;
  }

  .card1 {
    width: 240px;
    margin-right: 20px;
    margin-left: 20px;
  }

  .card-body {
    position: relative;
    padding: 40px 5px 0px 5px;
    height: 200px;
  }

  h3 span {
    font-size: 24px;
  }

  .line {
    width: 600px;
  }

.case {
  width: 131px;
  height: 222px;
  left: calc(50% + 300px);
  bottom: -40px;
}

.btn-ts {
  font-size: 18px;
}

.s3-cards {
  flex-direction: column;
}

.s3-card {
  margin-bottom: 30px;
}


}

/*----------------------820(平板)----------------------*/

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

  .kv-content {
    left: calc(50% - 320px);
    padding-top: 100px;
  }

  .case {
    left: calc(50% + 230px);
  }


}


/*----------------------576(手機)----------------------*/

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

  h1 {
    font-size: 26px;
  }

  .sidebar {
    width: 100%;
    height: 50px;
    border-radius: 0%;
    position: fixed;
    bottom: 0;
  }

  .kv {
    background-image: url(../images/img-kv-mb.jpg);
    padding-bottom: 139.53%;
  }

  .kv-content {
    margin: 0 auto;
    left: auto;
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kv-title1 {
    width: 288px;
    height: 42px;
    margin-bottom: 30px;
  }

  .kv-title2 {
    width: 254px;
    height: 53px;
    margin-bottom: 20px;
  }

  .btn-scroll {
    width: 321px;
    height: 13px;
  }

  .kv-title3 {
    width: 321px;
    height: 13px;
  }

  .kv .btn-pri {
    position: absolute;
    bottom: -320px;
    left: calc(50% - 180px);
  }

  .btn-pri {
    width: 180px;
    height: 60px;
    border-radius: 30px;
    margin-top: 20px;
  }

  .btn-pri span {
    width: 30px;
  }

  .btn-pri b {
    width: 5px;
    height: 5px;
  }

  .sec1, .sec2, .sec3, .sec4 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sec1 h1 br {
    display: inline;
  }

  .s2-box {
    padding: 40px;
  }

  .line {
    width: 350px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .case {
    width: 104px;
    height: 177px;
    left: calc(50% + 120px);
    bottom: -20px;
  }

  .copyright-box {
    margin-bottom: 50px;
  }

}


/*----------------------375(手機)----------------------*/

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

  .kv .btn-pri {
    bottom: -280px;
    left: calc(50% - 180px);
  }


}