@charset "utf-8";
html,body{width:100%;height:100%;margin:0;padding:0;background:#f8f8f8;overflow:hidden}
.satic-area{position:relative;width:100%;height:40%;background:url(../images/404-bg-01.jpg) no-repeat center bottom;background-size:cover;border-bottom:1px solid #188cc1}
.dynamic-area1{position:absolute;width:100%;height:100%;top:0;left:0;background:url(../images/404-01-02.png) repeat-x 0px 0px;background-size:contain;animation:posterDrop1 6000s linear infinite}

@keyframes posterDrop1{from{background-position:0 0}
to{background-position:4000% 100%}
}.dynamic-area2{position:absolute;width:100%;height:100%;top:0;left:0;background:url(../images/404-01-01.png) repeat-x 0px 0px;background-size:contain;animation:posterDrop2 8000s linear infinite}
@media screen and (max-width:800px){.dynamic-area2,.dynamic-area1{background-size:cover}
}@keyframes posterDrop2{from{background-position:0 0}
to{background-position:30000% 100%}
}

.error-404{ width:800px; height:100px; position:absolute; left:50%; margin-left:-400px; top:50%; margin-top:-70px; text-align:center; line-height:100px; overflow:hidden; font-size:50px; font-weight:bolder; color:#0684e5;color: transparent;-webkit-text-stroke: 1.5px #0684e5;text-shadow:2px 2px 5px #ccc;}
@media screen and (max-width: 560px) {
	 .error-404{ font-size:36px;}
}
@media screen and (max-width: 500px) {
	 .error-404{ font-size:30px;}
}
@media screen and (max-width: 375px) {
	 .error-404{ font-size:26px;}
}
@media screen and (max-width: 320px) {
	 .error-404{ font-size:20px;}
}
.error-tips{ width:400px; margin:15px auto 0 auto; padding:0px 10px; box-sizing:border-box;}
.error-tips p{ font-size:12px; color:#999; line-height:20px; font-family:"微软雅黑"; line-height:20px; margin:0px; padding:5px 0;}
.error-tips p a{ color:#f00; text-decoration:underline;}
.error-tips p a:hover{ color:#c00;}




.error-404-warp{margin: 0 auto;width: 100%;height: 40%;background-color: #000;position: relative;}
.error-404-warp canvas{width: 100%;height: 100%
/*默认全屏显示 可自己设置高度640px*/
;display: inline-block;vertical-align: baselineposition: absolute;z-index: -1;}
.error-404-warp .canvaszz{/*用来解决视频右键菜单，用于视频上面的遮罩层*/width: 100%;background-image: url(../images/404-bg-02.jpg);height: 100%;position: absolute;z-index: 10;filter: alpha(opacity=40);-moz-opacity: 0.4;-khtml-opacity: 0.4;opacity: 0.4;}