*{padding:0;margin:0}
img{border:none}
a{-webkit-tap-highlight-color:rgba(255,0,0,0);}
html{width:100%;height:100%;/* overflow: hidden; */}
body{font:16px/1.8 "Microsoft Yahei",verdana;color:#fff;width:100%;height:100%;position:relative;overflow:hidden}

ul#outer{width:100%;height:200%;overflow:hidden;list-style:none;transition:all 0.5s linear;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear;position:absolute;top:0px;left:0px}
ul#outer li{width:100%;overflow:hidden;}
ul#outer li.page2{background:orange;position:relative;background:url("../img/list_bg.jpg") no-repeat;background-size: cover;background-position: 50% 50%;}
div#fixed_nav{width:100%;height: 140px;top:0;left:0;position: relative;}
ul#inner{height:70%;width:500%;list-style:none;position:absolute;transition:all 1s linear;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;-ms-transition:all 0s linear;-o-transition:all 0s linear;bottom:0px;left:0px;}
ul#inner>li{width:100%;height:200px;float:left;position:relative;overflow:hidden;}


div.artical_area{width: 100%;}
div.ltrc{position:relative;width:100%;height:40px;background: #02618d;top:20px;opacity:0.8}
div.ltrc>a{display:block;width: 23px;height: 23px;background:url('../img/back_list.png') no-repeat;position:absolute;background-size: cover;left: 25px;top: 8px;}
div.ltrc>p{color:white;width: 73px;margin: 0 auto;height: 40px;line-height: 40px;font-size: 18px;}
.page3 div.ltrc>p{width: 190px;font-size: 17px;margin-left: 76px;}
div.swipe_area{width:90%;height: 40px;position: absolute;left: 50%;margin-left: -45%;top: 74px;}
div#s_left{width: 20px;height: 30px;position:absolute;top: 5px;left: 0px;background:url('../img/arrowl.png') no-repeat;background-position: 0 0;background-size: cover;z-index: 1000;}
div#s_right{width: 20px;height: 30px;position:absolute;top: 5px;right: 0px;background:url('../img/arrowr.png') no-repeat;background-size: cover;z-index: 1000;}
div#time_line{width: 88%;position:absolute;top: 19px;left: 6%;height: 1px;background-color: rgba(255,255,255,0.4);}
div.dotted{width: 17px;height: 17px;background:url("../img/little_dot.png") no-repeat;position:absolute;top: 11px;background-size: contain;}
div.dotted#d1{left:16%;}
div.dotted#d2{left:30%;}
div.dotted#d3{left:46%;}
div.dotted#d4{left:64%;}
div.dotted#d5{left:80%;}
div#rl{width: 86px;height: 32px;position:absolute;top: 4px;left: 10%;z-index: 10000;background-color: #5594b1;border-radius: 8px;transition: left 0.2s linear;-webkit-transition: left 0.2s linear;}

div#rli{width: 17px;height: 17px;background:url("../img/rli.png") no-repeat;background-size: contain;float: left;margin-top: 7px;margin-left: 4px;}
div#rli_txt{width: 60px;float:right;font-size: 13px;height: 32px;line-height: 32px;margin-right: 2px;}
ul#inner>li>div.cover{overflow:hidden;position:absolute;bottom: 10px;left:0px;}
ul#inner>li div.artical_container{position:absolute;bottom:0px;left:5px;}

ul#inner>li div.artical_container ul{list-style:none;width: 95%;margin-top: 10px;}
ul#inner>li div.artical_container ul>li{position:relative;width:100%;margin-bottom:10px;height:60px;}
ul#inner>li div.artical_container ul>li>div.time{width: 60px;height: 60px;background:url("../img/clock.png") no-repeat;background-size:cover;float:left;margin-left:0px;overflow: hidden;position:relative;}
ul#inner>li div.artical_container ul>li>div.time>span{position:absolute;display:block;width:100%;height:20px;left:0px;bottom: 3px;color:white;text-align:center;line-height: 20px;font-size: 14px;}
ul#inner>li div.artical_container ul>li>a{display:block;height:60px;float:left;background:#6da3bc;text-decoration:none;color:white;line-height:30px;font-size:1em;overflow: hidden;padding-left: 10px;box-sizing: border-box;z-index: 1000;padding-right: 10px;font-size: 16px;}
div.signal{width:26px;height:26px;position:absolute;top:17px;right: 13px;background:url('../img/icon.png') no-repeat;background-size:cover;z-index: 999;}


/*******page1样式*******/
ul#outer li.page1{background:url('../img/p1img/1.jpg') no-repeat;background-size: cover;background-position: 50% 50%;position: relative;}
div#c0{width:100%;position: absolute;top: 50px;/* height: 60px; */}
div#c1{width:100%;position: absolute;height: 89px;top: 157px;}
#img1{width: 34%;height:auto;left: 32%;position: absolute;top: 30px;}
#img2{width: 60%;height:auto;top: 0px;left: 20%;position: absolute;}
#img3{width: 24%;left: 38%;position: absolute;display: block;bottom: -6px;}
#img4{height:auto;width: 60%;position: absolute;left: 20%;}
#img5{width: 60%;height:auto;position: absolute;bottom: 0px;left: 20%;}
#img6{width: 40%;height:auto;position: absolute;left: 30%;top: 14px;}
#img7{width: 17%;height:auto;left: 42%;position: absolute;top: 0px;display: block;}
#img8{width: 64%;height:auto;left: 18%;position: absolute;top: 0px;display: block;}
#img9{width: 64%;height:auto;left: 18%;position: absolute;top: 55px;display: block;}
#img10{width: 10%;height:auto;left: 45%;position: absolute;bottom: 0px;display: block;}
#img11{width: 40%;height:auto;left: 30%;position: absolute;bottom: 39px;display: block;}
div#c2{width:100%;position: absolute;height: 70px;top: 270px;}
div#c3{width:100%;/* position:relative; */height: 160px;margin-bo: 15px;position: absolute;top: 364px;}
ul#outer li.page1 img{opacity:0}
.a1{animation:fadeInDown 0.3s linear;-webkit-animation:fadeInDown 0.3s linear;-ms-animation:fadeInDown 0.3s linear;-o-animation:fadeInDown 0.3s linear;-moz-animation:fadeInDown 0.3s linear;}
.a2{animation:slideInLeft 0.3s linear;-webkit-animation:slideInLeft 0.3s linear;-moz-animation:slideInLeft 0.3s linear;-ms-animation:slideInLeft 0.3s linear;-o-animation:slideInLeft 0.3s linear;}
.a3{animation:slideInRight 0.3s linear;-webkit-animation:slideInRight 0.3s linear;-moz-animation:slideInRight 0.3s linear;-ms-animation:slideInRight 0.3s linear;-o-animation:slideInRight 0.3s linear;}
.a21{animation:slideInLeft 0.6s linear;-webkit-animation:slideInLeft 0.6s linear;-moz-animation:slideInLeft 0.6s linear;-ms-animation:slideInLeft 0.6s linear;-o-animation:slideInLeft 0.6s linear;}
.a31{animation:slideInRight 0.6s linear;-webkit-animation:slideInRight 0.6s linear;-moz-animation:slideInRight 0.6s linear;-ms-animation:slideInRight 0.6s linear;-o-animation:slideInRight 0.6s linear;}
.a4{animation:fadeInUp 0.7s linear;-webkit-animation:fadeInUp 0.7s linear;-moz-animation:fadeInUp 0.7s linear;-ms-animation:fadeInUp 0.7s linear;-o-animation:fadeInUp 0.7s linear;}
.a5{animation:fadeInUp 0.7s linear;-webkit-animation:fadeInUp 0.7s linear;-ms-animation:fadeInUp 0.7s linear;-moz-animation:fadeInUp 0.7s linear;-o-animation:fadeInUp 0.7s linear;}
.a6{animation:bounceIn 0.5s linear;-webkit-animation:bounceIn 0.5s linear;-moz-animation:bounceIn 0.5s linear;-ms-animation:bounceIn 0.5s linear;-o-animation:bounceIn 0.5s linear;}
.a7{animation:flash 2.5s linear infinite;-webkit-animation:flash 2.5s linear infinite;-ms-animation:flash 2.5s linear infinite;-moz-animation:flash 2.5s linear infinite;-o-animation:flash 2.5s linear infinite;}
.a8{animation:fadeInLeft 0.5s linear;-webkit-animation:fadeInLeft 0.5s linear;-moz-animation:fadeInLeft 0.5s linear;-ms-animation:fadeInLeft 0.5s linear;-o-animation:fadeInLeft 0.5s linear;}
.a9{animation:fadeInRight 0.5s linear;-webkit-animation:fadeInRight 0.5s linear;-moz-animation:fadeInRight 0.5s linear;-ms-animation:fadeInRight 0.5s linear;-o-animation:fadeInRight 0.5s linear;}
.a10{animation:flash 3.5s linear infinite;-webkit-animation:flash 3.5s linear infinite;-moz-animation:flash 3.5s linear infinite;-ms-animation:flash 3.5s linear infinite;-o-animation:flash 3.5s linear infinite;}

div#artical_show{z-index:0;position:absolute;width:100%;height:100%;overflow:hidden;background: rgba(0,0,0,0.6);opacity:0;}
img#gonext{width:23px;height:23px;position:absolute;top:8px;right:25px;transform:rotate(-180deg);-webkit-transform:rotate(-180deg)}

ul#outer li.page3{background:url('../img/p2img/p2bg.jpg') no-repeat;background-size: cover;background-position: 50% 50%;position: relative;}
ul#outer li.page3>img{display:block;/* width: 83%; */}

#img21{
    width: 62%;
    left: 19%;
    top: 75px;
    position: absolute;
}
#img22{
    width: 70%;
    left: 15%;
    top: 180px;
    position: absolute;
}
#img23{
    width: 72%;
    left: 14%;
    /* margin-top: 20px; */
    position: absolute;
    top: 288px;
}
#img24{
    width: 74%;
    left: 14%;
    /* margin-top: 20px; */
    position: absolute;
    top: 359px;
}
#img25{
    width: 10%;
    /* margin-left: 14%; */
    /* margin-top: 20px; */
    /* margin-left: 45%; */
    left: 45%;
    position: absolute;
    bottom: 30px;
}
.page4 div.ltrc>p{width: 91px;font-size: 18px;/* margin-left: 60px; */}
ul#outer li.page4{background:url('../img/p2img/p2bg.jpg') no-repeat;background-size: cover;background-position: 50% 50%;position: relative;}
ul#outer li.page4>img{display:block;/* width: 83%; */}

