@font-face { font-family: aller; src: url(../font/aller.ttf); } 
* { margin: 0; padding: 0; outline: 0; }

body, html { -webkit-perspective: 800px; width: 100%; height: 100%; position: relative; background: #fff; }
body { font: 80px aller; overflow: hidden; background: #fff -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0))); }
#cmf, #cmb, #cmc { position: absolute; width: 683px; height: 514px; top: 50%; left: 50%; margin-left: -341px; margin-top: -257px; }
#cmc { text-align: center; white-space: nowrap; -webkit-transform-style: preserve-3d; }
#cmb { background: url(../images/cmb.png) 50% 0% no-repeat; opacity: 0.8; }
#cmf { background: url(../images/cm1.png) 50% 0% no-repeat; -webkit-transform: translateZ(5px); }
#cms { position: absolute; width: 683px; top: 50%; height: 100px; line-height: 100px; margin-top: -50px; -webkit-transform: translateZ(12px); }
#cms strong { display: block; text-shadow: 0 0 10px #000, 0 0 25px #000, 0 0 50px #000, 0 0 80px #000; color: rgba(0, 0, 0, 0); opacity: 0.5; }
#cmt { position: absolute; width: 683px; top: 50%; height: 100px; line-height: 100px; margin-top: -50px; -webkit-transform: translateZ(60px); }
#cmt strong { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 -1px 1px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 0, 0.5); }
#cmt strong span { color: #f00; }
#cmt strong a { color: #000; text-decoration: none; -webkit-transition: all 500ms ease-in-out; }
#cmt strong a:hover { opacity: 0.5; } 
#cmx { position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 30px; color: #aaa; text-shadow: 0 0 5px #ff0; }
#cmx em { font-style: normal; }
#cmx a { color: #999; text-decoration: none; -webkit-transition: all 500ms ease-in-out; }
#cmx a:hover { color: #000; }

.cmB { -webkit-animation-name: cmB; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
@-webkit-keyframes cmB 
{
0% { -webkit-transform: rotateX(15deg) rotateY(0deg); }
6.25% { -webkit-transform: rotateX(13.86deg) rotateY(5.74deg); }
12.5% { -webkit-transform: rotateX(10.61deg) rotateY(10.61deg); }
18.75% { -webkit-transform: rotateX(5.74deg) rotateY(13.86deg); }
25% { -webkit-transform: rotateX(0deg) rotateY(15deg); }
31.25% { -webkit-transform: rotateX(-5.74deg) rotateY(13.86deg); }
37.5% { -webkit-transform: rotateX(-10.61deg) rotateY(10.61deg); }
43.75% { -webkit-transform: rotateX(-13.86deg) rotateY(5.74deg); }
50% { -webkit-transform: rotateX(-15deg) rotateY(0deg); }
56.25% { -webkit-transform: rotateX(-13.86deg) rotateY(-5.74deg); }
62.5% { -webkit-transform: rotateX(-10.61deg) rotateY(-10.61deg); }
68.75% { -webkit-transform: rotateX(-5.74deg) rotateY(-13.86deg); }
75% { -webkit-transform: rotateX(-0deg) rotateY(-15deg); }
81.25% { -webkit-transform: rotateX(5.74deg) rotateY(-13.86deg); }
87.5% { -webkit-transform: rotateX(10.61deg) rotateY(-10.61deg); }
93.75% { -webkit-transform: rotateX(13.86deg) rotateY(-5.74deg); }
100% { -webkit-transform: rotateX(15deg) rotateY(-0deg); }
}