@charset "UTF-8";
body {
  font-family: "PT Sans", Arial, Helvetica, "STHeiti Light", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #666;
  -webkit-text-size-adjust: 100%;
  background: #222;
}

.intro {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background: #222222;
  width: 100%;
  height: 100%;
}
.intro.show-intro {
  background: transparent;
  pointer-events: none;
}

.intro-stroke {
  position: absolute;
  width: 120px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.intro-img {
  width: 100%;
}
.intro-img path, .intro-img line, .intro-img circle, .intro-img polyline, .intro-img rect, .intro-img g {
  stroke-dasharray: 250px;
  stroke-dashoffset: 250px;
}
.show-text .intro-img path, .show-text .intro-img line, .show-text .intro-img circle, .show-text .intro-img polyline, .show-text .intro-img rect, .show-text .intro-img g {
  stroke-dashoffset: 0px;
}

#g1 path, #g1 line, #g1 circle, #g1 polyline, #g1 rect, #g1 g, #m1 path, #m1 line, #m1 circle, #m1 polyline, #m1 rect, #m1 g {
  -moz-transition: stroke-dashoffset 2s ease 0.5s;
  -o-transition: stroke-dashoffset 2s ease 0.5s;
  -webkit-transition: stroke-dashoffset 2s ease;
  -webkit-transition-delay: 0.5s;
  transition: stroke-dashoffset 2s ease 0.5s;
}

#m2 path, #m2 line, #m2 circle, #m2 polyline, #m2 rect, #m2 g {
  -moz-transition: stroke-dashoffset 2s ease 0.6s;
  -o-transition: stroke-dashoffset 2s ease 0.6s;
  -webkit-transition: stroke-dashoffset 2s ease;
  -webkit-transition-delay: 0.6s;
  transition: stroke-dashoffset 2s ease 0.6s;
}

#g2 path, #g2 line, #g2 circle, #g2 polyline, #g2 rect, #g2 g {
  -moz-transition: stroke-dashoffset 2s ease 0.7s;
  -o-transition: stroke-dashoffset 2s ease 0.7s;
  -webkit-transition: stroke-dashoffset 2s ease;
  -webkit-transition-delay: 0.7s;
  transition: stroke-dashoffset 2s ease 0.7s;
}

#m3 path, #m3 line, #m3 circle, #m3 polyline, #m3 rect, #m3 g {
  -moz-transition: stroke-dashoffset 2s ease 0.8s;
  -o-transition: stroke-dashoffset 2s ease 0.8s;
  -webkit-transition: stroke-dashoffset 2s ease;
  -webkit-transition-delay: 0.8s;
  transition: stroke-dashoffset 2s ease 0.8s;
}

#b1 path, #b1 line, #b1 circle, #b1 polyline, #b1 rect, #b1 g {
  -moz-transition: stroke-dashoffset 2s ease 0.9s;
  -o-transition: stroke-dashoffset 2s ease 0.9s;
  -webkit-transition: stroke-dashoffset 2s ease;
  -webkit-transition-delay: 0.9s;
  transition: stroke-dashoffset 2s ease 0.9s;
}

#l1 path, #l1 line, #l1 circle, #l1 polyline, #l1 rect, #l1 g, #l2 path, #l2 line, #l2 circle, #l2 polyline, #l2 rect, #l2 g, #l4 path, #l4 line, #l4 circle, #l4 polyline, #l4 rect, #l4 g {
  -moz-transition: stroke-dashoffset 2s ease 1.3s;
  -o-transition: stroke-dashoffset 2s ease 1.3s;
  -webkit-transition: stroke-dashoffset 2s ease;
  -webkit-transition-delay: 1.3s;
  transition: stroke-dashoffset 2s ease 1.3s;
}

#l3 path, #l3 line, #l3 circle, #l3 polyline, #l3 rect, #l3 g, #l5 path, #l5 line, #l5 circle, #l5 polyline, #l5 rect, #l5 g {
  -moz-transition: stroke-dashoffset 2s ease 1.4s;
  -o-transition: stroke-dashoffset 2s ease 1.4s;
  -webkit-transition: stroke-dashoffset 2s ease;
  -webkit-transition-delay: 1.4s;
  transition: stroke-dashoffset 2s ease 1.4s;
}