#img31{
    width: 90%;
    left: 5%;
    /* margin-top: 43px; */
    top: 85px;
    position: absolute;
}
#img32{
    width: 60%;
    /* margin-left: 14%; */
    /* margin-top: 20px; */
    position: absolute;
    left: 20%;
    top: 165px;
}
#img33{
    width: 56%;
    /* margin-left: 19%; */
    /* margin-top: 9px; */
    top: 383px;
    position: absolute;
    left: 22%;
}
#img34{
    width: 76%;
    /* margin-left: 12%; */
    /* margin-top: 20px; */
    left: 12%;
    position: absolute;
    top: 348px;
}
#img35{
    width: 10%;
    left: 45%;
    /* margin-top: 15px; */
    /* margin-left: 45%; */
    position: absolute;
    bottom: 30px;
}
ul#outer li.page5{background:url('../img/p1img/1.jpg') no-repeat;background-size: cover;background-position: 50% 50%;position: relative;}
ul#outer li.page5>img{display:block;}
#img50{
    width: 34%;
    /* margin-left: 30%; */
    /* margin-top: 66px; */
    left: 33%;
    position: absolute;
    top: 50px;
}
#img51{
    width: 72%;
    left: 14%;
    top: 125px;
    position: absolute;
}
#img52{
    width: 54%;
    left: 23%;
    /* margin-top: 15px; */
    position: absolute;
    top: 200px;
}
#img53{
    width: 64%;
    left: 18%;
    top: 300px;
    position: absolute;
}
#img54{
    width: 10%;
    margin-left: 14%;
    margin-top: 15px;
    margin-left: 45%;
}
#img55{
    width: 10%;
    /* margin-left: 14%; */
    /* margin-top: 15px; */
    /* margin-left: 45%; */
    bottom: 30px;
    left: 45%;
    position: absolute;
}

