body, html { height:100%; }
body{ font-family:'M PLUS Rounded 1c','Roboto Slab','Roboto', 'Noto Sans TC', Helvetica, STXihei, arial, sans-serif; margin: 0; word-wrap: break-word; -webkit-text-size-adjust: none; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
img{ border: 0px; vertical-align: middle; line-height: 0; height: auto; }
h1,h2,h3,h4,h5,h6,p{ margin: 0.5em 0; font-weight: normal; }
.font-handwriting{ font-family: 'Alex Brush', cursive; }
.fwn{ font-weight: normal; font-weight: 300; }

.wrapper{ display: flex; flex-direction: column; }

.bg{ width: 100vw; height: 100vh; background-color: #000000; }
.bg img{ width: 100vw; height: 100vh; object-fit: cover; }

.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade {
  from { opacity: 0.6 } 
  to { opacity: 1 }
}

.block{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1em 1.5em 0.6em 1.5em; border: 1px solid #ffffff; text-align: center; color: #ffffff; background-color: rgba(0, 0, 0, 0.55); }

.top{ margin: 0.5em 0; }
.top h1{ margin: 0em 0; font-size: 3em; font-weight: normal; line-height: 1; }
.top.en{ color: rgba(255, 255, 255, 0.8); }
.top .t1{ text-align: left; font-size: 3.3em; }
.top .t2{ text-align: right; }

.zh-name{ margin: 0 0 1em 0; display: flex; justify-content: space-evenly; text-align: center; }
.zh-name > div{ display: flex; flex-direction: column; align-items: center; flex-basis: 150px; }
.zh-name .subtitle{ margin: 0 0 0.36em 0;; font-weight: 100; }
.zh-name h3,.zh-name h4{ margin: 0 0 0.36em 0; letter-spacing: 0.1em; }
.zh-name h3 span,.zh-name h4 span{ margin: 0 0.36em; }

.line{ margin: 0 0 1em 0; line-height: 1; display: flex; }
.line hr{ flex: 1; border-top: 1px dotted rgba(255, 255, 255, 0.8); border-bottom: 0; }
.line h5, .line h4{ margin-top: 0em; }
.line h5{ margin: 0 0.8em; }

.date{ margin: 0 0 1em 0; }
.date h3, .date h4, .date h5{ margin-top: 0; }
.date h3{ margin-bottom: 0em; }
.date h5{ letter-spacing: 0.12em }

.address{ margin: 0 0 1em 0; }
.address:hover{ cursor: pointer; }
.address h4, .address h5{ margin-top: 0; }
.address h4{ margin-bottom: 0em; }
.address .note{ letter-spacing: 0.12em }

.landscape .top{ margin-bottom: 0; white-space: nowrap; }
.landscape .top h1{ display: inline-block; font-size: 2.7em; }
.landscape .top h1:nth-child(2){ margin: 0 0.4em; font-size: 2.4em; }
.landscape .zh-name, .landscape .date, .landscape .line, .landscape .address{ margin-bottom: 0.6em; }

@media screen and (min-width: 420px) and (orientation: portrait){ 
  .block{ min-width: 400px; }
}
@media screen and (max-width: 420px) and (orientation: portrait){ 
  .block{ min-width: 80vw; }
}

@media only screen and (orientation: portrait) {
  .landscape{ display: none; }
}
@media only screen and (orientation: landscape) {
  .portrait{ display: none; }
}