* { margin: 0; padding: 0; }
html, body, #wrap { height: 100%; font-family: "microsoft yahei", "simhei", sans-serif; overflow:hidden;}
.container { padding:15px; text-align:center; position: relative; height: 100%; }
h1{ font-size:36px; padding-top:10%;}
.pmcont{ padding:30px 0 0 0; line-height:2; font-size:22px;}
.miscbox { position: absolute; bottom: 580px; left:26%; }
#wrap { background: #1158e7 url('../image/bg.jpg') no-repeat center bottom; color: #fff; text-align: center; letter-spacing: 2px; }
.more a { display: inline-block; position: relative; z-index: 4; margin-top:30px; padding: 6px 30px; line-height: 2; color: #fff; font-family: "microsoft yahei", "simhei", sans-serif; font-size: 16px; text-align: center; text-decoration: none; background-color: #0f4dc5; }
#wrap a:hover { background-color: #3f92f0; }
.wave1 { position: absolute; z-index: 3; bottom: 0; margin-top: 50px; width: 100%; color: #999; background: url('../image/bl.png') repeat-x 0 0; -webkit-animation: 8s linear 0s none infinite tweenxx; -moz-animation: 8s linear 0s none infinite tweenxx; animation: 8s linear 0s none infinite tweenxx; }
.wave { height: 220px; background: url('../image/bl.png') repeat-x 330px 0; -webkit-animation: 10s linear 0s none infinite tweenx; -moz-animation: 10s linear 0s none infinite tweenx; animation: 10s linear 0s none infinite tweenx; }
@-webkit-keyframes tweenx { 0% {
background-position: 0 0;
}
100% {
background-position: 1600px 0;
}
}
@-moz-keyframes tweenx { 0% {
background-position: 0 0;
}
100% {
background-position: 1600px 0;
}
}
@keyframes tweenx { 0% {
background-position: 0 0;
}
100% {
background-position: 1600px 0;
}
}
@-webkit-keyframes tweenxx { 0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@-moz-keyframes tweenxx { 0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes tweenxx { 0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
.tower { background: url('../image/un_pic.png') no-repeat; }
.tower { background-position: 0 -127px; position: absolute; z-index: 2; top: 140px; left: 20px; width: 116px; height: 264px; }
.towerlight { position: absolute; z-index: 1; left: 52px; top: 166px; width: 52px; height: 52px; background-color: #fefa90; box-shadow: 0 0 50px rgba(255, 248, 74, 1); -webkit-animation: 3s linear 0s none infinite light; -moz-animation: 3s linear 0s none infinite light; animation: 3s linear 0s none infinite light; }
@-webkit-keyframes light { 0% {
box-shadow: 0 0 50px rgba(255, 254, 165, 1);
}
50% {
box-shadow: 0 0 10px rgba(255, 248, 74, 1);
}
100% {
box-shadow: 0 0 50px rgba(255, 254, 165, 1);
}
}
@-moz-keyframes light { 0% {
box-shadow: 0 0 50px rgba(255, 254, 165, 1);
}
50% {
box-shadow: 0 0 10px rgba(255, 248, 74, 1);
}
100% {
box-shadow: 0 0 50px rgba(255, 254, 165, 1);
}
}
@keyframes light { 0% {
box-shadow: 0 0 50px rgba(255, 254, 165, 1);
}
50% {
box-shadow: 0 0 10px rgba(255, 248, 74, 1);
}
100% {
box-shadow: 0 0 50px rgba(255, 254, 165, 1);
}
}
.beam { position: absolute; z-index: 3; left: -232px; top: 75px; width: 673px; height: 198px; background: url('../image/beam.png') no-repeat; -webkit-transform: rotate(15deg); transform: rotate(15deg); -webkit-transform-origin: 308px 115px; transform-origin: 308px 115px; -webkit-animation: 10s linear 0s none infinite beam; -moz-animation: 10s linear 0s none infinite beam; animation: 10s linear 0s none infinite beam; }
@-webkit-keyframes beam { 0% {
-webkit-transform: rotate(15deg);
}
50% {
-webkit-transform: rotate(65deg);
}
100% {
-webkit-transform: rotate(15deg);
}
}
@keyframes beam { 0% {
transform: rotate(15deg);
}
50% {
transform: rotate(65deg);
}
100% {
transform: rotate(15deg);
}
}
.rotate-box { width: 100px; height: 100px; margin: 0 auto; position: fixed; z-index: 999; -webkit-perspective: 1000px; perspective: 1000px; right: 2%; bottom: 2%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.pmcms { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-15deg) rotateY(-20deg) translateZ(-100px); transform: rotateX(-15deg) rotateY(-20deg) translateZ(-100px); -webkit-transform-origin: center center -100px; transform-origin: center center -100px; -webkit-animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite; animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite; }
.pmcms div { width: 120px; height: 120px; display: block; margin: 0; position: absolute; }
.pmcms div a { color: white; font-size: 8em; text-decoration: none; text-align: center; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.pmcms .front { -webkit-transform: rotateY(0deg) translateZ(60px); transform: rotateY(0deg) translateZ(60px); background-color: rgba(255, 69, 0, 0.7); border: 2px solid rgba(255, 69, 0, 0.7); }
.pmcms .back { -webkit-transform: rotateX(180deg) translateZ(60px); transform: rotateX(180deg) translateZ(60px); background-color: rgba(124, 252, 0, 0.7); border: 2px solid rgba(124, 252, 0, 0.7); }
.pmcms .left { -webkit-transform: rotateY(-90deg) translateZ(60px); transform: rotateY(-90deg) translateZ(60px); background-color: rgba(255, 215, 0, 0.7); border: 2px solid rgba(255, 215, 0, 0.7); }
.pmcms .right { -webkit-transform: rotateY(90deg) translateZ(60px); transform: rotateY(90deg) translateZ(60px); background-color: rgba(0, 191, 255, 0.7); border: 2px solid rgba(0, 191, 255, 0.7); }
.pmcms .top { -webkit-transform: rotateX(90deg) translateZ(60px); transform: rotateX(90deg) translateZ(60px); background-color: rgba(255, 0, 157, 0.7); border: 2px solid rgba(255, 0, 157, 0.7); }
.pmcms .bottom { -webkit-transform: rotateX(-90deg) translateZ(60px); transform: rotateX(-90deg) translateZ(60px); background-color: rgba(184, 111, 220, 0.7); border: 2px solid rgba(184, 111, 220, 0.7); }
@-webkit-keyframes around { 100% {
-webkit-transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
}
}
@keyframes around { 100% {
-webkit-transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
}
}
@media(max-width:768px) {
h1{ font-size:26px; padding-top:10%;}
.pmcont{ font-size:16px; padding-top:30px;}
.pmcont p{ display:inline;}
.more a { font-size:18px; }
.miscbox { left:2%; bottom:400px; }
}