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

@media only screen and (max-width: 415px) {
  .wrapper {
    background-size: 165%;
  }
}

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

.header .slogan {
  width: 68.125%;
  height: 0;
  padding-bottom: 9.29688%;
  top: 45.68528%;
  left: 16.40625%;
  background-size: 100%;
}

.header .We5_Btn {
  width: 28.4375%;
  height: 0;
  padding-bottom: 12.1875%;
  top: 55.83756%;
  left: 21.875%;
  background-size: 100%;
}

.header .We5_Btn a {
  width: 100%;
  height: 0;
  padding-bottom: 42.85714%;
}

.header .FB_Btn {
  width: 28.4375%;
  height: 0;
  padding-bottom: 12.1875%;
  top: 55.83756%;
  left: 50%;
  background-size: 100%;
}

.header .FB_Btn a {
  width: 100%;
  height: 0;
  padding-bottom: 42.85714%;
}

.header .logo {
  width: 32.26562%;
  height: 0;
  padding-bottom: 16.25%;
  top: 28.93401%;
  left: 34.375%;
  background-size: 100%;
}

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

.header .download_area {
  width: 55.46875%;
  top: 71.06599%;
  left: 21.875%;
  background-size: 100%;
}

@media screen and (max-width: 988px) {
  .header .download_area {
    width: 70%;
    left: 14%;
  }
}

@media only screen and (max-width: 415px) {
  .header .download_area {
    width: 90%;
    left: 5%;
  }
  .header .download_area > ul li {
    margin-left: 10px;
  }
  .header .download_area > ul li img {
    width: 100%;
  }
}

/* ================= 內容 ================= */
.content .container {
  width: 100%;
  height: 0;
  padding-bottom: 118.4%;
}

.content .container .title {
  width: 68.73333%;
  height: 0;
  padding-bottom: 7.13333%;
  left: 14.8%;
  top: 0%;
  background-size: 100%;
}

.content .container .banner_area {
  top: 7.60135%;
}

.content .container .banner_area #left, .content .container .banner_area #right {
  width: 4.53333%;
  height: 0;
  padding-bottom: 5.66667%;
  background-size: 100%;
}

.content .container .banner_area #banner {
  width: 81.53333%;
  height: 0;
  padding-bottom: 43.8%;
}

.content .container .banner_area #banner #ul {
  width: 81.53333%;
}

.content .container .banner_area #banner img {
  width: 81vw;
}

.content .container .banner_area #ol {
  left: 44.33333%;
  bottom: 0;
}

.content .container .FB_area {
  height: 0;
  padding-bottom: 54.66667%;
  top: 54.05405%;
  /* 讓所有容器的寬度都變成 100% */
}

.content .container .FB_area .role {
  width: 44.26667%;
  height: 0;
  padding-bottom: 60%;
  top: -2%;
  left: 9%;
  background-size: 100%;
}

.content .container .FB_area .FB {
  width: 38.26667%;
  height: 0;
  padding-bottom: 43.13333%;
  top: 2%;
  left: 45.66667%;
  background-size: 100%;
  padding-left: 4.5%;
}

.content .container .FB_area .fb_iframe_widget, .content .container .FB_area .fb_iframe_widget span, .content .container .FB_area .fb_iframe_widget span iframe[style] {
  width: 100% !important;
  height: 33.3vw !important;
}

@media screen and (max-width: 988px) {
  .content .container {
    padding-bottom: 134%;
  }
  .content .container .title {
    top: 4%;
    width: 86%;
    left: 6%;
  }
  .content .container .banner_area {
    top: 12%;
  }
  .content .container .FB_area .role {
    width: 50%;
    left: 2%;
    padding-bottom: 67%;
  }
  .content .container .FB_area .FB {
    width: 45%;
    top: 8%;
    padding: 8% 5% 2% 6%;
    padding-bottom: 38%;
  }
}

@media only screen and (max-width: 415px) {
  .content .container {
    padding-bottom: 150%;
  }
  .content .container .title {
    width: 100%;
    padding-bottom: 11%;
    top: 6%;
    left: 0;
  }
  .content .container .banner_area {
    top: 15%;
  }
  .content .container .banner_area #ol li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
  }
  .content .container .banner_area #banner {
    width: 100%;
    padding-bottom: 53.8%;
  }
  .content .container .banner_area #banner img {
    width: 100vw;
  }
  .content .container .FB_area {
    top: 60%;
  }
  .content .container .FB_area .role {
    width: 58%;
    top: -7%;
    left: -1%;
  }
  .content .container .FB_area .FB {
    width: 50%;
    padding-top: 9%;
  }
}

.bottom .container {
  width: 100%;
}

@media only screen and (max-width: 415px) {
  .bottom .container p {
    font-size: .5em;
    line-height: 1.6em;
  }
  .bottom .container ul li {
    width: 35%;
  }
  .bottom .container ul li.ms {
    width: 20%;
  }
  .bottom .container ul li.ms img {
    width: 50%;
    max-width: 45px;
  }
  .bottom .container ul li img {
    width: 100%;
  }
}