@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Poiret+One);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body {width: 100%; height:5000px; min-width: 1400px;font-family:poiret one; background: black;}

h3 {z-index: 100px; font-size: 100px; color: red; position: fixed; left: 0; top: 0;}
#bg {position: fixed; right: 0; height: 1080px; z-index: 0;  min-width: 1000px;}
#bg>img {height: 100%;}
h1 {position: fixed; height: 200px; color: #fff; z-index: 1;  line-height: 1;}
h1>img {height: 200px; width: auto;}
h1>b,span {margin-left: 40px; }
h1>span {font-size: 20px; color: gray;}
footer {position: fixed; bottom: 20px; left: 20px; color: #fff; letter-spacing: 1px;}
#menu {position: fixed; top: 300px; left: 40px;}
#menu li {float: left; color: #fff; font-size: 25px; font-weight: bold;  margin-right: 30px; border-bottom: 1px solid #fff; letter-spacing: 1px; cursor: pointer;}
#menu li:hover {animation: li 4s infinite alternate;}
#menu li.on {animation: li 4s infinite alternate;}
@keyframes li {
  0% {color: #fff; border-bottom: 1px solid #fff;}
  25% {color: yellow; border-bottom: 1px solid yellow;}
  50% {color: #ffa52d; border-bottom: 1px solid #ffa52d;}
  75% {color: pink; border-bottom: 1px solid pink;}
  100% {color: orange; border-bottom: 1px solid orange;}
}
section {position: fixed; top: 45%; left: 0; height: 230px; width: 4500px; transition: all 0.5s;}
article {position: relative; float: left; opacity: 0.6; font-style: none;  width: 200px; height: 230px;background: black; text-align: left; cursor: pointer; margin: 0 10px; transition: all 0.5s;}
article:hover {opacity: 1;}
article>b {position: absolute; font-style: none; bottom: 3px; left: 5px; font-size: 17px; color: #fff;}
article>em {position: absolute; right: 5px; color: #fff; font-size: 15px; bottom: 3px;}
article strong {height: 200px; width: auto; transition: all 0.5s;}
article strong img { height: 200px; width: auto; opacity: 1; transition: all 0.5s;}
article p {position: absolute; left: 0px; opacity: 0; transition: all 0.5s; opacity: 0;}
article p img {height: 0; width: auto; transition: all 0.5s;}
article.on {width: 500px; height: 500px; opacity: 1; transform: translateY(-60px); transition: all 0.5s; z-index: 3; background: none;}
article.on b {opacity: 0;}
article.on strong {height: 0;}
article.on strong img {height: 0; opacity: 0;}
article.on em {opacity: 0;}
article.on p {position: absolute; transition: all 0.5s; opacity: 1;}
article.on p img {height: 500px; width: auto; transition: all 0.5s;}