* {
  position: relative;
  font-family: Microsoft JhengHei;
}

html {
  width: 100%;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #2e3860;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23384475' stroke-width='25' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
  /* background by SVGBackgrounds.com */
}

nav.nav_bar {
  display: flex;
  padding: .5rem 2rem;
  background-color: #fff;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}

nav.nav_bar img {
  max-height: 50px;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

svg#title {
  width: 300px;
  margin-bottom: 1rem;
}

@media screen and (min-width: 576px) {
  svg#title {
    width: 500px;
  }
}

.slogan {
  z-index: 10;
  padding: .5rem 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.goback {
  padding: 1.5rem 0;
  text-align: center;
}

.goback_btn {
  padding: .5rem 1rem;
  font-size: 1.125rem;
  border-radius: 5px;
  outline: none;
  border: 0;
  z-index: 10;
  cursor: pointer;
  transition: all .3s;
  color: #555;
  background-color: #ddd;
}

.goback_btn:hover {
  box-shadow: 3px 3px 0px #e85676;
  color: #333;
  background-color: #fff;
}

.goback_btn:active {
  background-color: #297391;
  color: white;
}

.strip_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  height: 100%;
}

.stripe {
  position: absolute;
  left: 100px;
  top: 10px;
  width: 50px;
  height: 10px;
  background-color: white;
  opacity: 0;
}

@keyframes stripe-animation-1 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-66px);
    opacity: 1;
  }
}

.stripe:nth-child(1) {
  left: 81%;
  top: 6%;
  width: 31px;
  height: 4px;
  background-color: #e85676;
  animation: stripe-animation-1 0.4s ease-in-out forwards;
  animation-delay: 0.01s;
}

@keyframes stripe-animation-2 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(136px);
    opacity: 1;
  }
}

.stripe:nth-child(2) {
  left: 16%;
  top: 91%;
  width: 39px;
  height: 8px;
  background-color: #e85676;
  animation: stripe-animation-2 0.5s ease-in-out forwards;
  animation-delay: 0.02s;
}

@keyframes stripe-animation-3 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(23px);
    opacity: 1;
  }
}

.stripe:nth-child(3) {
  left: 61%;
  top: 81%;
  width: 40px;
  height: 5px;
  background-color: #fff;
  animation: stripe-animation-3 0.05s ease-in-out forwards;
  animation-delay: 0.03s;
}

@keyframes stripe-animation-4 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(154px);
    opacity: 1;
  }
}

.stripe:nth-child(4) {
  left: 83%;
  top: 29%;
  width: 57px;
  height: 5px;
  background-color: #e85676;
  animation: stripe-animation-4 0.3s ease-in-out forwards;
  animation-delay: 0.04s;
}

@keyframes stripe-animation-5 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(180px);
    opacity: 1;
  }
}

.stripe:nth-child(5) {
  left: 91%;
  top: 46%;
  width: 33px;
  height: 5px;
  background-color: #fff;
  animation: stripe-animation-5 0.45s ease-in-out forwards;
  animation-delay: 0.05s;
}

@keyframes stripe-animation-6 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-170px);
    opacity: 1;
  }
}

.stripe:nth-child(6) {
  left: 78%;
  top: 14%;
  width: 39px;
  height: 4px;
  background-color: #fff;
  animation: stripe-animation-6 0.25s ease-in-out forwards;
  animation-delay: 0.06s;
}

@keyframes stripe-animation-7 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(113px);
    opacity: 1;
  }
}

.stripe:nth-child(7) {
  left: 14%;
  top: 94%;
  width: 37px;
  height: 4px;
  background-color: #fff;
  animation: stripe-animation-7 0.25s ease-in-out forwards;
  animation-delay: 0.07s;
}

@keyframes stripe-animation-8 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(37px);
    opacity: 1;
  }
}

.stripe:nth-child(8) {
  left: 32%;
  top: 25%;
  width: 33px;
  height: 6px;
  background-color: #e85676;
  animation: stripe-animation-8 0.05s ease-in-out forwards;
  animation-delay: 0.08s;
}

@keyframes stripe-animation-9 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(100px);
    opacity: 1;
  }
}

.stripe:nth-child(9) {
  left: 91%;
  top: 75%;
  width: 39px;
  height: 7px;
  background-color: #e85676;
  animation: stripe-animation-9 0.25s ease-in-out forwards;
  animation-delay: 0.09s;
}

@keyframes stripe-animation-10 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-115px);
    opacity: 1;
  }
}

.stripe:nth-child(10) {
  left: 85%;
  top: 61%;
  width: 39px;
  height: 9px;
  background-color: #fff;
  animation: stripe-animation-10 0.15s ease-in-out forwards;
  animation-delay: 0.1s;
}

@keyframes stripe-animation-11 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-78px);
    opacity: 1;
  }
}

.stripe:nth-child(11) {
  left: 5%;
  top: 2%;
  width: 47px;
  height: 5px;
  background-color: #297391;
  animation: stripe-animation-11 0.05s ease-in-out forwards;
  animation-delay: 0.11s;
}

@keyframes stripe-animation-12 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-131px);
    opacity: 1;
  }
}

.stripe:nth-child(12) {
  left: 24%;
  top: 8%;
  width: 33px;
  height: 9px;
  background-color: #297391;
  animation: stripe-animation-12 0.35s ease-in-out forwards;
  animation-delay: 0.12s;
}

@keyframes stripe-animation-13 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(32px);
    opacity: 1;
  }
}

.stripe:nth-child(13) {
  left: 91%;
  top: 26%;
  width: 53px;
  height: 10px;
  background-color: #e85676;
  animation: stripe-animation-13 0.5s ease-in-out forwards;
  animation-delay: 0.13s;
}

