@charset "UTF-8";
html {
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased !important;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
body, button, input, select, textarea {
font: 12px/1 "Microsoft YaHei","微软雅黑","arial","tahoma","MicrosoftJhengHei";
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased !important; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
img {
border: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
.btn {
min-width: 60px;
margin-right: 20px;
display: inline-block;
border-radius: 50px;
padding: 11px 16px;
font-size: 13px;
color: #609EE9;
text-decoration: none;
text-align: center;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.btn.btn-info {
border: 1px #609EE9 solid;
background-color: #609EE9;
color: #FFF;
}
.btn.btn-info.outline {
border: 1px #609EE9 solid;
background-color: transparent;
color: #609EE9;
}
.btn.btn-info:hover {
border-color: #478BE1;
background-color: #478BE1;
color: #FFF;
}
/*低浏览器升级提示*/
.webkit-body {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -180px;
}
.webkit-body .page-title {
width: 500px;
margin: 0 auto;
height: auto;
text-align: center;
}
.webkit-body .page-title .page-top {
color: #4A4A4A;
font-size: 30px;
}
.webkit-body .page-title .page-info {
margin-top: 18px;
line-height: 24px;
font-size: 14px;
color: #999;
}
.webkit-body .content-text {
margin: 0 auto;
width: 720px;
height: auto;
font-size: 14px;
color: #666;
line-height: 1.5;
text-align: left;
text-indent: 2em
}
.webkit-body .webkit-box {
width: 720px;
margin: 50px auto;
overflow: hidden
}
.webkit-body .webkit-box .webkit-item {
display: inline;
width: 180px;
text-align: center;
float: left
}
.webkit-body .webkit-box .webkit-item .webkit-link {
display: block;
width: 100%;
height: 100%;
color: #404040;
text-decoration: none;
font-family: "arial";
}
.webkit-body .webkit-box .webkit-item .webkit-link img {
height: 60px;
width: auto;
vertical-align: top
}
.webkit-body .webkit-box .webkit-item .webkit-link span {
margin-top: 15px;
display: block;
text-align: center;
font-size: 12px
}
.webkit-body .webkit-box .webkit-item .webkit-link:hover {
color: #609EE9
}
/*访问拒绝页*/
.re-box {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -200px;
}
.re-box .re-boxin {
width: 500px;
margin: 0 auto;
}
.re-box .re-boxin .re-img {
text-align: center;
}
.re-box .re-boxin .re-img img {
width: 120px;
height: auto;
margin: 0 auto;
-webkit-animation: balloon1 4s ease-in-out infinite;
-moz-animation: balloon1 4s ease-in-out infinite;
-o-animation: balloon1 4s ease-in-out infinite;
animation: balloon1 4s ease-in-out infinite;
}
.re-box .re-boxin .re-title {
margin-top: 18px;
font-size: 18px;
color: #4A4A4A;
text-align: center;
}
.re-box .re-boxin .re-info {
text-align: center;
padding-top: 24px;
}
@media screen and (max-width: 768px) {
/*访问拒绝页*/
.re-box {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -200px;
}
.re-box .re-boxin {
width: 100%;
margin: 0 auto;
}
.re-box .re-boxin .re-img {
text-align: center;
}
.re-box .re-boxin .re-img img {
width: 94px;
height: auto;
margin: 0 auto;
-webkit-animation: balloon1 5s ease-in-out infinite;
-moz-animation: balloon1 5s ease-in-out infinite;
-o-animation: balloon1 5s ease-in-out infinite;
animation: balloon1 5s ease-in-out infinite;
}
.re-box .re-boxin .re-title {
margin-top: 18px;
font-size: 16px;
color: #999;
text-align: center;
}
.re-box .re-boxin .re-info {
text-align: center;
padding-top: 24px;
}
.re-box .re-boxin .re-info .btn {
display: block;
width: 250px;
padding: 14px 0;
font-size: 16px;
margin: 0 auto;
margin-bottom: 12px;
}
}
/*404*/
.error-404 {
position: absolute;
top: 50%;
left: 80px;
right: 0;
margin-top: -260px;
}
.error-404 .error-in {
text-align: center;
}
.error-404 .errorin-top {
width: 500px;
margin: 0 auto 30px auto;
text-align: left;
}
.error-404 .errorin-top img {
text-align: left;
}
.error-404 .errorin-middle {
width: 500px;
margin: 0 auto;
text-align: left;
font-size: 36px;
color: #4A4A4A;
}
.error-404 .errorin-middle img {
position: relative;
margin-left: -20px;
top: -75px;
right: 0;
-webkit-animation: balloon2 4s ease-in-out infinite;
-moz-animation: balloon2 4s ease-in-out infinite;
-o-animation: balloon2 4s ease-in-out infinite;
animation: balloon2 4s ease-in-out infinite;
}
.error-404 .errorin-info {
width: 500px;
font-size: 16px;
margin: -60px auto 30px auto;
color: #AAA;
text-align: left;
}
.error-404 .errorin-bottom {
width: 500px;
margin: 0 auto;
text-align: left;
}
.error-404 .errorin-bottom img {
text-align: left;
}
.error-404 .errorin-do {
text-align: left;
padding-top: 18px;
}
@media screen and (max-width: 768px) {
/*404*/
.error-404 {
width: 100%;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -200px;
}
.error-404 .error-in {
text-align: center;
}
.error-404 .errorin-top {
display: none;
}
.error-404 .errorin-middle {
position: relative;
width: 100%;
margin: 0 auto;
padding-top: 240px;
text-align: center;
font-size: 18px;
color: #666;
}
.error-404 .errorin-middle img {
position: absolute;
left: 50%;
margin-left: -60px;
top: 30px;
width: 120px;
-webkit-animation: balloon2 4s ease-in-out infinite;
-moz-animation: balloon2 4s ease-in-out infinite;
-o-animation: balloon2 4s ease-in-out infinite;
animation: balloon2 4s ease-in-out infinite;
}
.error-404 .errorin-info {
width: 100%;
font-size: 14px;
margin: 12px auto;
color: #AAA;
text-align: center;
}
.error-404 .errorin-bottom {
width: 100%;
position: relative;
top: -190px;
text-align: center;
}
.error-404 .errorin-bottom img {
width: 100px;
height: auto;
text-align: center;
}
.error-404 .errorin-do {
text-align: center;
padding-top: 18px;
}
.error-404 .errorin-do .btn {
display: block;
width: 250px;
padding: 14px 0;
font-size: 16px;
margin: 0 auto;
margin-bottom: 12px;
}
}
/*访问的站点不存在*/
.siteno-box {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -200px;
}
.siteno-box .siteno-boxin {
width: 500px;
margin: 0 auto;
}
.siteno-box .siteno-boxin .siteno-img {
text-align: center;
}
.siteno-box .siteno-boxin .siteno-img img {
width: 348px;
height: auto;
margin: 0 auto;
margin-right:-50px;
-webkit-animation: balloon3 4s ease-in-out infinite;
-moz-animation: balloon3 4s ease-in-out infinite;
-o-animation: balloon3 4s ease-in-out infinite;
animation: balloon3 4s ease-in-out infinite;
}
.siteno-box .siteno-boxin .siteno-title {
margin-top: 30px;
font-size: 24px;
color: #4A4A4A;
text-align: center;
}
.siteno-box .siteno-boxin .siteno-info {
text-align: center;
padding-top: 24px;
font-size: 16px;
color: #AAA;
line-height:24px;
}
.siteno-box .siteno-boxin .siteno-qq {
padding-top: 16px;
text-align:center;
}
.siteno-box .siteno-boxin .siteno-tel {
font-size: 14px;
padding-top: 16px;
text-align: center;
color: #4a4a4a;
}
@media screen and (max-width: 768px) {
/*访问的站点不存在*/
.siteno-box {
position: absolute;
top: 50%;
left: 16px;
right: 16px;
margin-top: -140px;
}
.siteno-box .siteno-boxin {
width: 100%;
margin: 0 auto;
text-align: center;
}
.siteno-box .siteno-boxin .siteno-img {
text-align: center;
}
.siteno-box .siteno-boxin .siteno-img img {
width: 226px;
height: auto;
margin: 0 auto;
margin-right:-50px;
-webkit-animation: balloon3 4s ease-in-out infinite;
-moz-animation: balloon3 4s ease-in-out infinite;
-o-animation: balloon3 4s ease-in-out infinite;
animation: balloon3 4s ease-in-out infinite;
}
.siteno-box .siteno-boxin .siteno-title {
display: inline-block;
text-align: center;
margin-top: 30px;
font-size: 16px;
color: #777;
text-align: center;
}
.siteno-box .siteno-boxin .siteno-info {
display: inline;
text-align: center;
padding-top: 24px;
font-size: 16px;
color: #777;
}
}
/* balloon1*/
@-webkit-keyframes balloon1 {
0%, 100% {
-webkit-transform: translateY(0) rotate(-2deg);
}
50% {
-webkit-transform: translateY(-8px) rotate(2deg);
}
}
@-moz-keyframes balloon1 {
0%, 100% {
-moz-transform: translateY(0) rotate(-2deg);
}
50% {
-moz-transform: translateY(-8px) rotate(2deg);
}
}
@-o-keyframes balloon1 {
0%, 100% {
-o-transform: translateY(0) rotate(-2deg);
}
50% {
-o-transform: translateY(-8px) rotate(2deg);
}
}
@keyframes balloon1 {
0%, 100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-8px) rotate(2deg);
}
}
/* balloon2*/
@-webkit-keyframes balloon2 {
0%, 100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-8px);
}
}
@-moz-keyframes balloon2 {
0%, 100% {
-moz-transform: translateY(0);
}
50% {
-moz-transform: translateY(-8px);
}
}
@-o-keyframes balloon2 {
0%, 100% {
-o-transform: translateY(0);
}
50% {
-o-transform: translateY(-8px);
}
}
@keyframes balloon2 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* balloon3*/
@-webkit-keyframes balloon3 {
0%, 100% {
-webkit-transform: translateX(3px);
}
50% {
-webkit-transform: translateX(-6px);
}
}
@-moz-keyframes balloon3 {
0%, 100% {
-moz-transform: translateX(3px);
}
50% {
-moz-transform: translateX(-6px);
}
}
@-o-keyframes balloon3 {
0%, 100% {
-o-transform: translateX(3px);
}
50% {
-o-transform: translateX(-6px);
}
}
@keyframes balloon3 {
0%, 100% {
transform: translateX(3px);
}
50% {
transform: translateX(-6px);
}
}