html{ font-size:62.5%;}
body,ul,li,p,h1,h2,h3,h4,h5,dt,dd,dl{margin:0;padding:0;font-family:Microsoft YaHei;}
body{ background:#ffffff;}
a {font-family:Microsoft YaHei;text-decoration:none;}
img {border:0;}
ul,li{list-style:none;}

/*header banner*/
header{ width:100%; background:#fff;}
img.logo{ width:100%; margin:0 auto; padding:1rem 0;}
img.banner { width:100%;  margin:0 auto;}


/*container*/
section.container{ width:100%; margin:0 auto; margin:0; padding:0;}
.section1{ width:100%; background:url(../images/bg.jpg) no-repeat; background-position:center;  background-size:150%; padding-top:0.2rem;clear:both;}

figure.center{ margin:0.5rem auto;  }

.l-left{ width:28%; display:inline-block; }
img.cphone{ width:100%;}
.r-right{ width:71%; float:right;}
.r-top{ padding:1rem; z-index:5;background-color:rgba(0, 0, 0, 0.7); margin-top:2rem;}
.t1{ font-size:2rem; line-height:3rem; color:#FFF; font-style:oblique; font-family:"微软雅黑"; font-weight:normal;}
.t1 span{color:#04a6e8; font-size:3rem; font-style:normal;}
.t2{ font-size:2rem; color:#ffea00; font-style:oblique; font-family:"微软雅黑"; font-weight:normal;}
.r-bottom{ margin-top:1rem; z-index:5; width:100%;}
.circle{ display:inline-block; *float:left; width:40%; height:auto; padding:0; margin:0 1rem; border-radius:80px; -moz-border-radius:80px; -webkit-border-radius:80px; background:#fff; opacity:0.9;filter:alpha(opacity=90);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);behavior: url(css/ie-css3.htc); position:relative; z-index:9;}
.circle .ico{margin:0.5rem auto 0; width:80px; height:80px;cursor:pointer; z-index:6;}
.circle .text{text-align:center;font-size:1.5rem; line-height:1.8rem; font-family:"微软雅黑"; color:#000; margin:0;}
.circle a {color:#445; display: block;height: 100%;width:100%; position: relative;}



a.iphone .ico{ background:url(../images/apple.png) no-repeat; background-size:100%;}


a.android .ico{ background:url(../images/android.png) no-repeat; background-size:100%;}






.section2{ width:100%; background:#fff; padding-top:0.5rem; padding-bottom:0.5rem; }

/*Carousel of full*/
#owl-demo .item{
  background: #42bdc2;
  padding: 30px 0px;
  margin: 10px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

.gn{ width:100%; margin:0 auto;}
.gn ul{ width:100%; float:left;margin-top:20px; position:relative;}
.quan{ width:11rem; height:11rem; border:3px solid #008ac9; border-radius:80px; -moz-border-radius:80px; -webkit-border-radius:80px; float:left; margin:0 0.5rem;}
.t9{ margin-top:0px; width:15rem; display:inline-block; font-size:3.6rem; line-height:4rem; font-family:"微软雅黑"; color:#005480; font-weight:normal; text-align:left; }
.t9 span{ font-size:1.8rem; line-height:2.4rem;}

.p1{ background:url(../images/p1.png) no-repeat; background-position:center;}
.p2{ background:url(../images/p2.png) no-repeat; background-position:center;}
.p3{ background:url(../images/p3.png) no-repeat; background-position:center;}
.p4{ background:url(../images/p4.png) no-repeat; background-position:center;}
.p5{ background:url(../images/p5.png) no-repeat; background-position:center;}
.p6{ background:url(../images/p6.png) no-repeat; background-position:center;}
.p7{ background:url(../images/p7.png) no-repeat; background-position:center;}
.p8{ background:url(../images/p8.png) no-repeat; background-position:center;}
.p9{ background:url(../images/p9.png) no-repeat; background-position:center;}


footer{ width:100%; background:#bbd1e0; text-align:center; font-size:1.2rem; color:#fff; padding:1rem 0; line-height:1.5rem;}


@media screen and ( min-width:210px) and ( max-width:300px){/* 兼容超小的屏*/
html{ font-size:50%;}

}

@media screen and ( min-width:301px) and ( max-width:349px){/* 兼容Iphone4、5等的屏*/
.r-top{ padding:0.5rem; margin-top:1rem;}
.t1{ font-size:2rem; line-height:2rem;}
.t1 span{font-size:2.5rem;}
.t2{ font-size:1.5rem;}
.circle{ margin:0 0.5rem;}
.circle .ico{ width:58px; height:58px;}
.circle .text{font-size:1rem;}
.quan{ width:8rem; height:8rem; margin-left:2rem;}
.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{ background-size:80%;}
.t9{ font-size:2.5rem; line-height:3rem;}
.t9 span{ font-size:1.4rem; line-height:1.8rem;}
}

@media screen and ( min-width:350px) and ( max-width:374px){/*华为P6、三星NOTE2、3等360px 的*/
.r-top{ padding:0.5rem; margin-top:1rem;}
.t1{ font-size:2.5rem; line-height:3rem;}
.t1 span{font-size:3rem;}
.t2{ font-size:2rem;}
.circle{ margin:0 0.5rem;}
.circle .ico{ width:65px; height:65px;}
.circle .text{font-size:1rem;}
.quan{ width:8rem; height:8rem; margin-left:2rem;}
.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{ background-size:80%;}
.t9{ font-size:2.5rem; line-height:3rem;}
.t9 span{ font-size:1.4rem; line-height:1.8rem;}
}

@media screen and ( min-width:375px) and ( max-width:390px){/*Iphone6 */
.r-top{ padding:0.5rem; margin-top:1rem;}
.t1{ font-size:2.5rem; line-height:3rem;}
.t1 span{font-size:3rem;}
.t2{ font-size:2rem;}
.circle{ margin:0 0.5rem;}
.circle .ico{ width:65px; height:65px;}
.circle .text{font-size:1rem;}
.quan{ width:8rem; height:8rem; margin-left:2rem;}
.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{ background-size:80%;}
.t9{ font-size:2.5rem; line-height:3rem;}
.t9 span{ font-size:1.4rem; line-height:1.8rem;}
}



/*@media screen and ( min-width:391px) and ( max-width:480px){ 兼容三星i9220等*/
@media screen and ( min-width:415px) and ( max-width:480px){/* 兼容三星i9220等*/
.quan{ width:55%; margin:auto;}
.t9{ width:80%; margin:auto;}
.gn ul{ margin-left:2rem;}
.quan{ margin-left:5rem;}
}

@media screen and ( min-width:414px) and ( max-width:480px){/* 兼容Iphone6Plus中大屏手*/
.quan{ margin-left:5rem;}
}

@media screen and ( min-width:768px) and ( max-width:780px){/* iPad 竖屏*/
html{ font-size:81.3%;}
.r-top{ padding:2rem; margin-top:2rem;}
.t1{ font-size:3.5rem; line-height:4rem;}
.t1 span{font-size:5.5rem;}
.t2{ font-size:3.5rem; line-height:5rem;}
.circle{ margin:1rem 1rem; border-radius:150px;width:28%;}
.circle .ico{ width:125px; height:105px;}
.circle .text{font-size:1.5rem; line-height:3rem;}
.quan{ width:8rem; height:8rem; margin-left:2rem;}
.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{ background-size:80%;}
.t9{ font-size:2.5rem; line-height:3rem;}
.t9 span{ font-size:1.4rem; line-height:1.8rem;}

}

@media screen and ( min-width:781px) and ( max-width:1024px){/* iPad 横屏 */
html{ font-size:81.3%;}
.r-top{ padding:3rem; margin-top:2rem;}
.r-bottom{ margin-top:4rem;}
.t1{ font-size:3.5rem; line-height:4rem;}
.t1 span{font-size:5.5rem;}
.t2{ font-size:3.5rem; line-height:5rem;}
.circle{ margin:1rem 1rem; border-radius:150px;width:28%;}
.circle .ico{ width:125px; height:145px;}
.circle .text{font-size:2rem; line-height:3rem;}
.quan{ width:10rem; height:10rem; margin-left:2rem;}
.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{ background-size:80%;}
.t9{ font-size:2.5rem; line-height:3rem;}
.t9 span{ font-size:1.4rem; line-height:1.8rem;}
.gn ul{ width:80%; margin:1rem auto; margin-left:10rem;}
}

@media screen and ( min-width:1025px) and ( max-width:1280px){/* PC窄屏 */
html{ font-size:75%;}
.r-top{ padding:3rem; margin-top:2rem;}
.r-bottom{ margin-top:4rem;}
.t1{ font-size:3.5rem; line-height:4rem;}
.t1 span{font-size:5.5rem;}
.t2{ font-size:3.5rem; line-height:5rem;}
.circle{ margin:1rem 1rem; border-radius:150px;width:25%;}
.circle .ico{ width:125px; height:145px;}
.circle .text{font-size:2rem; line-height:3rem;}
.quan{ width:10rem; height:10rem; margin-left:2rem;}
.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{ background-size:80%;}
.t9{ font-size:2.5rem; line-height:3rem;}
.t9 span{ font-size:1.4rem; line-height:1.8rem;}
.gn ul{ width:100%; margin:1rem auto; margin-left:10rem;}
}


@media screen and ( min-width:1281px) and ( max-width:1920px){/* PC宽屏 、kindle7英寸 */
html{ font-size:150%;}
}


@media screen and ( min-width:1921px) and ( max-width:2561px){/* PC宽屏 、kindle8.9英寸 */
html{ font-size:200%;}
}