@charset "gbk";
/*common*/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, blockquote, pre, form, input, textarea, fieldset, table, th, td{margin:0;padding:0;}
html{height:100%;}
body, button, input, select, textarea{font:12px/1.5 "宋体", sans-serif; overflow: hidden;}
body{background:#f3f3f3;}
ul, ol{list-style:none;}
img{border:none;vertical-align:top;}
:focus{outline:0;}

/*float*/
.f-l{float:left;}
.f-r{float:right;}
.c-b{clear:both;}
.clear{clear:both;height:0;font-size:0;overflow:hidden;}
.clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{clear:both;zoom:1;}
.v-a-m{vertical-align:middle;}

/*font*/
h1{font-size:18px;}
h2{font-size:16px;}
h3{font-size:14px;}
h4, h5, h6{font-size:100%;}
.f-w-b{font-weight:bold;}
.f-w-n{font-weight:normal;}
.black{color:#000;}
.red{color:#f00;}
.gray{color:#999;}
.t-a-l{text-align:left;}
.t-a-c{text-align:center;}
.t-a-r{text-align:right;}
.t-d-u{text-decoration:underline;}
.f-s-12{font-size:12px;}
.f-s-14{font-size:14px;}

/*link*/
a{color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}

/*table*/
table{border-collapse:collapse;border-spacing:0;}

/*layout*/
.m-b-10{margin-bottom:10px;}
.m-a{margin:0 auto;}

/* 背影漂浮 */
.item1{position:absolute; width:189px; height:44px; left:244px; top:352px; background:url('../images/item1.png') no-repeat; z-index: 2;}
.item2{position:absolute; width:189px; height:44px; left:442px; top:477px; background:url('../images/item2.png') no-repeat; z-index: 2;}
.item3{width:10px; height: 10px; border:2px solid #bdbdbd; position:absolute; top:414px; left:1192px; z-index: 2;}
.item4{position:absolute; width:11px; height:11px; left:443px; top:591px; background:url('../images/item4.png') no-repeat; z-index: 2;}
.item5{position:absolute; width:189px; height:44px; left:688px; top:161px; background:url('../images/item5.png') no-repeat; z-index: 2;}
.item6{position:absolute; width:90px; height:90px; left:545px; top:353px; background:url('../images/item6.png') no-repeat; z-index: 2;}
.item7{position:absolute; width:189px; height:44px; left:1256px; top:753px; background:url('../images/item7.png') no-repeat; z-index: 2;}
.item8{position:absolute; width:230px; height:75px; left:1136px; top:543px; background:url('../images/item8.png') no-repeat; z-index: 2;}
.item9{position:absolute; width:283px; height:76px; left:1306px; top:621px; background:url('../images/item9.png') no-repeat; z-index: 2;}

/* 外层 */
.container{ width: 603px; position: relative; margin:8% auto 0;} 
.boxBj{ background:url('../images/bj.png') no-repeat center; background-size: 100% auto;  margin:0 auto; position: absolute; left:-100%; right:-100%; bottom:-100%; top:-100%;}
.container h1{font-size:16px; text-align:
     center; color:#333; line-height: 18px; margin-top:12%;}
/*box*/
.boxWarp{padding:0 8px; width:550px; margin:26px 0 0 30px;}
.box{width:564px;height:52px;position: relative; background:url('../images/sroll_bj.png') no-repeat; border-radius:25px; overflow: hidden;}
.box .loading{width:542px;height:44px; margin-top:4px; margin-left:4px; border-radius:25px;overflow: hidden; position: relative;}
.box .loading .spot{ width:10px; height: 10px; display: block; float:left; margin-top:17px; margin-left:20px; background:url('../images/spot.png') no-repeat center;}
.box .loading .srollWarp{width:100%; display:-none; position:absolute; }
.box .loading .srollWarp .markLeft{ position:absolute; bottom:0px; width: 100%; height: 33px; z-index:10}
.box .loading .srollWarp .markLeft p{ position:absolute; bottom:0px; width: 100%; height: 33px; z-index:11}
.box .loading .srollWarp .markLeft img{position: absolute;}

.box .loading .srollWarp .markLeft .mark1{
     position: absolute; 
     right:0;
     bottom:0;
     animation-name:myLeft;
     animation-duration:20s;
     animation-timing-function:linear;
     animation-iteration-count:infinite;
     animation-direction:normal;
     animation-play-state:running;
     
     -webkit-animation-name:myLeft;
     -webkit-animation-duration:20s;
     -webkit-animation-timing-function:linear;
     -webkit-animation-iteration-count:infinite;
     -webkit-animation-direction:normal;
     -webkit-animation-play-state:running;
     
     -moz-animation-name:myLeft;
     -moz-animation-duration:20s;
     -moz-animation-timing-function:linear;
     -moz-animation-iteration-count:infinite;
     -moz-animation-direction:normal;
     -moz-animation-play-state:running;

     -o-animation-name:myLeft;
     -o-animation-duration:20s;
     -o-animation-timing-function:linear;
     -o-animation-iteration-count:infinite;
     -o-animation-direction:normal;
     -o-animation-play-state:running;
 }
 
 .box .loading .srollWarp .markLeft .mark2{
     position: absolute; 
     left:0;
     bottom:0;
     animation-name:myRight;
     animation-duration:30s;
     animation-timing-function:linear;
     animation-iteration-count:infinite;
     animation-direction:normal;
     animation-play-state:running;

     -webkit-animation-name:myRight;
     -webkit-animation-duration:30s;
     -webkit-animation-timing-function:linear;
     -webkit-animation-iteration-count:infinite;
     -webkit-animation-direction:normal;
     -webkit-animation-play-state:running;

     -moz-animation-name:myRight;
     -moz-animation-duration:30s;
     -moz-animation-timing-function:linear;
     -moz-animation-iteration-count:infinite;
     -moz-animation-direction:normal;
     -moz-animation-play-state:running;

     -o-animation-name:myRight;
     -o-animation-duration:30s;
     -o-animation-timing-function:linear;
     -o-animation-iteration-count:infinite;
     -o-animation-direction:normal;
     -o-animation-play-state:running;
 }


@keyframes myLeft
{
    0%   {right:0}
    50%  {right:-150%}
    100% {right:-300%}
}

@-webkit-keyframes myLeft
{
    0%   {right:0}
    50%  {right:-150%}
    100% {right:-300%}
}

@-moz-keyframes myLeft
{
    0%   {right:0}
    50%  {right:-150%}
    100% {right:-300%}
}

@-o-keyframes myLeft
{
    0%   {right:0}
    50%  {right:-150%}
    100% {right:-300%}
}

@keyframes myRight
{
    0%   {left:0}
    25%  {left:-75%}
    50%  {left:-150%}
    75% {left:-250%}
    100% {left:-300%}
}
@-webkit-keyframes myRight
{
    0%   {left:0}
    25%  {left:-75%}
    50%  {left:-150%}
    75% {left:-250%}
    100% {left:-300%}
}
@-moz-keyframes myRight
{
    0%   {left:0}
    25%  {left:-75%}
    50%  {left:-150%}
    75% {left:-250%}
    100% {left:-300%}
}
@-o-keyframes myRight
{
    0%   {left:0}
    25%  {left:-75%}
    50%  {left:-150%}
    75% {left:-250%}
    100% {left:-300%}
}


.box .loading .in{height:44px; float:left; position:relative; background: url('../images/img_bj2.png') repeat-x;}
.box .loading .radiusBj{float:left; width: 22px; height:44px; background:  url('../images/leftRadius.png') no-repeat;}
.box .loading .gifBox{background: url('../images/gif_icon.gif') no-repeat; height: 44px; width:44px; float:left}
.percent{font-family:Tahoma;font-size:20px; color: #2d9dff; font-weight: bolder; position: relative; top:17px; margin: auto; text-align: center;}

.img-box{margin:51px auto 0; position: relative; width:570px; height: 300px; padding:0 30px 30px 30px;  background:url('../images/img_bj.png') no-repeat; background-position: center;}
.img-box a{margin-left:20px;}
.img-box img{width: 550px; height: 280px;}  

.hide{display: none;}