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

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

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

.header .logo {
  width: 16.64062%;
  height: 0;
  padding-bottom: 12.10938%;
  top: 0.83333%;
  left: 42.42188%;
  background-size: 100%;
}

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

.header .slogan01 {
  width: 67.1875%;
  height: 0;
  padding-top: 30.3125%;
  top: 9.58333%;
  left: 15.9375%;
  background-size: 100%;
}

.header .slogan02 {
  width: 24.29688%;
  height: 0;
  padding-top: 16.40625%;
  top: 0.27778%;
  left: 15.3125%;
  background-size: 100%;
}

.header .slogan_table {
  width: 47.65625%;
  height: 0;
  padding-top: 20.3125%;
  top: 60.97222%;
  left: 26.5625%;
  background-size: 100%;
}

.nav .container {
  width: 100%;
}

.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: 22%;
  height: 0;
  padding-bottom: 9.88806%;
}

.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: 39.55224%;
  background-size: 400% 100%;
}

/* ================= 內容 ================= */
.content .container {
  padding: 3%;
}

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

.content .container h4 {
  width: 140px;
  font-size: 1em;
}

.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%;
  }
  .item__box-img-350 {
    height: 200px;
  }
}