﻿@charset "utf-8";
/* CSS Document */
*{-webkit-text-size-adjust:100%; font-size:28px; outline:none; font-family:"Microsoft YaHei"; margin:0; padding:0;}
*:focus{ outline:none;}
body, button, input, select, textarea { font-size: 100%; margin:0 auto; font-family:"微软雅黑";}
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
fieldset, img { border: 0; vertical-align: top;}
q:before, q:after { content: ''; }
input, textarea { outline-style: none; font-size:100%;}
input[type="text"], input[type="password"] {vertical-align:middle; }
input[type="text"], input[type="password"], textarea { outline-style: none; -webkit-appearance: none; }
textarea { resize: none;  font-size:100%;}
address, caption, cite, code, dfn, em, i, th, var { font-style: normal; font-weight: normal; }
strong,b{font-weight: normal;}
abbr, acronym { border: 0; font-variant: normal;}
ul{ list-style:none; overflow:hidden;}
a{ outline:none; text-decoration:none; display:inline-block; border:none; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}
body{ background: #c1e2ee;}
body,html{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden;}

/*公用样式*/
.wrapBox{ width:100%; max-width:750px; height: 100%; margin:0 auto; position:relative; display:block;}
.wrapBox img{ width:100%;}
.bg{ width: 100%; height: 100%;}
.bg img{ height: 100%;}
.top_box{ width: 100%; height: auto; position: absolute; top: 27px; left: 0;}
.top_box img{ width: 722px;}
.bottom_box{ width: 100%; height: auto; position: absolute; bottom: 0; left: 0;}

.loading_ring{ width: 302px; height: 302px; position: absolute; top: 398px; left: 222px;}
.loading_ring .ring_part1{ width: 61px; height: 0px; overflow: hidden; position: absolute; top: 102px; right: 1px;}
.loading_ring .ring_part2{ width: 0px; height: 67px; overflow: hidden; position: absolute; bottom: 1px; right: 61px;}
.loading_ring .ring_part2 img{ width: auto; height: 100%; float: right;}
.loading_ring .ring_part3{ width: 50px; height: auto; overflow: hidden; position: absolute; top: 40px; left: 1px;}
.loading_ring .ring_part3_con{ width: 50px; height: auto; overflow: hidden;}
.loading_ring .ring_part4{ width: 243px; height: auto; position: absolute; top: 0px; left: 50px;}
.loading_ring .ring_part4_con{ width: 243px; height: auto; overflow: hidden; position: absolute; top: 0px; right: 10px;}
.loading_ring .ring_part4_con img{ width: auto; height: 100%; float: left;}
.people_box{ width: 350px; height: 450px; position: absolute; bottom: 0; left: 200px; overflow: hidden;}
.people_box .people_move{ width: 100%; height: auto; position: absolute; top: -100px; left: 0;}

.loading_photo{ width: 549px; height: auto; position: absolute; top: 393px; left: 110px;}
.loading_photo .phone_icon{ width: 196px; height: auto; position: absolute; top: 50px; left: 173px;}
.light_box2{ width: 750px; height: auto; position: absolute; bottom: 0; left: 0;}
.loading_num{ width: 100%; height: auto; position: absolute; top: 716px; left: 0; text-align: center; font-size: 42px; color: #1f8fc8;}

.test_btn{ display: none; width: 50px; height: 50px; position: absolute; left: 20px; bottom: 20px; background: #000;}

.end_show{ display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10;}
.end_show .end_top_img{ width: 100%; height: auto; position: absolute; top: 0; left: 0;}
.end_show .end_bottom_img{ width: 100%; height: auto; position: absolute; bottom: 0; left: 0;}

/*旋转出*/
@-webkit-keyframes showShake {
    0{ -webkit-transform:rotate(0deg);}
    25%{ -webkit-transform:rotate(25deg);}
    50%{ -webkit-transform:rotate(0deg);}
    75%{ -webkit-transform:rotate(-25deg);}
    100%{ -webkit-transform:rotate(0deg);}
}
@-moz-keyframes showShake { 
    0{ transform:rotate(0deg);}
    25%{ transform:rotate(25deg);}
    50%{ transform:rotate(0deg);}
    75%{ transform:rotate(-25deg);}
    100%{ transform:rotate(0deg);}
}
.showShake{ animation: showShake 1s infinite both; -webkit-animation: showShake 1s infinite both; /*animation-play-state: paused;-webkit-animation-play-state: paused;*/}