.top-img {
  opacity: 0;
  -moz-transition: opacity 1s 3s;
  -o-transition: opacity 1s 3s;
  -webkit-transition: opacity 1s;
  -webkit-transition-delay: 3s;
  transition: opacity 1s 3s;
}
.top-img.show-image {
  opacity: 1;
}
.top-img li {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
  background-position: center;
  background-size: cover;
  -moz-transition: -moz-transform 8s;
  -o-transition: -o-transform 8s;
  -webkit-transition: -webkit-transform 8s;
  transition: transform 8s;
}
.top-img li:nth-child(1) {
  background-position: 20% 50%;
  height: 108%;
  -moz-transform: translateY(-8%);
  -ms-transform: translateY(-8%);
  -webkit-transform: translateY(-8%);
  transform: translateY(-8%);
}
.top-img li:nth-child(1).show-img {
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.top-img li:nth-child(2) {
  background-position: 50% 50%;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.top-img li:nth-child(2).show-img {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.top-img li:last-child {
  background-position: 40% 50%;
  width: 105%;
  -moz-transform: translateX(-5%);
  -ms-transform: translateX(-5%);
  -webkit-transform: translateX(-5%);
  transform: translateX(-5%);
}
.top-img li:last-child.show-img {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.top-logo {
  padding: 50px 0;
  border-radius: 50%;
  position: absolute;
  top: 51.5%;
  left: 50%;
  z-index: 5;
  opacity: 0;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transition: opacity 1s, top 1s 4s;
  -o-transition: opacity 1s, top 1s 4s;
  -webkit-transition: opacity 1s, top 1s;
  -webkit-transition-delay: 0s, 4s;
  transition: opacity 1s, top 1s 4s;
}
.show-text .top-logo {
  opacity: 1;
  top: 45vh;
}
.top-logo-img {
  width: 120px;
  height: 140px;
  margin: 0 auto;
  position: relative;
}
.top-btn {
  color: #eee;
  text-shadow: 0 0 5px #666;
  margin: 0px auto;
  width: fit-content;
  padding: 3px 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  -moz-transition: letter-spacing 1s, background 0.6s, opacity 1s 3s;
  -o-transition: letter-spacing 1s, background 0.6s, opacity 1s 3s;
  -webkit-transition: letter-spacing 1s, background 0.6s, opacity 1s;
  -webkit-transition-delay: 0s, 0s, 3s;
  transition: letter-spacing 1s, background 0.6s, opacity 1s 3s;
}
.top-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.show-text .top-btn {
  opacity: 1;
}
.top-slogan {
  width: 70%;
  position: absolute;
  top: 70%;
  left: 50%;
  z-index: 5;
  opacity: 0;
  -moz-transform: translate(-50%, 20px);
  -ms-transform: translate(-50%, 20px);
  -webkit-transform: translate(-50%, 20px);
  transform: translate(-50%, 20px);
  -moz-transition: opacity 1s 4.1s, -moz-transform 1s 4.1s;
  -o-transition: opacity 1s 4.1s, -o-transform 1s 4.1s;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -webkit-transition-delay: 4.1s, 4.1s;
  transition: opacity 1s 4.1s, transform 1s 4.1s;
}
.show-text .top-slogan {
  opacity: 1;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.top-text {
  font-size: 0.875rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: #FFF;
  text-shadow: 0 0 5px #666;
}
.top-text:nth-child(2) {
  padding-top: 15px;
}
.top-social {
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding-top: 20px;
}
.top-social li {
  margin: 0 12px;
  font-size: 20px;
  text-shadow: 0 0 5px #666;
}
.top-social li a {
  color: #FFF;
  -moz-transition: color 0.6s;
  -o-transition: color 0.6s;
  -webkit-transition: color 0.6s;
  transition: color 0.6s;
}
.top-social li a:hover {
  color: #ccc;
}

@media screen and (max-width: 800px) {
  .intro-logo {
    width: 105px;
  }

  .intro-stroke {
    width: 105px;
  }

  .top-logo-img {
    width: 105px;
    height: 120px;
  }
  .top-slogan {
    width: 80%;
  }
  .top-text {
    max-width: unset;
  }
}
@media screen and (max-height: 600px) {
  .intro-logo {
    width: 100px;
    top: 40%;
  }
  .intro-logo.disappear {
    top: 25vh;
  }

  .intro-stroke {
    width: 100px;
  }

  .top-logo {
    top: 35vh;
  }
  .top-logo-img {
    width: 100px;
    height: 115px;
  }
  .top-slogan {
    top: 68%;
  }
}
@media screen and (max-width: 640px) {
  .intro-logo {
    width: 90px;
  }
  .intro-logo.disappear {
    top: 32.5%;
  }

  .intro-stroke {
    width: 90px;
  }

  .intro-text {
    width: 90px;
  }

  .top-logo {
    width: 214px;
    padding: 40px 0;
    top: 49%;
  }
  .top-logo-img {
    width: 80px;
    height: 105px;
  }
  .top-text {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 700px) and (min-width: 640px) {
  .intro-logo.disappear {
    top: 26vh;
  }

  .top-logo {
    top: 53%;
  }
  .show-text .top-logo {
    top: 42vh;
  }
}
@media screen and (max-height: 700px) and (max-width: 640px) {
  .intro-logo.disappear {
    top: 26vh;
  }

  .top-logo {
    top: 50%;
  }
  .show-text .top-logo {
    top: 42vh;
  }
}
@media screen and (max-height: 600px) {
  .intro-logo {
    width: 100px;
    top: 40%;
  }
  .intro-logo.disappear {
    top: 25vh;
  }

  .intro-stroke {
    width: 100px;
  }

  .intro-text {
    width: 100px;
  }
}
@media screen and (max-height: 600px) and (max-width: 640px) {
  .intro-logo {
    width: 90px;
    top: 39%;
  }
  .intro-logo.disappear {
    top: 25.5vh;
  }

  .intro-stroke {
    width: 90px;
  }

  .top-logo {
    top: 50%;
  }
  .show-text .top-logo {
    top: 42vh;
  }
}
@media screen and (max-height: 500px) {
  .intro-logo {
    width: 90px;
  }
  .intro-logo.disappear {
    top: 21vh;
  }

  .intro-stroke {
    width: 90px;
  }

  .top-logo {
    padding: 40px 0;
  }
  .show-text .top-logo {
    top: 36vh;
  }
  .top-logo-img {
    width: 90px;
    height: 100px;
  }
  .top-slogan {
    top: 65%;
  }
  .top-text {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 500px) and (max-width: 640px) {
  .intro-logo {
    width: 90px;
    top: 39%;
  }
  .intro-logo.disappear {
    top: 21vh;
  }

  .intro-stroke {
    width: 90px;
  }

  .top-logo {
    padding: 40px 0;
    top: 52%;
  }
  .show-text .top-logo {
    top: 36vh;
  }
  .top-logo-img {
    width: 90px;
    height: 100px;
  }
  .top-slogan {
    top: 65%;
  }
  .top-text {
    font-size: 0.875rem;
  }
}