@charset "UTF-8";
/*容器基本框架*/
.wrapper {
  background-size: 150%;
  overflow: hidden;
}

/* ================= 版頭 ================= */
.header .container {
  width: 100%;
  height: 0;
  padding-bottom: 46.875%;
}

.header .logo {
  width: 12.96875%;
  height: 0;
  padding-bottom: 8.51562%;
  left: 74.0625%;
  top: 1.33333%;
}

.header .logo a {
  width: 100%;
  height: 0;
  padding-bottom: 65.66265%;
  background-size: 100%;
}

.header .slogan {
  width: 42.34375%;
  height: 0;
  padding-bottom: 13.82812%;
  position: absolute;
  top: 16.66667%;
  left: 28.51562%;
  background-size: 100%;
}

.header .slogan .sloganLight {
  width: 96.49446%;
  height: 0;
  padding-bottom: 28.04428%;
  top: 1.12994%;
  left: 0.369%;
  background-size: 100%;
}

.header .slogan .sloganMain {
  width: 85.79336%;
  height: 0;
  padding-bottom: 17.52768%;
  top: 16.94915%;
  left: 5.90406%;
  background-size: 100%;
}

.header .subTitle {
  width: 29.375%;
  height: 0;
  padding-bottom: 6.17188%;
  top: 46.66667%;
  left: 34.375%;
  background-size: 100%;
}

.header .role {
  width: 28.04688%;
  height: 0;
  padding-bottom: 66.64062%;
  top: 0%;
  left: 0.9375%;
  background-size: 100%;
}

.header .salesLocation {
  width: 34.29688%;
  height: 0;
  padding-bottom: 6.71875%;
  top: 63.33333%;
  left: 32.03125%;
  background-size: 100%;
}

.header .product {
  width: 22.73438%;
  height: 0;
  padding-bottom: 27.5%;
  top: 24.66667%;
  left: 68.51562%;
  background-size: 100%;
}

@media only screen and (max-width: 500px) {
  .wrapper {
    background-size: 187.5%;
    overflow: hidden;
  }
  .header .container {
    padding-bottom: 58.59375%;
  }
  .header .logo {
    width: 16.21094%;
    padding-bottom: 10.64453%;
    left: 80.07812%;
    top: 0.78125%;
  }
  .header .logo a {
    padding-bottom: 65.66265%;
  }
  .header .slogan {
    width: 52.92969%;
    padding-bottom: 17.28516%;
    top: 23.33333%;
    left: 23.14453%;
  }
  .header .slogan .sloganLight {
    width: 96.49446%;
    padding-bottom: 28.04428%;
    top: 1.12994%;
    left: 0.369%;
  }
  .header .slogan .sloganMain {
    width: 85.79336%;
    padding-bottom: 17.52768%;
    top: 16.94915%;
    left: 5.90406%;
  }
  .header .subTitle {
    width: 36.71875%;
    padding-bottom: 7.71484%;
    top: 51.66667%;
    left: 30.46875%;
  }
  .header .role {
    width: 35.05859%;
    padding-bottom: 83.30078%;
    top: 0%;
    left: -11.32812%;
  }
  .header .salesLocation {
    width: 42.87109%;
    padding-bottom: 8.39844%;
    top: 68.33333%;
    left: 27.53906%;
  }
  .header .product {
    width: 28.41797%;
    padding-bottom: 34.375%;
    top: 24.66667%;
    left: 73.14453%;
  }
}

.nav {
  width: 98%;
  margin: 0 auto;
}

.nav .container {
  width: 100%;
}

.nav .container .navBtn {
  width: 70%;
  max-width: 440px;
  margin: 0 auto;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.nav .container .navBtn ul li {
  width: 50%;
  height: 0;
  padding-bottom: 18.40909%;
}

.nav .container .navBtn ul li.navBtn1 a {
  background-position-x: 0% !important;
}

.nav .container .navBtn ul li.navBtn2 a {
  background-position-x: -100% !important;
}

.nav .container .navBtn ul li a {
  width: 100%;
  height: 0;
  padding-bottom: 36.81818%;
  background-size: 200%;
}

/* ================= 內容 ================= */
.content .container {
  width: 98%;
  padding: 0;
}

.content .container > h3 {
  padding: 0;
}