#img5back{width: 28px;height: 28px;position:absolute;top:30px;left:30px;}

ul#outer li.page6{background:url('../img/p1img/1.jpg') no-repeat;background-size: cover;background-position: 50% 50%;position: relative;}
ul#outer li.page6>img{display:block;}
#img60{
    width: 34%;
    left: 33%;
    top: 80px;
    position: absolute;
}
#img61{
    width: 74%;
    left: 13%;
    top: 146px;
    position: absolute;
}
div#codeblock{width: 72%;/* margin:10px auto; */height: 144px;/* background-color: red; */position: absolute;left: 14%;bottom: 40px;}
#img62{
    width: 50%;
  
    left: 25%;
    bottom: 220px;
    position: absolute;
    bottom: 139px;
}
#img63{
    width: 45%;
 
}
#img63{
    width: 45%;
    /* margin-left: 14%; */
    /* margin-top: 15px; */
    /* margin-left: 45%; */
    display: inline-b;
    position: absolute;
    width: 150px;
    left: 50%;
    bottom: 100px;
    margin-left: -75px;
}
#img64{
    width: 150px;
    /* margin-left: 14%; */
    /* margin-top: 15px; */
    /* margin-left: 45%; */
    /* display: inline-block; */
    /* right: 0px; */
    bottom: 30px;
    position: absolute;
    left: 50%;
    margin-left: -75px;
}


#img6back{width: 28px;height: 28px;position:absolute;top:30px;left:30px;}

#setsarea{position:absolute;width: 80%;height: 200px;/* background:red; */left: 10%;top: 143px;}
#setsarea>img{width:100%;margin-bottom: 3px;}
#img36{position:absolute;top: 363px;width: 66%;left: 17%;}