@import url(font-awesome.min.css);
.container { position: relative; width: 100%; heigh: 100%; text-align: center; top: 40%; left: 0; margin: 0 auto; font-family: "NotoSansTC-Thin", "LiHei Pro Medium", "Microsoft JhengHei", "Microsoft YaHei", "SimHei", "MingLiU", "PMingLiU"; }
.container p { font-size: 16px; }
.container a { display: inline-block; position: relative; text-align: center; color: #144f89; text-decoration: none; font-size: 20px; overflow: hidden; }

h1 { position: relative; text-align: center; font-family: 'Vollkorn', serif; }

.button_container { position: fixed; top: 5%; right: 0.9%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity .25s ease; z-index: 999999; }
.button_container:hover { opacity: .7; }
.button_container.active .top { transform: translateY(11px) translateX(0) rotate(45deg); background: #FFF; }
.button_container.active .middle { opacity: 0; background: #FFF; }
.button_container.active .bottom { transform: translateY(-11px) translateX(0) rotate(-45deg); background: #FFF; }
.button_container span { background: white; border: none; height: 5px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; }
.button_container span:nth-of-type(2) { top: 11px; }
.button_container span:nth-of-type(3) { top: 22px; }

.overlay { position: fixed; background: #144f89; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index: 999998; }
.overlay.open { opacity: .95; visibility: visible; height: 100%; }
.overlay.open li { animation: fadeInRight .5s ease forwards; animation-delay: .35s; }
.overlay.open li:nth-of-type(2) { animation-delay: .4s; }
.overlay.open li:nth-of-type(3) { animation-delay: .45s; }
.overlay.open li:nth-of-type(4) { animation-delay: .50s; }
.overlay nav { font-size: 50px; height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 50%; top: 50%; text-align: center; }
.overlay ul li { display: block; height: 20%; position: relative; opacity: 0; text-align: center; }
.overlay ul li a { display: block; position: relative; color: #FFF; text-decoration: none; overflow: hidden; letter-spacing: 0.8px; text-align: center; }
.overlay ul li a:focus:after, .overlay ul li a:active:after { width: 100%; }
.overlay ul li a:hover { color: #f5866b; }

@keyframes fadeInRight { 0% { opacity: 0; left: 20%; }
  100% { opacity: 1; left: 0; } }
@media (min-width: 767px) { .overlay ul li a { font-size: 0.6em; margin: 26px 0; } }
@media (max-width: 768px) { .button_container { position: fixed; top: 2.5%; right: 3%; } }
@media (max-width: 590px) { .overlay ul li a { font-size: 0.35em; margin: 10px 0; }
  .overlay ul { top: 28%; } }