*,*::after,*::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
html{height:100%;}
body{background:#101524;font-size:12px;font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;height:100%;display:flex;flex-direction:column;justify-content:center;}
div{
  float:left;
  display:block;
  width:50%;
  cursor:default;
}
div:before{
  -webkit-transition:opacity 1.35s;
  -moz-transition:opacity 1.35s;
  transition:opacity 1.35s;
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -ms-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:left top;
  background-repeat:no-repeat;
  background-image:url(../images/bg1.jpg);
  -webkit-opacity:0;
  -moz-opacity:0;
  opacity:0;
  -khtml-opacity:0;
  filter:alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
div:last-child:before{
  background-image:url(../images/bg2.jpg);
}
div:hover:before{
  -webkit-opacity:.2;
  -moz-opacity:.2;
  opacity:.2;
  -khtml-opacity:.2;
  filter:alpha(opacity=20);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
h2,p{
  width:100%;
  -webkit-transform:translate3d(0,40px,0);
  -moz-transform:translate3d(0,40px,0);
  transform: translate3d(0,40px,0);
  -webkit-text-shadow:1px 1px 0 rgba(0, 0, 0, .7);
  -moz-text-shadow:1px 1px 0 rgba(0, 0, 0, .7);
  -ms-text-shadow:1px 1px 0 rgba(0, 0, 0, .7);
  -o-text-shadow:1px 1px 0 rgba(0, 0, 0, .7);
  text-shadow:1px 1px 0 rgba(0, 0, 0, .7);
}
h2{
  text-align:center;
  font-size: 2rem;
  font-weight: normal;
  -webkit-transition:-webkit-transform 0.35s;
  -moz-transition:-moz-transform 0.35s;
  transition:transform 0.35s;
  color:#888;
}
p{
  margin-top:1.2rem;
  text-align:center;
  font-size:1.2rem;
  letter-spacing:1px;
  -webkit-opacity:0;
  -moz-opacity:0;
  opacity:0;
  -khtml-opacity:0;
  filter:alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 -webkit-transition:opacity 0.2s,-webkit-transform 0.35s;
 -moz-transition:opacity 0.2s,-moz-transform 0.35s;
 transition:opacity 0.2s,transform 0.35s;
}
p a {
  position:relative;
  display:block;
  color:#888;
  margin-top:1rem;
  text-decoration:none;
}
p a:hover {
  text-decoration:underline wavy;
}
b{
  margin-right:.5rem;
  font-size:1rem;
  color:#e2e2e2;
}
div:hover h2,p{
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}
div:hover p{
  -webkit-transition-delay:0.05s;
  -moz-transition-delay:0.05s;
  transition-delay:0.05s;
  -webkit-transition-duration:0.35s;
  -moz-transition-duration:0.35s;
  transition-duration:0.35s;
  -webkit-opacity:1;
  -moz-opacity:1;
  opacity:1;
  -khtml-opacity:1;
  filter:alpha(opacity=100);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.copyright{
  position:absolute;
  right:20px;
  bottom:20px;
  color:#999;
  font-size:1rem;
  text-decoration:none;
}

@media (max-width: 768px){
  body{
    justify-content:space-between;
    min-height:100%;
  }

  nav{
    width:100%;
    padding:0;
    margin:auto 0;
  }

  div{
    float:none;
    width:100%;
    margin-bottom:.75rem;
  }

  div:last-child{
    margin-bottom:0;
  }

  h2{
    font-size:1.05rem;
    white-space:nowrap;
    letter-spacing:0;
    cursor:pointer;
  }

  p{
    font-size:1rem;
    -webkit-transform:translate3d(0,40px,0);
    -moz-transform:translate3d(0,40px,0);
    transform:translate3d(0,40px,0);
  }

  div.mobile-open h2,
  div.mobile-open p{
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }

  div.mobile-open p{
    -webkit-opacity:1;
    -moz-opacity:1;
    opacity:1;
    -khtml-opacity:1;
    filter:alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }

  .copyright{
    position:static;
    display:block;
    width:100%;
    padding:0 0 1.25rem;
    text-align:center;
    font-size:.72rem;
    white-space:nowrap;
  }
}