@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; } }

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

.home-container {
  max-width: 1061px;
  margin: 0 auto;
  padding: 0 10px; }

.home-content {
  position: relative;
  margin: -22px 8px 16px; }
  @media (min-width: 768px) {
    .home-content {
      margin: 4px 0 45px; } }

.btn-enter {
  top: 46%;
  left: 56%;
  position: absolute;
  width: 38.7%;
  -webkit-transition: -webkit-filter .3s ease;
  transition: -webkit-filter .3s ease;
  -o-transition: filter .3s ease;
  transition: filter .3s ease;
  transition: filter .3s ease, -webkit-filter .3s ease; }
  @media (min-width: 768px) {
    .btn-enter {
      top: 24.3%;
      left: 54.2%;
      position: absolute;
      width: 27.3%; } }
  .btn-enter:hover {
    -webkit-filter: contrast(150%);
    filter: contrast(150%); }

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

[class*="section"] {
  margin: 0 -10px; }
  @media (min-width: 992px) {
    [class*="section"] {
      margin: 0; } }
  [class*="section"] img {
    position: relative; }

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

.section-1 .group-1 .obj {
  top: 61.2%;
  right: 6.7%;
  z-index: 1;
  width: 25.7%; }

.section-4 .group-1 .obj {
  top: 8%;
  z-index: -1; }

.section-4 .group-2 .obj {
  top: -8%;
  z-index: -1; }

.section-4 .group-3 .obj {
  top: -9.6%;
  z-index: -1; }

@-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); } }