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

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

.header {
  /*.logo{
    width: percentage($logowidth / $baseWidth);
    height: 0;
    padding-bottom: percentage($logoheight/ $baseWidth);
    top:percentage(70 / $baseHeight);
    left:percentage(785 / $baseWidth);
    background-size: 100%;
    a{
        width:100%;
        height: 0;
        padding-bottom: percentage($logoheight/ $logowidth);
    }
	}*/
}

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

.header .slogan {
  width: 46.5625%;
  height: 0;
  padding-top: 24.53125%;
  top: 31.66667%;
  left: 42.5%;
  background-size: 100%;
}

.header .slogan2 {
  width: 70.3125%;
  height: 0;
  padding-top: 16.64062%;
  top: 56.22222%;
  left: 29.45313%;
  background-size: 100%;
}

.header .card {
  width: 55.07812%;
  height: 0;
  padding-top: 25.3125%;
  top: 1.66667%;
  left: 38.90625%;
  background-size: 100%;
}

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

.content .container a.btn_note {
  width: 12.1875%;
  height: 0;
  padding-top: 9.0625%;
  top: 1.11111%;
  right: 1.95312%;
  background-size: 100%;
}

.content .container a.btn_note:hover {
  background-size: 100%;
}

.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%;
  }
}