@keyframes stripe-animation-14 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(103px);
    opacity: 1;
  }
}

.stripe:nth-child(14) {
  left: 9%;
  top: 32%;
  width: 41px;
  height: 6px;
  background-color: #fff;
  animation: stripe-animation-14 0.1s ease-in-out forwards;
  animation-delay: 0.14s;
}

@keyframes stripe-animation-15 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(133px);
    opacity: 1;
  }
}

.stripe:nth-child(15) {
  left: 62%;
  top: 92%;
  width: 57px;
  height: 4px;
  background-color: #e85676;
  animation: stripe-animation-15 0.45s ease-in-out forwards;
  animation-delay: 0.15s;
}

@keyframes stripe-animation-16 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-123px);
    opacity: 1;
  }
}

.stripe:nth-child(16) {
  left: 6%;
  top: 75%;
  width: 50px;
  height: 7px;
  background-color: #e85676;
  animation: stripe-animation-16 0.2s ease-in-out forwards;
  animation-delay: 0.16s;
}

@keyframes stripe-animation-17 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-99px);
    opacity: 1;
  }
}

.stripe:nth-child(17) {
  left: 99%;
  top: 2%;
  width: 60px;
  height: 6px;
  background-color: #297391;
  animation: stripe-animation-17 0.45s ease-in-out forwards;
  animation-delay: 0.17s;
}

@keyframes stripe-animation-18 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-113px);
    opacity: 1;
  }
}

.stripe:nth-child(18) {
  left: 65%;
  top: 44%;
  width: 50px;
  height: 5px;
  background-color: #297391;
  animation: stripe-animation-18 0.25s ease-in-out forwards;
  animation-delay: 0.18s;
}

@keyframes stripe-animation-19 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(172px);
    opacity: 1;
  }
}

.stripe:nth-child(19) {
  left: 47%;
  top: 66%;
  width: 52px;
  height: 6px;
  background-color: #fff;
  animation: stripe-animation-19 0.25s ease-in-out forwards;
  animation-delay: 0.19s;
}

@keyframes stripe-animation-20 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(52px);
    opacity: 1;
  }
}

.stripe:nth-child(20) {
  left: 59%;
  top: 92%;
  width: 58px;
  height: 10px;
  background-color: #297391;
  animation: stripe-animation-20 0.45s ease-in-out forwards;
  animation-delay: 0.2s;
}

@keyframes stripe-animation-21 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-157px);
    opacity: 1;
  }
}

.stripe:nth-child(21) {
  left: 27%;
  top: 28%;
  width: 52px;
  height: 3px;
  background-color: #e85676;
  animation: stripe-animation-21 0.5s ease-in-out forwards;
  animation-delay: 0.21s;
}

@keyframes stripe-animation-22 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(73px);
    opacity: 1;
  }
}

.stripe:nth-child(22) {
  left: 99%;
  top: 76%;
  width: 36px;
  height: 6px;
  background-color: #fff;
  animation: stripe-animation-22 0.5s ease-in-out forwards;
  animation-delay: 0.22s;
}

@keyframes stripe-animation-23 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-70px);
    opacity: 1;
  }
}

.stripe:nth-child(23) {
  left: 100%;
  top: 66%;
  width: 34px;
  height: 6px;
  background-color: #fff;
  animation: stripe-animation-23 0.1s ease-in-out forwards;
  animation-delay: 0.23s;
}

@keyframes stripe-animation-24 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-182px);
    opacity: 1;
  }
}

.stripe:nth-child(24) {
  left: 5%;
  top: 46%;
  width: 40px;
  height: 9px;
  background-color: #297391;
  animation: stripe-animation-24 0.2s ease-in-out forwards;
  animation-delay: 0.24s;
}

@keyframes stripe-animation-25 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(146px);
    opacity: 1;
  }
}

.stripe:nth-child(25) {
  left: 57%;
  top: 38%;
  width: 36px;
  height: 5px;
  background-color: #fff;
  animation: stripe-animation-25 0.5s ease-in-out forwards;
  animation-delay: 0.25s;
}

@keyframes stripe-animation-26 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(191px);
    opacity: 1;
  }
}

.stripe:nth-child(26) {
  left: 99%;
  top: 6%;
  width: 49px;
  height: 9px;
  background-color: #e85676;
  animation: stripe-animation-26 0.15s ease-in-out forwards;
  animation-delay: 0.26s;
}

@keyframes stripe-animation-27 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(112px);
    opacity: 1;
  }
}

.stripe:nth-child(27) {
  left: 3%;
  top: 61%;
  width: 36px;
  height: 5px;
  background-color: #fff;
  animation: stripe-animation-27 0.3s ease-in-out forwards;
  animation-delay: 0.27s;
}

@keyframes stripe-animation-28 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(153px);
    opacity: 1;
  }
}

.stripe:nth-child(28) {
  left: 58%;
  top: 5%;
  width: 50px;
  height: 5px;
  background-color: #fff;
  animation: stripe-animation-28 0.4s ease-in-out forwards;
  animation-delay: 0.28s;
}

@keyframes stripe-animation-29 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-4px);
    opacity: 1;
  }
}

.stripe:nth-child(29) {
  left: 19%;
  top: 8%;
  width: 47px;
  height: 6px;
  background-color: #297391;
  animation: stripe-animation-29 0.25s ease-in-out forwards;
  animation-delay: 0.29s;
}

@keyframes stripe-animation-30 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-67px);
    opacity: 1;
  }
}

.stripe:nth-child(30) {
  left: 23%;
  top: 69%;
  width: 50px;
  height: 6px;
  background-color: #fff;
  animation: stripe-animation-30 0.5s ease-in-out forwards;
  animation-delay: 0.3s;
}