html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}
a{text-decoration: none;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],template {
    display: none
}

a {
    background-color: transparent
}

a:active,a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,kbd,pre,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],input[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

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

td,th {
    padding: 0
}

.clearfix:after,.clearfix:before {
    display: table;
    content: '';
    line-height: 0
}

.clearfix:after {
    clear: both
}

.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

html {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    word-break: break-all;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    color: #333;
    background: #f3f3f3;
    vertical-align: baseline;
    overflow-x: hidden
    
}
#demoCanvas{margin:0 auto 0;display: block;
    width: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}
ol,ul{list-style:none;}
body,button,h1,h2,h3,input,ol,pre,select,textarea,ul,p {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color:#888;
}
html, body { width: 100%; height: 100%; overflow: hidden; }
.container { width: 100%; height: 100%; position: absolute; left: 0; top: 0%; }
.container .section{height: 100%; position: relative; overflow: hidden;}
.down{position: absolute; bottom: 16px; left: 50%; margin-left: -11px; width: 23px; height: 12px; background:url(images/arrow.png) no-repeat; background-size: contain;}

/*page1*/
.page1 {background: url(images/h5bj.jpg) no-repeat; background-size:cover;}
.page1 .pagediv{top: 3%; padding: 0 4%; position: absolute;} 
.page1 .videodiv{width: 100%; height: 175px; overflow: hidden; margin-bottom: 3%;}
.main{border-radius: 4px; background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.05);}
.maintit{width: 100%; height: 39px;  text-align: center; color: #fff; font-size: 18px; border-top-left-radius: 4px; border-top-right-radius: 4px; padding-bottom: 6px; position: relative;}
.maintit span{display: block; width: 100%; height: 39px; background-color: #fd3939; border-top-left-radius: 4px; border-top-right-radius: 4px; line-height: 40px;}
.maintit i{display: block; width: 11px; height: 11px; position: absolute; bottom: 0; left: 50%; margin-left: -5px; background-color: #fd3939; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.page1 .miancon{padding: 10px 10px 0; position: relative;}
.page1 .miancon .pwarp{  height: 289px; overflow: hidden;}
.page1 .miancon p{ line-height: 25px; font-size: 16px; color: #888888; text-indent: 32px; margin-bottom: 10px;}
.page1 .miancon .botm{ border-top:1px solid #eaeaea; height: 24px; font-size: 14px; line-height: 22px; padding: 10px 0; margin-top: 10px;}
.page1 .miancon .botm div:nth-of-type(1){float: left; overflow: hidden; height: 100%;}
.page1 .miancon .botm div:nth-of-type(2){float: right; overflow: hidden; height: 100%;}

/*page2*/
.page2 .pagediv{padding: 4% 4% 0;}
/*图片轮播*/
div[class^='ScrollPic']{ width: 100%; height:auto; position:relative; overflow:hidden; -webkit-user-select:none; border: none; margin-bottom: 0;}
.Scroll{position: absolute;left: 0;top: 0;width:100000px;-webkit-user-select:none;}
.Scroll li{ width:100%; height:100%; float:left; position:relative;-webkit-user-select:none;}
.Scroll li b{display: block;position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); color: #fff; font-size: 15px; text-indent: 10px; line-height: 30px; height: 30px; width: 100%; font-weight: normal;}
.Scroll li img{ display:block;width:100%;height:100%;}
.Scroll li a{display: block; width: 100%; height: 100%;}
.ScrollThumb{position: absolute; width: 100%; height: 25px; text-align: right; bottom: 0; left: 0; padding: 5px 0 0;}
.ScrollThumb span{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #ffffff; margin-right: 10px;}
.ScrollThumb .selected{background-color: #fd3939;}
.scrolltit{height: 10%; text-align: center; padding: 0 4%; overflow: hidden;}
.scrolltit h1{padding: 3% 0; line-height: 24px;  font-size: 18px;}
.scrollbg{width: 180px; height: 50px; background:url(images/guide.png) no-repeat rgba(0,0,0,.65); background-size: contain; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -90px; border-radius: 10px; color: #ffffff; padding: 20px 0; text-align: center; line-height: 25px; font-size: 15px; opacity: 0;}
.active .scrollbg{animation: op 0.5s linear 1s both; -webkit-animation: op 0.5s linear 1s both;}
#ScrollThumb2{display: none;}
/*评分*/
.rangediv{padding: 5px 10px; background-color: #fff; border-radius:0 0 2px 2px/ 0 0 2px 2px; border-bottom: 1px solid rgba(0,0,0,0.05); position: relative;}
.rangediv .rangebox{width: 164px; height: 27px; line-height: 27px;}
.rangediv .rangebox span{font-size: 15px;}
.rangediv .rangebox b{display: inline-block; width: 13px; height: 12px; margin-left: 6px;}
.rangediv .rangebox em{display: inline-block; width: 6px; height: 12px; background:url(http://www.sinaimg.cn/gm/2015/0703/U11730P115DT20150703145840.png) no-repeat; background-size: 13px 24px;}
.rangediv .rangebox em:nth-of-type(2){background-position: -6px 0; width: 7px;}
.rangediv .rangebox em:nth-of-type(1).over{background-position: 0px -12px;}
.rangediv .rangebox em:nth-of-type(2).over{background-position: -6px -12px;}
.svgdiv{position: absolute; width: 80px; height: 117px; right: 15px; top: 17px;}
.evaluate{font-size: 15px; text-align: center; margin: 4px 0 0; border-top:1px solid #eaeaea; line-height: 27px; }
.evaluate span{display: inline-block; padding: 0 10px; line-height: 25px; height: 25px; border-radius: 12px; overflow: hidden; color: #fff; margin:4px 5px 0 0; font-size: 14px;}
.evaluate span:nth-of-type(1){background-color:#ff8b62;}
.evaluate span:nth-of-type(2){background-color:#c299fb;}
.evaluate span:nth-of-type(3){background-color:#ffbc53;}
.evaluate span:nth-of-type(4){background-color:#6cd47d;}
.downloadbtn{/*display: box; display: -webkit-box; display: flex; display: -webkit-flex; justify-content:space-between; -webkit-justify-content:space-between; */width:100%; margin-top: 16px; height: 38px;}
.downloadbtn a{display: block; width: 145px; height: 38px; line-height: 38px; text-indent: 38px; font-size: 16px; color: #fff; border-radius: 4px; position: relative; }
.downloadbtn a:nth-of-type(1){background-color:#35aafc; text-indent: 52px; float: left;}
.downloadbtn a:nth-of-type(2){background-color:#2cdc6e; float: right;}
.downloadbtn a:nth-of-type(1) i{left: 25px;}
.downloadbtn i{width: 20px; height: 15px; position: absolute; background:url(images/sprite.png) no-repeat -39px -41px; background-size: 56px 100px; left: 15px; top: 10px;}
.lookmore{font-size: 14px; line-height: 27px; text-align: center; margin-top: 8px;}
.lookmore a{color: #888;}

.page4{background: url(http://www.sinaimg.cn/gm/2015/0703/U11730P115DT20150703145839.png) no-repeat top center; background-size:contain;}
.bgtop{height: 18%;}
.listcon{padding: 0 4%;} 
.page4 .miancon{/*-webkit-flex-wrap:wrap; flex-wrap:wrap;*/ margin-top: 10px; }
.page4 ul{display: box; display: -webkit-box; display: flex; display:-webkit-flex; width: 100%;}
.page4 ul li{height: 99px;box-flex:1; -webkit-box-flex:1; flex:1; -webkit-flex:1;}
.page4 ul li .conbox{width: 129px; height: 60px; margin: 0 auto;}
.page4 ul li .conbox img{display: block; width: 60px; height: 60px; border-radius: 10px; float: left;}
.page4 ul li .conbox a[class^='gbtn']{width: 56px; height: 21px; border-radius: 4px; border:1px solid #9ad4fd; display: block; float: right; line-height: 21px; color: #35aafc; text-indent: 12px; background:url(images/sprite.png) no-repeat 43px 0; background-size: 56px 100px; }
.page4 ul li .conbox a.gbtn-ios{margin-bottom: 12px; }
.page4 ul li .conbox a.gbtn-android{border-color:#95edb6; color: #2cdc6e; background-position: 43px -21px;}
.page4 ul li .conbox p{padding: 6px 0 0; line-height: 22px; height: 22px; font-size: 15px; color: #888888; float: left; width: 100%;}
/*page4*/
.addiv{width: 100%; overflow: hidden;}
.addiv img{width: 100%; height: 100%;}
.d97973{padding: 0 4%; height: 38px;  text-align: center; font-size: 16px; line-height: 38px; margin-top: 50px;}
.d97973 a{display: block; width: 100%; height: 100%; color: #fff; background-color: #fd3939; border-radius: 4px;}
/*---- slidedown ----*/
.slidedown{ display: block; width: 64px; height: 64px; border-radius: 50%; background-color: rgba(0,0,0,0.13); position: absolute; left: 50%; margin-left: -32px; bottom: -32px;}
.active .slidedown{ -webkit-animation: slideInUp 1.5s both; animation: slideInUp 1.5s both;}
.slidedown i{ display: block; width: 24px; height: 13px; position: absolute; left: 50%; margin-left: -12px; top: 12px; background: url(images/slidedown.png) no-repeat; background-size: 100%;}
.slidedown i{ -webkit-animation: sd 1.5s ease-in-out infinite; animation: sd 1.5s ease-in-out infinite;}
@-webkit-keyframes sd {
    0%,30% {
        opacity: 0;
        -webkit-transform: translate(0,10px);
    }60% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }100% {
        opacity: 0;
        -webkit-transform: translate(0,-5px);
    }
}
@keyframes sd {
    0%,30% {
        opacity: 0;
        transform: translate(0,10px);
    }60% {
        opacity: 1;
        transform: translate(0,0);
    }100% {
        opacity: 0;
        transform: translate(0,-5px);
    }
}


@-webkit-keyframes op {
    0%{
        opacity: 1; 
    }
    100%{
        opacity: 0; 
        z-index: -1;
    }
}
@keyframes op {
    0%{
        opacity: 1; 
    }
    100%{
        opacity: 0; 
        z-index: -1;
    }
}
@media screen and (max-height:420px) {
   .d97973{margin-top: 13px;}
   .page1 .miancon .pwarp{height: 100px;}
   .ScrollPic2 .ScrollThumb{bottom: 10%;}
   .downloadbtn{margin-top: 8px;}
}
@media screen and (min-height:421px) and (max-height:520px) {
   .page1 .miancon .pwarp{height: 150px;}
   .page4 .last{display: none;}
}
@media screen and (max-height:540px) {
    .scrolltit{display: none;}
}
@media screen and (min-height:521px) and (max-height:600px) {
    .page1 .miancon .pwarp{  height: 175px;}

}
@media screen and (min-height:568px){
    .evaluate{margin: 5% 0 0; padding: 3% 0 0;}
    .evaluate span{margin-top: 4%;}
    .downloadbtn{margin-top: 10%;}
    .lookmore{margin-top: 5%;}
    .rangediv{padding: 5% 10px;}
    .page2 .pagediv{padding-top: 8%;}
}
@media screen and (min-height: 676px){
    .page4 ul li{height: 111px;}
}
@media screen and (min-height: 736px) {
.page1 .pagediv{top: 8%;}
.page1 .videodiv{margin-bottom: 8%;}
}