@charset "UTF-8";
html, body {
  background-size: 150%;
}

.wrapper {
  background-size: 150%;
  overflow: hidden;
}

.header .container {
  width: 100%;
  height: 0;
  padding-bottom: 63.28125%;
}

.header .logo {
  width: 13.20312%;
  height: 0;
  padding-bottom: 8.51562%;
  top: 2.34568%;
  left: 1.5625%;
  background-size: 100%;
}

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

.header .slogan {
  width: 45.23438%;
  height: 0;
  padding-top: 16.40625%;
  top: 23.82716%;
  left: 8.67188%;
}

.header .slogan01 {
  width: 20.3125%;
  height: 0;
  padding-top: 36.32812%;
  top: 0%;
  left: 0.78125%;
  background-size: 100%;
}

.header .slogan01_2 {
  width: 80.07812%;
  height: 0;
  padding-top: 36.32812%;
  top: 0%;
  left: 20.3125%;
  background-size: 100%;
}

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

.nav .container .navBtn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /*@include ms-phone-width{
              @include flexboxSetting(space-around);
            }*/
}

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

.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.navBtn3 a {
  background-position-x: -200% !important;
}

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

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

/* ================= 內容 ================= */
.content {
  background-size: 150%;
}

.content .container {
  padding: 0px 2% 3% 2%;
}

.content .container h3 {
  margin-bottom: 4%;
}

.content .container ol,
.content .container ul {
  margin-left: 2em;
}

ul.tabBtnstyleB {
  margin-bottom: 1%;
}

ul.tabBtnstyleB li {
  width: 35%;
  height: 0;
  padding-bottom: 14%;
  background-size: 200% 100%;
}

ul.tabBtnstyleB li#tabBtnA:hover, ul.tabBtnstyleB li#tabBtnA.active {
  background-size: 200% 100%;
}

ul.tabBtnstyleB li#tabBtnB:hover, ul.tabBtnstyleB li#tabBtnB.active {
  background-size: 200% 100%;
}

@media screen and (max-width: 500px) {
  ul.tabBtnstyleB li {
    width: 70%;
    padding-bottom: 30%;
  }
}