H5官网

+html{
+    font-size: 100px;
+}
+
+html,body, .content{
+    width: 100%;
+    background:#fafafa;
+    overflow-x:hidden;
+}
+#newBridge .nb-icon-wrap-3 .nb-icon-wrap-3-right-center {
+    display: none;
+}
+
+/*头部*/
+.header{
+    height: .88rem;
+    background: #ecf0f3;
+    line-height: .88rem;
+}
+
+.header .logo{
+    height: .38rem;
+    line-height: .38rem;
+    width: 1.34rem;
+    float: left;
+    margin-left: .3rem;
+    margin-top: .3rem;
+}
+.logo img{
+    height: 100%;
+    width: 100%;
+}
+.header .telNum{
+    float: right;
+    margin-right: .15rem;
+    color: #333333;
+}
+.header .tellogo{
+    float: right;
+    width: .2rem;
+    height: .24rem;
+    margin-right: 0.15rem;
+
+}
+.header .tellogo img{
+    height: 100%;
+    width: 100%;
+}
+
+
+.publicity-img{
+    width:7.5rem;
+    height:4.11rem;
+}
+.publicity-img img{
+    width:100%;
+    height:100%;
+}
+
+
+.publicity-text{
+
+    background: #fafafa;
+    padding:.8rem .3rem ;
+    border:none;
+
+}
+.publicity-text span{
+
+    font-size: 15px;
+    color: #333;
+    border:none;
+
+}
+.character-outer{
+    background: #fafafa;
+    margin-bottom: .8rem;
+}
+.character{
+    border: 1px solid #ccc;
+    border-left: none;
+    border-right: none;
+    background: #fafafa;
+    /*height: 2.4rem;*/
+    height: auto;
+    margin: 0 .3rem;
+    border-bottom: none;
+
+}
+.character-1,.character-2,.character-3,.character-4{
+    display: block;
+    font-size: 15px;
+    font-weight: bold;
+    color: #333;
+    height: .8rem;
+    line-height: .8rem;
+
+}
+.character-1,.character-2,.character-3,.character-4{
+    border-bottom:1px solid #ccc;
+}
+.character-1 a,.character-2 a,.character-3 a,.character-4 a{
+    float: right;
+    margin-right: .5rem;
+    font-size: 24px;
+    color:#333;
+    font-weight: 100;
+
+}
+
+
+/*展开动画*/
+#character-1-unfold,#character-2-unfold,#character-3-unfold,#character-4-unfold{
+    -webkit-animation: fadeInDown 1s 0s both;
+    animation: fadeInDown 1s 0s both;
+}
+
+
+@-webkit-keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -5%, 0);
+        transform: translate3d(0, -5%, 0)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none
+    }
+}
+
+@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -5%, 0);
+        -ms-transform: translate3d(0, -5%, 0);
+        transform: translate3d(0, -5%, 0)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none
+    }
+}
+
+
+@-webkit-keyframes rotateIn {
+    0% {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotate3d(0, 0, 1, -200deg);
+        transform: rotate3d(0, 0, 1, -200deg);
+        opacity: 0
+    }
+    100% {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: none;
+        transform: none;
+        opacity: 1
+    }
+}
+
+@keyframes rotateIn {
+    0% {
+        -webkit-transform-origin: center;
+        -ms-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotate3d(0, 0, 1, -200deg);
+        -ms-transform: rotate3d(0, 0, 1, -200deg);
+        transform: rotate3d(0, 0, 1, -200deg);
+        opacity: 0
+    }
+    100% {
+        -webkit-transform-origin: center;
+        -ms-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none;
+        opacity: 1
+    }
+}
+
+
+/*展开*/
+.character-1-unfold{
+
+    display: none;
+    /*margin-left: .3rem;*/
+    margin-top: .8rem;
+    margin-bottom: .8rem;
+    /*margin-right: .3rem;*/
+
+}
+.character-1-unfold .character-1-unfold-li1{
+    height: 2.09rem;
+    /*margin-bottom: .8rem;*/
+}
+.character-1-unfold .character-1-unfold-li1 span{
+    float: left;
+
+    height: 1.29rem;
+    width: 2.67rem;
+}
+.character-1-unfold .character-1-unfold-li1 span img{
+    height: 100%;
+    width: 100%;
+}
+.character-1-unfold-li1-right{
+    float: right;
+    width: 3.2rem;
+    height:1.3rem;
+}
+.character-1-unfold-li1-right li:nth-child(1){
+    font-size: 13px;
+    color: #333;
+    font-weight: bold;
+
+}
+.character-1-unfold-li1-right li:nth-child(2),.character-1-unfold-li1-right li:nth-child(3){
+    font-size: 12px;
+    color: #666;
+
+}
+
+
+
+
+
+.character-1-unfold .character-1-unfold-li2{
+    height: 1.79rem;
+    margin-bottom: .8rem;
+}
+.character-1-unfold .character-1-unfold-li2 span{
+    float: right;
+
+    height: 1.79rem;
+    width: 3.01rem;
+}
+.character-1-unfold .character-1-unfold-li2 span img{
+    height: 100%;
+    width: 100%;
+}
+.character-1-unfold-li2-right{
+    float: left;
+    width: 3.2rem;
+    height:1.3rem;
+}
+.character-1-unfold-li2-right li:nth-child(1){
+    font-size: 13px;
+    color: #333;
+    font-weight: bold;
+
+}
+.character-1-unfold-li2-right li:nth-child(2),.character-1-unfold-li2-right li:nth-child(3){
+    font-size: 12px;
+    color: #666;
+
+}
+
+
+
+
+.character-1-unfold .character-1-unfold-li3{
+    height: 1.29rem;
+    margin-bottom: .8rem;
+}
+.character-1-unfold .character-1-unfold-li3 span{
+    float: left;
+    margin-top: -.5rem;
+    height: 1.75rem;
+    width: 2.83rem;
+}
+.character-1-unfold .character-1-unfold-li3 span img{
+    height: 100%;
+    width: 100%;
+}
+.character-1-unfold-li3-right{
+    float: right;
+    width: 3.2rem;
+    height:1.3rem;
+}
+.character-1-unfold-li3-right li:nth-child(1){
+    font-size: 13px;
+    color: #333;
+    font-weight: bold;
+
+}
+.character-1-unfold-li3-right li:nth-child(2){
+    font-size:12px;
+    color: #666;
+
+}
+
+
+.character-1-unfold .character-1-unfold-li4{
+    height: 1.79rem;
+}
+.character-1-unfold .character-1-unfold-li4 span{
+    float: right;
+
+    margin-top: -.5rem;
+    height: 2.24rem;
+    width: 2.44rem;
+}
+.character-1-unfold .character-1-unfold-li4 span img{
+    height: 100%;
+    width: 100%;
+}
+.character-1-unfold-li4-right{
+    float: left;
+    width: 3.2rem;
+    height:1.3rem;
+}
+.character-1-unfold-li4-right li:nth-child(1){
+    font-size:13px;
+    color: #333;
+    font-weight: bold;
+}
+.character-1-unfold-li4-right li:nth-child(2),.character-1-unfold-li4-right li:nth-child(3){
+    font-size:12px;
+    color: #666;
+
+}
+
+
+
+.character-2-unfold{
+    display: none;
+    margin-top: .8rem;
+}
+.character-2-unfold-ul1{
+    float: left;
+}
+.character-2-unfold-ul1 li{
+    width: .98rem;
+    height: .98rem;
+    margin-top: .9rem;
+    margin-bottom: .9rem;
+}
+.character-2-unfold-ul1 li:nth-child(1){
+    margin-top: .2rem;
+}
+.character-2-unfold-ul1 li:nth-child(6){
+    margin-bottom: 0;
+}
+.character-2-unfold-ul1 li img{
+    width: 100%;
+    height: 100%;
+}
+.character-2-unfold-ul2{
+    float: left;
+    width: 5.3rem;
+    margin-left: .4rem;
+}
+.character-2-unfold-ul2> p:nth-child(1), p:nth-child(4), p:nth-child(9), p:nth-child(12), p:nth-child(15), p:nth-child(18){
+    font-size: 13px;
+    color: #333;
+    font-weight: bold;
+    margin-bottom: .24rem;
+}
+.character-2-unfold-ul2> p:nth-child(3), p:nth-child(8), p:nth-child(11), p:nth-child(14), p:nth-child(17),p:nth-child(21){
+    margin-bottom: .4rem;
+    font-size: 12px;
+}
+
+
+
+
+.character-2-unfold .character-2-unfold-li1{
+    height: 2.09rem;
+}
+.character-2-unfold .character-2-unfold-li1 span{
+    float: left;
+
+    height: .98rem;
+    width: .98rem;
+}
+.character-2-unfold .character-2-unfold-li1 span img{
+    height: 100%;
+    width: 100%;
+}
+.character-2-unfold-li1-right{
+    float: left;
+    width: 5.5rem;
+    height:1.3rem;
+    margin-left: .4rem;
+}
+.character-2-unfold-li1-right li:nth-child(1){
+    font-size: 13px;
+    color: #333;
+    font-weight: bold;
+
+}
+.character-2-unfold-li1-right li:nth-child(2){
+    font-size: 12px;
+    color: #666;
+    margin-top: .1rem;
+
+}
+
+
+
+
+
+
+
+.character-3-unfold{
+    display: none;
+    margin: .8rem .5rem;
+
+}
+
+.character-3-unfold .character-3-unfold-li1,.character-3-unfold .character-3-unfold-li2{
+    height: 1rem;
+}
+.character-3-unfold .character-3-unfold-li1 span:nth-child(1){
+    float: left;
+    width: .26rem;
+    height: .26rem;
+}
+.character-3-unfold .character-3-unfold-li1 span:nth-child(1) img,.character-3-unfold .character-3-unfold-li1 span:nth-child(3) img,.character-3-unfold .character-3-unfold-li2 span:nth-child(1) img,.character-3-unfold .character-3-unfold-li2 span:nth-child(3) img{
+    width: 100%;
+    height: 100%;
+}
+
+.character-3-unfold .character-3-unfold-li1 span:nth-child(2){
+    float: left;
+    width: 2rem;
+    height: 1.6rem;
+    margin-left: .3rem;
+}
+.character-3-unfold .character-3-unfold-li1 span:nth-child(3){
+    float: left;
+    margin-left: .7rem;
+    width: .26rem;
+    height: .26rem;
+}
+
+
+.character-3-unfold .character-3-unfold-li1 span:nth-child(4){
+    float: left;
+    width: 2rem;
+    height: 1.6rem;
+    margin-left: .3rem;
+}
+
+
+
+
+.character-3-unfold .character-3-unfold-li2 span:nth-child(1){
+    float: left;
+    margin-top: .7rem;
+    width: .26rem;
+    height: .26rem;
+
+}
+.character-3-unfold .character-3-unfold-li2 span:nth-child(2){
+    float: left;
+    width: 2rem;
+    height: 1.6rem;
+    margin-left: .3rem;
+    margin-top: .7rem;
+
+}
+.character-3-unfold .character-3-unfold-li2 span:nth-child(3){
+    float: left;
+    margin-left: .7rem;
+    margin-top: .7rem;
+    width: .26rem;
+    height: .26rem;
+}
+.character-3-unfold .character-3-unfold-li2 span:nth-child(4){
+    float: left;
+    width: 2rem;
+    height: 1.6rem;
+    margin-left: .3rem;
+    margin-top: .7rem;
+
+}
+
+
+
+.character-4-unfold{
+    display: none;
+    margin: .8rem .5rem;
+}
+
+
+
+
+.scene-1{
+    background:#fafafa;
+    padding:.8rem .3rem .5rem .3rem;
+
+}
+.scene-1 p:nth-child(1){
+    font-size: 14px;
+    font-weight:bold;
+    color: #333;
+    height: .28rem;
+}
+.scene-2{
+    background:#fafafa;
+    padding-bottom:.5rem;
+
+}
+.scene-2 p:nth-child(1){
+    font-size: 13px;
+    color: #666;
+}
+
+.scene-3{
+    width:100%;
+    margin-left:auto;
+    margin-right: auto;
+
+}
+.scene-3-inner{
+    width:100%;
+    height: auto;
+    text-align: center;
+}
+.scene-3-a{
+
+    font-size: 18px;
+    color: #666;
+    display:inline-block;
+    text-align: left;
+}
+.scene-3-b{
+
+    font-size: 18px;
+    color: #666;
+    display:inline-block;
+    text-align: left;
+    margin-left: .5rem;
+}
+.scene-3-c{
+
+    font-size: 18px;
+    color: #666;
+    display:inline-block;
+    text-align: left;
+    margin-left: .5rem;
+}
+
+.case-1{
+    background:#ecf0f3;
+    padding-top: .8rem;
+    padding-bottom: .5rem;
+    padding-left: .3rem;
+}
+.case-1 p{
+    color:#333;
+    font-weight:bold;
+    font-size:15px;
+}
+
+
+.case-2{
+    background:#ecf0f3;
+    height: 100%;
+}
+.case-2 li:nth-child(1){
+    margin-bottom: .5rem;
+    height: .42rem;
+    line-height: .42rem;
+
+}
+
+.case-2 li:nth-child(1) span:nth-child(1){
+    float: left;
+    margin-left:.3rem;
+    height:.32rem;
+    width: 1.01rem;
+
+
+}
+
+.case-2 li:nth-child(1) span:nth-child(2){
+    float: left;
+    margin-left:.8rem;
+    height:.41rem;
+    line-height: .41rem;
+    width: 0.94rem;
+    margin-top: -.02rem;
+
+
+}
+
+.case-2 li:nth-child(1) span:nth-child(3){
+    float: left;
+    margin-left:.8rem;
+    height:.33rem;
+    width: 1.56rem;
+
+}
+
+.case-2 li:nth-child(1) span:nth-child(4){
+    float: left;
+    margin-left:.5rem;
+    height:.36rem;
+    width: 1.14rem;
+    margin-top: -.07rem;
+
+
+}
+.case-2 li:nth-child(1) span:nth-child(1) img,.case-2 li:nth-child(1) span:nth-child(2) img,.case-2 li:nth-child(1) span:nth-child(3) img,.case-2 li:nth-child(1) span:nth-child(4) img{
+    height: 100%;
+    width: 100%;
+}
+
+
+
+
+.case-2 li:nth-child(2){
+    margin-bottom: .5rem;
+    height:.43rem ;
+
+}
+.case-2 li:nth-child(2) span:nth-child(1){
+    float: left;
+    margin-left:.3rem;
+    height:.26rem;
+    width: 1.57rem;
+
+}
+.case-2 li:nth-child(2) span:nth-child(2){
+    float: left;
+    margin-left:.2rem;
+    height:.34rem;
+    width: .88rem;
+
+}
+.case-2 li:nth-child(2) span:nth-child(3){
+    float: left;
+    margin-left:.9rem;
+    height:.31rem;
+    width: 1.43rem;
+
+}
+.case-2 li:nth-child(2) span:nth-child(4){
+    float: left;
+    margin-left:.6rem;
+    height:.31rem;
+    width: 1.03rem;
+
+}
+.case-2 li:nth-child(2) span:nth-child(1) img,.case-2 li:nth-child(2) span:nth-child(2) img,.case-2 li:nth-child(2) span:nth-child(3) img,.case-2 li:nth-child(2) span:nth-child(4) img{
+    height: 100%;
+    width: 100%;
+}
+
+
+.case-2 li:nth-child(3){
+    margin-bottom: .8rem;
+    height: .27rem;
+    line-height: .27rem;
+}
+.case-2 li:nth-child(3) span:nth-child(1){
+    float: left;
+    margin-left:.3rem;
+    height:.24rem;
+    width: 1.37rem;
+
+}
+.case-2 li:nth-child(3) span:nth-child(2){
+    float: left;
+    margin-left:.4rem;
+    height:.26rem;
+    width: .98rem;
+
+}
+.case-2 li:nth-child(3) span:nth-child(3){
+    float: left;
+    margin-left:.8rem;
+    height:.26rem;
+    width: 2.36rem;
+
+}
+.case-2 li:nth-child(3) span:nth-child(1) img,.case-2 li:nth-child(3) span:nth-child(2) img,.case-2 li:nth-child(3) span:nth-child(3) img{
+    height: 100%;
+    width: 100%;
+}
+
+
+
+.company-1{
+    padding-top: .8rem;
+    padding-bottom: .5rem;
+    padding-left: .3rem;
+}
+.company-1 p{
+    color:#333;
+    font-weight:bold;
+    font-size: 15px;
+}
+.company-2{
+    background: #fafafa;
+    margin:0 .3rem 0 .3rem;
+    border: 1px solid #ccc;
+    border-left: none;
+    border-top:none;
+    border-right: none;
+    padding-bottom: .8rem;
+}
+.company-2 p{
+    font-size:13px;
+    color: #666;
+}
+.technology{
+    width:100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: .8rem;
+    margin-bottom: .8rem;
+    text-align: center;
+}
+.technology-1{
+    /*float: left;*/
+    display:inline-block;
+    text-align: left;
+}
+.technology-1 li:nth-of-type(1){
+    font-size: 12px;
+    color: #333;
+    font-weight: bold;
+}
+.technology-1 li:nth-of-type(2){
+    margin-top: .3rem;
+    font-size: 10px;
+    color: #666;
+}
+.technology-1 li:nth-of-type(3){
+    font-size: 10px;
+    color: #666;
+
+}
+
+
+
+.technology-2{
+    /*float: left;*/
+    margin-left: .3rem;
+    display:inline-block;
+    text-align: left;
+}
+.technology-2 li:nth-of-type(1){
+    font-size: 12px;
+    color: #333;
+    font-weight: bold;
+}
+.technology-2 li:nth-of-type(2){
+    margin-top: .3rem;
+    font-size: 10px;
+    color: #666;
+}
+.technology-2 li:nth-of-type(3){
+    font-size: 10px;
+    color: #666;
+
+}
+.technology-3{
+    /*float: left;*/
+    margin-left: .3rem;
+    display:inline-block;
+    text-align: left;
+}
+.technology-3 li:nth-of-type(1){
+    font-size: 12px;
+    color: #333;
+    font-weight: bold;
+}
+.technology-3 li:nth-of-type(2){
+    margin-top: .3rem;
+    font-size: 10px;
+    color: #666;
+}
+.technology-3 li:nth-of-type(3){
+    font-size: 10px;
+    color: #666;
+
+}
+
+.QRcode{
+    height: 2.12rem;
+    width: 2.12rem;
+    margin-left: .3rem;
+    margin-bottom: .3rem;
+}
+.QRcode span{
+    height: 1.06rem;
+    width: 1.06rem;
+
+
+}
+.QRcode span img{
+    width: 100%;
+    height: 100%;
+
+}
+
+.sanmang{
+    margin-bottom: 1.05rem;
+    margin-left: .3rem;
+}
+.sanmang p{
+    font-size:9px;
+    color: #999;
+}
+
+.footer{
+    height: 1.05rem;
+    line-height:1.05rem;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    background:#000;
+    filter:alpha(opacity=80);
+    opacity: 0.8;
+    -moz-opacity: 0.8;
+
+}
+
+.footer a:nth-of-type(1){
+    float: left;
+    margin-left: .1rem;
+    margin-top: .1rem;
+    width: .3rem;
+    height: .3rem;
+    line-height: .3rem;
+    background:url("../images/close.png") no-repeat center center;
+    background-size:.3rem .3rem ;
+
+}
+.footer a:nth-of-type(1):active{
+    background:url("../images/close-pre.png") no-repeat center center;
+    background-size:.3rem .3rem ;
+}
+
+/*免费体验*/
+
+.footer a:nth-of-type(2){
+    float: left;
+    font-size:15px;
+    color: #3498db;
+    margin-left: .8rem;
+    background:url("../images/experience-normal.png") no-repeat left center;
+    background-size:0.33rem  0.33rem;
+    height: 1.05rem;
+    line-height: 1.05rem;
+    text-align: center;
+    width: 2.4rem;
+}
+.footer a:nth-of-type(2):active{
+    color: #c2e0f2;
+    background:url("../images/experience-pre.png") no-repeat left center;
+    background-size:0.33rem  0.33rem;
+}
+
+
+
+/*竖线*/
+.footer .line{
+    float: left;
+    border: 1px solid #1a1a1a;
+    height: .58rem;
+    line-height: .58rem;
+    /*color: #1a1a1a;*/
+    margin-top: .2rem;
+    margin-left: .2rem;
+    z-index: 1000;
+}
+
+
+/*在线咨询*/
+.footer a:nth-of-type(3){
+    float: left;
+    font-size: 15px;
+    color: #3498db;
+    margin-left: .7rem;
+    background:url("../images/consult-normal.png") no-repeat left center;
+    background-size:0.33rem  0.33rem;
+    height: 1.05rem;
+    line-height: 1.05rem;
+    text-align: center;
+    width: 2.5rem;
+}
+.footer a:nth-of-type(3):active{
+    color: #c2e0f2;
+    background:url("../images/consult-pre.png") no-repeat left center;
+    background-size:0.33rem  0.33rem;
+}
+
+
+
+
+

