@charset "UTF-8";
* {
  margin: 0;
  padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  background-color: #FFF;
  font-family: "微软雅黑"; }

ul {
  list-style: none; }
  ul li:nth-of-type(2), ul li:nth-of-type(3) {
    display: none; }

#exhibition-bar {
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
  background-image: url(../../img/black.png); }
  #exhibition-bar #nav-bar {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 2.25rem;
    text-align: center; }
    #exhibition-bar #nav-bar .nav-opt {
      height: 2.25rem;
      width: 5rem;
      float: right;
      line-height: 2.25rem; }
    #exhibition-bar #nav-bar .nav-opt:hover {
      background-color: rgba(0, 0, 0, 0.8); }
    #exhibition-bar #nav-bar ul:hover li:nth-of-type(2), #exhibition-bar #nav-bar ul:hover li:nth-of-type(3) {
      display: block;
      background-color: rgba(0, 0, 0, 0.5); }
    #exhibition-bar #nav-bar #brand {
      float: left;
      line-height: 2.25rem; }
  #exhibition-bar #title {
    opacity: 10;
    color: #FFF;
    line-height: 35.575rem;
    width: 100%;
    font-size: 2rem; }

.title-transition {
  animation: mytitlemove 2s 1;
  -webkit-animation: mytitlemove 2s 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill: mytitlemove 2s 1; }

@keyframes mytitlemove {
  100% {
    line-height: 15rem; } }

.nav-image-transition {
  animation: mynavimgchange 1s 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill: mynavimgchange 2s 1;
  animation-fill-mode: forwards; }

@keyframes mynavimgchange {
  100% {
    height: 15rem;
    background-image: url(../../img/title.jpg); } }

.nav-transition {
  animation: mynavmove 2s 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill: mynavmove 2s 1;
  animation-fill-mode: forwards; }

@keyframes mynavmove {
  100% {
    height: 15rem; } }

#works {
  margin: 0 auto;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  width: 80%; }
  #works div {
    text-align: center; }
    #works div .content {
      position: relative;
      border: 1px #CCC solid;
      padding: 5px;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      opacity: 0;
      height: auto; }
      #works div .content img {
        width: 100%; }
      #works div .content .content-title {
        font-size: 0.8rem;
        margin: 1rem; }
      #works div .content .content-para {
        height: 4rem;
        font-size: 0.6rem; }
      #works div .content a {
        margin-bottom: 1rem; }

.content-animation {
  animation: mycontentmove 1s 1;
  animation-fill-mode: forwards; }

@keyframes mycontentmove {
  to {
    opacity: 1; } }

footer {
  height: 2.5rem;
  width: 100%;
  background-color: #DDDDDD;
  text-align: center;
  line-height: 2.5rem; }