@import url(https://fonts.googleapis.com/css?family=Saira:400,700&display=swap);
@-webkit-keyframes tentaclesAnimation-1{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-moz-keyframes tentaclesAnimation-1{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}50%{-moz-transform:rotate(10deg);transform:rotate(10deg)}to{-moz-transform:rotate(0deg);transform:rotate(0deg)}}@-o-keyframes tentaclesAnimation-1{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-o-transform:rotate(10deg);transform:rotate(10deg)}to{-o-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes tentaclesAnimation-1{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes tentaclesAnimation-2{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-moz-keyframes tentaclesAnimation-2{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}50%{-moz-transform:rotate(-10deg);transform:rotate(-10deg)}to{-moz-transform:rotate(0deg);transform:rotate(0deg)}}@-o-keyframes tentaclesAnimation-2{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-o-transform:rotate(-10deg);transform:rotate(-10deg)}to{-o-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes tentaclesAnimation-2{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-o-transform:rotate(-10deg);transform:rotate(-10deg)}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes tentaclesAnimation-3{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-moz-keyframes tentaclesAnimation-3{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}50%{-moz-transform:rotate(5deg);transform:rotate(5deg)}to{-moz-transform:rotate(0deg);transform:rotate(0deg)}}@-o-keyframes tentaclesAnimation-3{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-o-transform:rotate(5deg);transform:rotate(5deg)}to{-o-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes tentaclesAnimation-3{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg)}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes tentaclesAnimation-4{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-moz-keyframes tentaclesAnimation-4{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}50%{-moz-transform:rotate(-5deg);transform:rotate(-5deg)}to{-moz-transform:rotate(0deg);transform:rotate(0deg)}}@-o-keyframes tentaclesAnimation-4{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-o-transform:rotate(-5deg);transform:rotate(-5deg)}to{-o-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes tentaclesAnimation-4{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}}body,html{padding:0;margin:0;color:#fff;background-color:#003363;width:100%;height:100%;font-size:16px;line-height:1.5;font-family:Saira,Arial,微軟正黑體,Microsoft JhengHei,Microsoft JhengHei UI,Microsoft YaHei,Microsoft YaHei UI,PingFang TC,Lantinghei TC,Heiti TC,Apple LiGothic,PMingLiU,sans-serif}a{text-decoration:none;color:#fff;-o-transition:color .1s linear;-moz-transition:color .1s linear;transition:color .1s linear}a:active,a:hover{color:hsla(0,0%,100%,.8)}#app{margin:auto;width:100%;height:100%;min-width:320px;-moz-box-sizing:border-box;box-sizing:border-box;min-height:0;text-align:center;display:-moz-box;display:-ms-flexbox;display:flex;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.page-content{padding:0 5%}.page-content .page-title{font-size:2.875em;font-size:-moz-calc(1em + 2.1vw);font-size:calc(1em + 2.1vw);margin:2.2em 0 .25em;font-weight:700;line-height:1.25em}.page-content .page-subtitle{font-size:1.875em;font-size:-moz-calc(1em + 1vw);font-size:calc(1em + 1vw);margin:0 0 .5em;font-weight:400;line-height:1.25em}.graphics{position:relative;margin-top:28%}.graphics .moon{width:100%;display:block}.graphics .rocket{position:absolute;width:17.9%;bottom:21.7%;left:38.35%}.graphics .alien{width:11.8%;height:71.5%;bottom:147%;left:46.4%;position:absolute}.graphics .alien-head{position:absolute;width:100%;bottom:0;left:0}.graphics .alien-eye{position:absolute;width:16%;padding-bottom:16%}.graphics .alien-eye--left{position:absolute;top:60%;left:9%}.graphics .alien-eye--right{position:absolute;top:69%;left:66%}.graphics .alien-eye__iris{width:100%;display:block;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:84.2%;left:25.5%}.graphics .alien-tentacles{position:absolute}.graphics .alien-tentacles--left1{width:52.5%;bottom:8%;left:-35%;-webkit-animation:tentaclesAnimation-1 4s infinite;-moz-animation:tentaclesAnimation-1 infinite 4s;-o-animation:tentaclesAnimation-1 infinite 4s;animation:tentaclesAnimation-1 4s infinite}.graphics .alien-tentacles--left1,.graphics .alien-tentacles--left2{-webkit-transform-origin:right center;-moz-transform-origin:right center;-ms-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center}.graphics .alien-tentacles--left2{width:90%;bottom:0;left:-65%;-webkit-animation:tentaclesAnimation-2 4s infinite;-moz-animation:tentaclesAnimation-2 infinite 4s;-o-animation:tentaclesAnimation-2 infinite 4s;animation:tentaclesAnimation-2 4s infinite}.graphics .alien-tentacles--left3{width:60%;bottom:-26%;left:-38.2%;-webkit-animation:tentaclesAnimation-1 4s infinite;-moz-animation:tentaclesAnimation-1 infinite 4s;-o-animation:tentaclesAnimation-1 infinite 4s;animation:tentaclesAnimation-1 4s infinite;-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.graphics .alien-tentacles--right1{width:63.56%;bottom:-2%;left:64%;-webkit-animation:tentaclesAnimation-2 4s .5s infinite;-moz-animation:tentaclesAnimation-2 infinite 4s .5s;-o-animation:tentaclesAnimation-2 infinite 4s .5s;animation:tentaclesAnimation-2 4s .5s infinite}.graphics .alien-tentacles--right1,.graphics .alien-tentacles--right2{-webkit-transform-origin:left center;-moz-transform-origin:left center;-ms-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}.graphics .alien-tentacles--right2{width:85.92%;bottom:-19%;left:54%;-webkit-animation:tentaclesAnimation-3 4s .3s infinite;-moz-animation:tentaclesAnimation-3 infinite 4s .3s;-o-animation:tentaclesAnimation-3 infinite 4s .3s;animation:tentaclesAnimation-3 4s .3s infinite}.graphics .alien-tentacles--right3{width:50.6%;bottom:-37%;left:59%;-webkit-animation:tentaclesAnimation-4 4s .2s infinite;-moz-animation:tentaclesAnimation-4 infinite 4s .2s;-o-animation:tentaclesAnimation-4 infinite 4s .2s;animation:tentaclesAnimation-4 4s .2s infinite;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}@media (orientation:portrait){.page-content .page-title{margin:30vh 0 .25em}}
