@charset "UTF-8";
body {
  font-family: "PingFang TC", 微軟正黑體, "Microsoft JhengHei", sans-serif; }

img {
  max-width: 100%;
  vertical-align: top; }

html, body {
  min-height: 100%; }

.container {
  max-width: 1200px;
  padding: 0; }

.header {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 10px;
  white-space: nowrap; }
  .header .logo {
    width: 26.7%; }
    @media (min-width: 1061px) {
      .header .logo {
        width: 27.2%; } }
  .header .title,
  .header .subtitle {
    margin-top: 3%;
    margin-left: 0.7%; }
    @media (min-width: 768px) {
      .header .title,
      .header .subtitle {
        margin-left: 1.2%; } }
    @media (min-width: 1061px) {
      .header .title,
      .header .subtitle {
        margin-top: 2%; } }
  .header .title {
    width: 43.2%; }
    @media (min-width: 1061px) {
      .header .title {
        width: 47%; } }
  .header .subtitle {
    width: 26.8%; }
    @media (min-width: 1061px) {
      .header .subtitle {
        width: 26.3%; } }
    @media (min-width: 1061px) {
      .header .subtitle {
        width: auto; } }

.main {
  overflow: hidden; }
  @media (min-width: 992px) {
    .main {
      overflow: visible; } }

.home {
  background: #000 url(../images/bg_m.jpg) 50% 0 no-repeat;
  background-size: cover;
  overflow-x: hidden; }
  @media (min-width: 992px) {
    .home {
      background-image: url(../images/bg.jpg); } }

[class*="section"] {
  position: relative;
  overflow: hidden; }

[class*="obj"] {
  position: absolute; }

.section-1 .obj-top {
  left: 0%;
  top: 0%;
  width: 100%; }

.section-1 .obj-1 {
  left: 30.7%;
  top: 1.6%;
  width: 41.2%; }

.section-1 .obj-2 {
  left: 48.4%;
  top: 32.1%;
  width: 42.3%; }

.section-1 .obj-3 {
  left: 43.9%;
  top: 46.4%;
  width: 44.3%; }

.section-1 .obj-4 {
  left: 38.7%;
  top: 56.4%;
  width: 60.8%; }

.section-1 .obj-5 {
  left: 14.6%;
  top: 66.7%;
  width: 77.4%; }

.section-2 {
  margin-top: -8.8%; }
  .section-2 .obj-1 {
    left: 27.6%;
    top: 4.1%;
    width: 40.8%; }

.section-3 {
  margin-top: -38.6%; }
  .section-3 .obj-1 {
    left: 0.9%;
    top: 2.1%;
    width: 48%; }
  .section-3 .obj-2 {
    left: 46.8%;
    top: 22.6%;
    width: 51.6%; }
  .section-3 .obj-3 {
    left: 0.3%;
    top: 41.9%;
    width: 56.9%; }
  .section-3 .obj-4 {
    left: 39.4%;
    top: 47%;
    width: 17.7%;
    z-index: 1; }
  .section-3 .obj-5 {
    left: 43.8%;
    top: 56%;
    width: 55.1%; }
  .section-3 .obj-6 {
    left: 0.9%;
    top: 51.2%;
    width: 70.8%; }

.section-4 {
  margin-top: -25.6%; }
  .section-4 .obj-1 {
    left: 44%;
    top: 8.4%;
    width: 49.7%; }
  .section-4 .obj-2 {
    left: 54.5%;
    top: 29.2%;
    width: 32.9%; }

.footer {
  overflow: hidden; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }