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

/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none;	color:#bbb;}
img { border:0;}

#wrap {position: fixed; width: 100%; height: 100%; min-width: 1300px; min-height: 768px; background: url(../img/img1.jpg) no-repeat center bottom; background-color: black; background-size: contain; text-align: center;}
.line1 {position: absolute; width: 0; opacity: 0.9; height: 2px; background: red; top: 148px; z-index: 100; animation: line1 3s ;}
@keyframes line1 {
  0% {width: 0;}
  50% {width: 100%;}
  70% {width: 100%;}
  100% {width: 0%;}
}
.line2 {position: absolute; width: 0; opacity: 0.9; height: 2px; background: black; top: 148px; z-index: 101; animation: line2 3s ;}
@keyframes line2 {
  0% {width: 0;}
  33.3% {width: 0;}
  66.6% {width: 100%;}
  100% {width: 100%;}
}

section {position: fixed; top: 0; left: 0; width: 100%; height: 90%; min-width: 1300px;}
article {position: relative; float: left; width: 25%; height:150px; top: 0; left: 0; right:0; box-sizing: border-box;}
article>h2 {position: absolute; width: 100%; height: 150px; background: gray; opacity: 0.9; border: 0; box-sizing: border-box; cursor: pointer; transition: all 1s; z-index: 2;}
article:nth-child(1)>h2 {background: url(../img/img1.png) no-repeat center center;}
article:nth-child(2)>h2 {background: url(../img/img2.png) no-repeat center center;}
article:nth-child(3)>h2 {background: url(../img/img3.png) no-repeat center center; transform: rotateY(180deg);}
article:nth-child(4)>h2 {background: url(../img/img4.png) no-repeat center center; transform: rotateY(180deg);}
article>h2 {text-align: center; padding-top:20px; color: #fff;}
article>h2>span {font: 40px Raleway; }
article>p {transform: rotateY(0);position: absolute; text-align: justify; font: 15px Raleway; padding: 0 5px; top: -100%; color: #fff; z-index: 4; }
article>h3 {position: absolute; font: 40px Raleway; text-align: center; top: -120px; left: 10px; color: red; opacity: 0.8; z-index: 3;}
article>video {position: absolute;  border-radius: 0 0 25px 25px; left: 0px; width: 200%;  opacity: 0; z-index: -5; border: 2px solid white; box-sizing: border-box;}
article:nth-child(3) {transform: rotateY(180deg); z-index: -1;}
article:nth-child(4) {transform: rotateY(180deg); z-index: -2;}
.ar3>h3,p {transform: rotateY(180deg);}
.ar3>p {transform: rotateY(180deg);}
.ar4>h3 {transform: rotateY(180deg);}
.ar4>p {transform: rotateY(180deg);}
footer {position: absolute; bottom: 0; width: 100%; height: 40px; background: #111; color: #fff; }
footer ul {position: absolute; left: 40px; top: 10px;}
footer ul li {list-style: none; float: left; margin-right: 40px;}
footer ul li a:hover {color: #8c0000; transition: all 0.5s;}
footer span {position: absolute; float:  right; right: 40px; top: 10px; color: #aaa;}