+@charset "utf-8";
+/*！--CSS重置和样式初始化(参考Normalize.css) ~ --*/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td {
+    margin: 0;
+    padding: 0
+}
+
+body {
+    font-size: 12px;
+    font-style: normal;
+    font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif
+}
+
+small {
+    font-size: 12px
+}
+
+h1 {
+    font-size: 18px
+}
+
+h2 {
+    font-size: 16px
+}
+
+h3 {
+    font-size: 14px
+}
+
+h4, h5, h6 {
+    font-size: 100%
+}
+
+ul, ol, li {
+    list-style: none
+}
+
+a {
+    text-decoration: none;
+    background-color: transparent
+}
+
+a:hover, a:active {
+    outline-width: 0;
+    text-decoration: none
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0
+}
+
+hr {
+    border: 0;
+    height: 1px
+}
+
+img {
+    border-style: none
+}
+
+img:not([src]) {
+    display: none
+}
+
+svg:not(:root) {
+    overflow: hidden
+}
+
+html {
+    -webkit-touch-callout: none;
+    -webkit-text-size-adjust: 100%
+}
+
+input, textarea, button, a {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+}
+
+article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
+    display: block
+}
+
+audio, canvas, progress, video {
+    display: inline-block
+}
+
+audio:not([controls]), video:not([controls]) {
+    display: none;
+    height: 0
+}
+
+progress {
+    vertical-align: baseline
+}
+
+mark {
+    background-color: #ff0;
+    color: #000
+}
+
+sub, sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline
+}
+
+sub {
+    bottom: -0.25em
+}
+
+sup {
+    top: -0.5em
+}
+
+button, input, select, textarea {
+    font-size: 100%;
+    outline: 0
+}
+
+button, input {
+    overflow: visible
+}
+
+button, select {
+    text-transform: none
+}
+
+textarea {
+    overflow: auto
+}
+
+button, html [type="button"], [type="reset"], [type="submit"] {
+    -webkit-appearance: button
+}
+
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0
+}
+
+button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText
+}
+
+[type="checkbox"], [type="radio"] {
+    box-sizing: border-box;
+    padding: 0
+}
+
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+    height: auto
+}
+
+[type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px
+}
+
+[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+::-webkit-input-placeholder {
+    color: inherit;
+    opacity: .54
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit
+}
+
+.clear:after {
+    display: block;
+    height: 0;
+    content: "";
+    clear: both
+}
+/*去除浮动*/
+.clear{ clear:both; overflow:hidden; zoom:1; float:none;}

+html,body{
+    height: auto;
+}
+.product_trial_formbox {
+    width: 100%;
+    overflow-x:hidden;
+
+}
+.product_trial_formbox_head{
+    width: 7.5rem;
+}
+.product_trial_formbox_head img{
+    width:100%;
+    height: 100%;
+}
+
+.product_trial_formbox_content p{
+    margin-top: .5rem;
+    font-size: .4rem;
+    padding:.2rem .5rem;
+    color:#666;
+}
+.product_trial_formbox_content {
+
+    width: 100%;
+    background: #fff;
+    color: #333;
+}
+.detailForm{
+    margin-top: .5rem;
+}
+
+.product_trial_formbox_content input {
+    width: 4.5rem;
+    border: 1px #ccc solid;
+    border-radius: .03rem;
+    text-indent: .06rem;
+    margin-bottom: .4rem;
+    font-size: .3rem;
+    background: #fdfdfd;
+    line-height: .4rem;
+    height:.8rem;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #666;
+}
+
+.product_trial_formbox_content label {
+   margin-left: .8rem;
+    font-size: .4rem;
+}
+.product_trial_formbox_content label:nth-of-type(4),label:nth-of-type(5){
+    margin-left: 1.1rem;
+}
+
+.submit_trail {
+    width: 3.88rem;
+    height: 1rem;
+    margin-top: .4rem;
+    margin-bottom: .8rem;
+    background: #2ecc71;
+    margin-left: 1.8rem;
+    font-size: .4rem;
+    line-height: 1rem;
+    display: block;
+    float: left;
+    text-align: center;
+    -moz-border-radius: 0.03rem;
+    -webkit-border-radius: 0.03rem;   /* Webkit browsers */
+    border-radius: 0.03rem;
+    color: #fff;
+
+}
+.submit_trail:hover {
+    background: #00b960;
+}

+    <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
+    <title>学点云</title>
+    <link rel="stylesheet" type="text/css" href="css/reset.min.css">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+</head>
+<body>
+<div class="content">
+
+    <div class="header">
+        <div class="logo">
+            <img src="images/logo.png" alt="logo">
+        </div>
+        <p class="telNum">4008-922-902</p>
+
+        <span class="tellogo">
+            <img src="images/phone.png" alt="电话">
+        </span>
+
+    </div>
+
+    <div class="publicity-img">
+        <img src="images/publicity-img.png"/>
+
+    </div>
+
+    <div class="publicity-text">
+        <span>学点云为在线教育量身打造的一款完全基于浏览器的纯Web实时互动直播教学服务产品，提供以SaaS服务形式的多点音视频互动及课件同步教学的综合服务。</span>
+    </div>
+
+    <!--平台优势/产品特色/技术优势-->
+    <div class="character-outer">
+        <div class="character">
+            <!--平台优势-->
+            <div id="character-1" class="character-1 clear">
+                <span>平台优势</span>
+                <a id="character-1-a" href="javascript: void(0)" >+</a>
+            </div>
+            <!--平台优势-展开-->
+            <div id="character-1-unfold" class="character-1-unfold clear">
+                <li class="character-1-unfold-li1 clear">
+                    <span><img src="images/character/character-1-unfold-1.png" alt="开放数据接口无缝集成系统"/></span>
+
+                <ul class="character-1-unfold-li1-right">
+                     <li>开放数据接口无缝集成系统</li>
+                     <li>提供APP, API, SDK</li>
+                     <li>多种方式集成到任意第三方平台</li>
+                 </ul>
+                </li>
+
+
+                <li class="character-1-unfold-li2">
+                    <ul class="character-1-unfold-li2-right">
+                        <li>互动体验媲美真实课堂</li>
+                        <li>超过100个产品功能</li>
+                        <li>增强互动体验，媲美真实课堂</li>
+                    </ul>
+                    <span><img src="images/character/character-1-unfold-2.png" alt="互动体验媲美真实课堂"/></span>
+
+                </li>
+
+                <li class="character-1-unfold-li3">
+                    <span><img src="images/character/character-1-unfold-3.png" alt="全平台多终端实时互动"/></span>
+
+                    <ul class="character-1-unfold-li3-right">
+                        <li>全平台多终端实时互动</li>
+                        <li>PC/安卓/ios等均可实时同步接入</li>
+                    </ul>
+                </li>
+                <li class="character-1-unfold-li4">
+                    <span><img src="images/character/character-1-unfold-4.png" alt="高可靠性的全球直播体验"/></span>
+
+                    <ul class="character-1-unfold-li4-right">
+                        <li>高可靠性的全球直播体验</li>
+                        <li>国内国外实时交流</li>
+                        <li>完美支持国内国外的数据穿透</li>
+                    </ul>
+                </li>
+
+            </div>
+
+
+            <!--产品特色-->
+            <div id="character-2" class="character-2 clear">
+                <span>产品特色</span>
+                <a id="character-2-a" href="javascript: void(0)">+</a>
+            </div>
+            <!--产品特色-展开-->
+            <div id="character-2-unfold" class="character-2-unfold clear">
+                <li class="character-2-unfold-li1 clear">
+                    <span><img src="images/product/character-2-unfold-1.png" alt="音视频互动"/></span>
+
+                    <ul class="character-2-unfold-li1-right">
+                        <li>音视频互动</li>
+                        <li>支持多路音视频实时互动，双向音视频实时交流，国际专线保证国内国外实时交流。</li>
+                        <!--<li>国际专线保证国内国外实时交流</li>-->
+                    </ul>
+                </li>
+
+                <li class="character-2-unfold-li1 clear">
+                    <span><img src="images/product/character-2-unfold-2.png" alt="文档共享"/></span>
+
+                    <ul class="character-2-unfold-li1-right">
+                        <li>文档共享</li>
+                        <li>可共享Word、PPT、Excel、PDF等文档，并支持动态PPT的共享；文档采用矢量转化技术，可任意缩放；并提供丰富的文档绘图工具进行标注操作。</li>
+                        <!--<li>持动态PPT的共享；</li>-->
+                        <!--<li>文档采用矢量转化技术，可任意缩放；</li>-->
+                        <!--<li>并提供丰富的文档绘图工具进行标注操作。</li>-->
+                    </ul>
+                </li>
+
+                <li class="character-2-unfold-li1 clear">
+                    <span><img src="images/product/character-2-unfold-3.png" alt="在线白板"/></span>
+
+                    <ul class="character-2-unfold-li1-right">
+                        <li>在线白板</li>
+                        <li>使用鼠标、手写板可实现实时在线绘制任意图形，并支持本地保存。</li>
+                        <!--<li>并支持本地保存。</li>-->
+                    </ul>
+                </li>
+
+                <li class="character-2-unfold-li1 clear">
+                    <span><img src="images/product/character-2-unfold-4.png" alt="课堂讨论"/></span>
+
+                    <ul class="character-2-unfold-li1-right">
+                        <li>课堂讨论</li>
+                        <li>支持课堂文字、表情、举手、课堂讨论等100多种互动体验，满足教师与学生课堂内讨论、问答的互动需求。</li>
+                        <!--<li>多种互动体验，满足教师与学生课堂内讨论、</li>-->
+                        <!--<li>问答的互动需求。</li>-->
+                    </ul>
+                </li>
+
+                <li class="character-2-unfold-li1 clear">
+                    <span><img src="images/product/character-2-unfold-5.png" alt="屏幕共享"/></span>
+
+                    <ul class="character-2-unfold-li1-right">
+                        <li>屏幕共享</li>
+                        <li>支持的屏幕共享功能，教师与学生可实现实时、同步、保真的高清画面。</li>
+                        <!--<li>步、保真的高清画面。</li>-->
+                    </ul>
+                </li>
+
+                <li class="character-2-unfold-li1 clear">
+                    <span><img src="images/product/character-2-unfold-6.png" alt="媒体共享"/></span>
+
+                    <ul class="character-2-unfold-li1-right">
+                        <li>媒体共享</li>
+                        <li>教师可实时共享任意大小、任意格式的视频或音乐文件，所有学生端可实时观看。</li>
+                        <!--<li>音乐文件，所有学生端可实时观看。</li>-->
+                    </ul>
+                </li>
+
+            </div>
+
+
+
+
+            <!--技术优势-->
+            <div id="character-3" class="character-3 clear">
+                <span>技术优势</span>
+                <a id="character-3-a" href="javascript: void(0)">+</a>
+                
+            </div>
+            <!--技术优势-展开-->
+            <div id="character-3-unfold" class="character-3-unfold clear">
+                <li class="character-3-unfold-li1">
+                    <span><img src="images/advantage/advantage-1.png" alt=""></span>
+                    <span>世界领先的专业音视频技术，支持超大并发直播。</span>
+                    <span><img src="images/advantage/advantage-2.png" alt=""></span>
+                    <span>采用超低延迟技术，提供实时性互动的强大保障。</span>
+                </li>
+                <li class="character-3-unfold-li2">
+                    <span><img src="images/advantage/advantage-3.png" alt=""></span>
+                    <span>完全支持目前主流720P、1080P等高清分辨率。</span>
+                    <span><img src="images/advantage/advantage-4.png" alt=""></span>
+                    <span>独创的噪音抑制技术，高效的抑制背景嘈杂声、电流声、嘶声。</span>
+                </li>
+            </div>
+
+            <!--场景应用-->
+            <div id="character-4" class="character-4 clear">
+                <span>场景应用</span>
+                <a id="character-4-a" href="javascript: void(0)">+</a>
+
+            </div>
+            <!--场景应用-展开-->
+            <div id="character-4-unfold" class="character-4-unfold clear">
+                <div class="scene-2">
+                    <p>学点云为您打造在线教育可靠战略伙伴，建立互联网教育品牌的信心之选</p>
+                </div>
+                <div class="scene-3 ">
+                    <div class="scene-3-inner">
+                        <ul class="scene-3-a">
+                            <li>外语一对一</li>
+                            <li>留学咨询</li>
+                        </ul>
+                        <ul class="scene-3-b">
+                            <li>互动课堂</li>
+                            <li>活动直播</li>
+                        </ul>
+                        <ul class="scene-3-c">
+                            <li>直播课堂</li>
+                            <li>企业内训</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!--典型案例-->
+    <div class="case-1">
+        <p>典型案例</p>
+
+    </div>
+
+
+    <div class="case-2">
+        <li class="clear">
+            <span><img src="images/case/case-img-1.png" alt="小站教育"></span>
+            <span><img src="images/case/case-img-2.png" alt="VIPKID"></span>
+            <span><img src="images/case/case-img-3.png" alt="一起作业"></span>
+            <span><img src="images/case/case-img-4.png" alt="明博教育"></span>
+        </li>
+        <li class="clear">
+            <span><img src="images/case/case-img-5.png" alt="上海开放大学"></span>
+            <span><img src="images/case/case-img-6.png" alt="云校"></span>
+            <span><img src="images/case/case-img-7.png" alt="北京师范大学"></span>
+            <span><img src="images/case/case-img-8.png" alt="淘宝教育"></span>
+        </li>
+        <li class="clear">
+            <span><img src="images/case/case-img-9.png" alt="线话英语"></span>
+            <span><img src="images/case/case-img-10.png" alt="高思教育"></span>
+            <span><img src="images/case/case-img-11.png" alt="大知科技"></span>
+        </li>
+
+    </div>
+
+
+    <!--公司简介-->
+    <div class="company-1">
+        <p>公司简介</p>
+
+    </div>
+    <div class="company-2-outer">
+    <div class="company-2">
+        <p>多年在线教育实时课堂系统研发经验</p>
+        <p>十年以上客户服务的经验积累，拥有大型的SaaS运营平台</p>
+        <p>自主研发且拥有完全知识产权的多媒体实时通信平台</p>
+    </div>
+    </div>
+
+    <div class="technology clear">
+        <ul class="technology-1">
+            <li>冗余设备</li>
+            <li>多级服务器部署</li>
+            <li>CDN加速遍布全国</li>
+        </ul>
+        <ul class="technology-2">
+            <li>安全保障</li>
+            <li>所有数据安全加密</li>
+            <li>全方位保障直播安全</li>
+        </ul>
+        <ul class="technology-3">
+            <li>技术支持</li>
+            <li>7x24小时运维服务</li>
+            <li>7x18小时在线支持</li>
+        </ul>
+    </div>
+
+    <div class="QRcode">
+        <span><img src="images/qrcode.png" alt="二维码"></span>
+    </div>
+
+    <div class="sanmang">
+        <p>© 2010 - 2015 三芒世纪（北京）科技有限公司</p>
+        <p>京ICP备12014300号-1</p>
+    </div>
+
+    <div id="footer" class="footer clear">
+        <a href="javascript:void(0)"; onclick="document.getElementById('footer').style.display='none'"></a>
+        <a href="productTrials.html" target=_blank>免费体验</a>
+        <div class="line"></div>
+        <a href="http://p.qiao.baidu.com/cps/chat?siteId=10187058&userId=22814208" target=_blank>在线咨询</a>
+
+    </div>
+
+
+</div>
+
+<script type="text/javascript" src="js/index.js"></script>
+<!--统计代码-->
+<script>
+    var _hmt = _hmt || [];
+    (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?a10d3c3519698e7aa0dc1d57730d01a3";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+    })();
+</script>
+
+</body>
+</html>

+//->REM
+~function () {
+    var desW = 750,
+        winW = document.documentElement.clientWidth,
+        ratio = winW / desW,
+        oMain = document.querySelector('.main');
+    if (winW > desW) {
+        oMain.style.margin = '0 auto';
+        oMain.style.width = desW + 'px';
+        return;
+    }
+    document.documentElement.style.fontSize = ratio * 100+ 'px';
+
+
+    //加减号
+    function Show_Hidden1(obj,obj2,obj3,obj4) {
+        if(obj.style.display=="block")
+        {
+            obj.style.display='none';
+            obj2.style.borderBottom='1px solid #ccc';
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="+";
+            obj3.style.fontSize="24px";
+            obj3.style.width=".17rem"
+            obj3.style.marginRight=".68rem";
+            obj4.style.borderTop='none';
+        }
+        else
+        {
+
+            obj.style.display='block';
+            obj4.style.borderTop='1px solid #ccc';
+            obj2.style.borderBottom='none';
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="-";
+            obj3.style.fontSize="24px";
+            obj3.style.width=".17rem"
+            obj3.style.marginRight=".55rem";
+
+        }
+    }
+    function Show_Hidden2(obj,obj2,obj3,obj4) {
+        if(obj.style.display=="block")
+        {
+            obj.style.display='none';
+            obj2.style.borderBottom='1px solid #ccc';
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="+";
+            obj3.style.fontSize="24px";
+            obj3.style.width=".17rem"
+            obj3.style.marginRight=".68rem";
+            obj4.style.borderTop='none';
+        }
+        else
+        {
+            obj.style.display='block';
+            obj2.style.borderBottom='none';
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="-";
+            obj3.style.fontSize="24px";
+            obj3.style.width=".17rem"
+            obj3.style.marginRight=".55rem";
+            obj4.style.borderTop='1px solid #ccc';
+
+        }
+    }
+    function Show_Hidden3(obj,obj2,obj3,obj4) {
+        if(obj.style.display=="block")
+        {
+            obj.style.display='none';
+            obj2.style.borderBottom='1px solid #ccc';
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="+";
+            obj3.style.fontSize="24px";
+            obj3.style.marginRight=".68rem";
+            obj4.style.borderTop='none';
+
+        }
+        else
+        {
+            obj.style.display='block';
+            obj2.style.borderBottom='none';
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="-";
+            obj3.style.width=".17rem"
+            obj3.style.fontSize="24px";
+            obj3.style.marginRight=".55rem";
+            obj4.style.borderTop='1px solid #ccc';
+
+        }
+    }
+    function Show_Hidden4(obj,obj2,obj3,obj4) {
+        if(obj.style.display=="block")
+        {
+            obj.style.display='none';
+
+            //加号动画
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="+";
+
+            obj3.style.fontSize="24px";
+            obj3.style.marginRight=".68rem";
+            obj2.style.borderBottom='1px solid #ccc';
+
+        }
+        else
+        {
+            obj.style.display='block';
+            obj.style.marginBottom='0';
+            obj2.style.borderBottom='none';
+            obj3.style.webkitAnimation="rotateIn 1s 0s both";
+            obj3.style.animation="rotateIn 1s 0s both";
+            obj3.innerHTML="-";
+            obj3.style.width=".17rem";
+            obj3.style.fontSize="24px";
+            obj3.style.marginRight=".55rem";
+            // obj2.style.borderBottom='none';
+
+
+        }
+    }
+
+    //每一个整体
+    var character1=document.getElementById("character-1");
+    var character2=document.getElementById("character-2");
+    var character3=document.getElementById("character-3");
+    var character4=document.getElementById("character-4");
+    //加号
+    var characterA =document.getElementById("character-1-a");
+    var characterA2 =document.getElementById("character-2-a");
+    var characterA3 =document.getElementById("character-3-a");
+    var characterA4 =document.getElementById("character-4-a");
+    //展开部分
+    var characterUnfold=document.getElementById("character-1-unfold");
+    var characterUnfold2=document.getElementById("character-2-unfold");
+    var characterUnfold3=document.getElementById("character-3-unfold");
+    var characterUnfold4=document.getElementById("character-4-unfold");
+
+
+
+    character1.onclick=function onclick1() {
+        Show_Hidden1(characterUnfold,character1,characterA,character2);
+
+    }
+    character2.onclick=function onclick2() {
+        Show_Hidden2(characterUnfold2,character2,characterA2,character3);
+
+    }
+    character3.onclick=function onclick3() {
+        Show_Hidden3(characterUnfold3,character3,characterA3,character4);
+
+    }
+    character4.onclick=function onclick4() {
+        Show_Hidden4(characterUnfold4,character4,characterA4);
+
+    }
+
+
+}();

+//->REM
+~function () {
+    var desW = 750,
+        winW = document.documentElement.clientWidth,
+        ratio = winW / desW,
+        oMain = document.querySelector('.main');
+    if (winW > desW) {
+        oMain.style.margin = '0 auto';
+        oMain.style.width = desW + 'px';
+        return;
+    }
+    document.documentElement.style.fontSize = ratio * 100 + 'px';
+}();

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>学点云</title>
+    <link rel="stylesheet" type="text/css" href="css/reset.min.css">
+    <link rel="stylesheet" href="css/trials.css">
+
+</head>
+<body>
+<div class="product_trial_formbox">
+    <div class="product_trial_formbox_head"><img src="images/apply-try.png" alt="免费申请试用"></div>
+    <div class="product_trial_formbox_content">
+        <p>留下您的联系方式，我们会有专人客服在一个工作日内和您联系。</p>
+        <form action="" id="detailForm" class="detailForm" method="post">
+
+
+            <label>*&nbsp;姓名:</label>
+            <input name="user_name" type="text" autofocus="autofocus" value="" placeholder="输入您的姓名" title="请输入您的姓名">
+            <br>
+            <label>*&nbsp;手机:</label>
+            <input name="phone_number" type="text" value="" placeholder="输入您的手机号码" title="输入您的手机号码">
+            <br>
+            <label>*&nbsp;邮箱:</label>
+            <input name="email" type="text" value="" placeholder="输入您的邮箱地址" title="输入您的邮箱地址">
+            <br>
+            <label>公司:</label>
+            <input name="company" type="text" value="" placeholder="输入您的公司名称">
+            <br>
+            <label>电话:</label>
+            <input name="telphone" type="text" value="" placeholder="输入您的固定电话">
+            <br>
+            <label> &nbsp;
+
+                <a class="submit_trail" href="javascript:void(0)">立即申请</a></label>
+        </form>
+    </div>
+</div>
+<script type="text/javascript" src="js/rem.js"></script>
+</body>
+</html>