html, body {height: 100%;}
body{font-family: Arial,Helvetica,sans-serif,SimHei, SimSun ; font-size:13px; margin:0; padding:0; background:#fff; color:#000;}
p {padding:0; margin:0;}
ul, li {list-style: none; padding: 0; margin: 0;}
img {border: none;}
h1, h2, h3, h4, h5 {padding: 0; margin: 0;}
a{text-decoration:none; color:#000}
a:hover{color:#1b6711}

.m5{margin:5px}.m10{margin:10px}.m15{margin:15px}.m20{margin:20px}.p5{padding:5px}.p10{padding:10px}.p15{padding:15px}.p20{padding:20px}.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mb5{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.ml5{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml30{margin-left:30px}.mr5{margin-right:5px}.mr10{margin-right:10px}.mr15{margin-right:15px}.mr20{margin-right:20px}
.pt5{padding-top:5px}.pt10{padding-top:10px}.pt15{padding-top:15px}.pt20{padding-top:20px}.pb5{padding-bottom:5px}.pb10{padding-bottom:10px}.pb15{padding-bottom:15px}.pb20{padding-bottom:20px}.pb30{padding-bottom:30px}.pl5{padding-left:5px}.pl10{padding-left:10px}.pl15{padding-left:15px}.pl20{padding-left:20px}.pr5{padding-right:5px}.pr10{padding-right:10px}.pr15{padding-right:15px}.pr20{padding-right:20px}

.fl{float:left}
.fr{float:right}
.red{color:#c72525}
.green{color:#98B22B}
.t14{font-size:14px}
.tl{text-align:left;}.tr{text-align:right;}.tc{text-align:center}
.cl{height:1px; font-size:1px; overflow:hidden; clear:both}

.shadow10{-moz-box-shadow:0px 2px 8px rgba(0,0,0,.2); -webkit-box-shadow:0px 2px 8px rgba(0,0,0,.2); box-shadow:0px 2px 8px rgba(0,0,0,.2);}
.fade{-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.length{width:1000px; margin:0px auto; overflow: hidden;}


/* Header */
#header{width:100%; background:#4a840c; height:95px}
#header .logo{width:265px; height:68px; margin-top:15px; background:url(../pic/ico-logo.png) no-repeat; float:left;}
#header .slogan{width:313px; height:64px; margin-top:15px; background:url(../pic/pic-slogan.png?t=201412291800) no-repeat; float:right;}

.splash{height:440px; position:relative}
.splash .pdevice{display:none; width:530px; height:350px; position:absolute; left:0; top:60px; background:url(../pic/pic-device.png?t=201412291800) no-repeat}
.splash .video {position:absolute; left:0; top:60px; box-shadow:0 0 5px rgba(0,0,0,.2);}
.splash h1{position:absolute; top:95px; left:620px; font-size:26px; font-family:"Microsoft YaHei", "Hiragino Sans GB", sans-serif; line-height:1.7em}
.splash .text {position:absolute; top:190px; left:620px; font-size:18px;line-height:40px; color:#7b7b7b;}
.splash .text strong {color:#d40c18;}
.splash .btns{position:absolute; top:280px; left:620px;}
.splash .btns a{display:inline-block; width:168px; height:55px; background:url(../pic/btnbg-login.png?t=201412291800) no-repeat; text-align:center; line-height:55px; font-size:18px; color:#fff;}
.splash .btns a:hover{Opacity:.85}
.splash .btns a.down{color:#000; background:url(../pic/btnbg-download.png?t=201412291800) no-repeat; moz-text-shadow:0px 1px 1px #fff; -webkit-text-shadow:0px 1px 1px #fff; text-shadow:0px 1px 1px #fff;}
.splash .pdevice .gotodown {display:block; width:120px; height:20px; line-height:20px; padding:50px 0; font-size:20px; text-align:center; color:#4a840c; background:url(../pic/bg-down.png?t=201412291800) no-repeat; position:absolute; top:330px; left:485px; border-radius:100px; -webkit-transition:all .2s; -moz-transition:all .2s; transition:all .2s;}
.splash .pdevice .gotodown:hover {-webkit-transform:translateY(10px); -moz-transform:translateY(10px); transform:translateY(10px);}


/*keynote*/
.keynote{padding:50px 0px; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; background:#fff; }
.keynote h2{font-size:24px; line-height:1.8em}
.keynote p{font-size:16px; line-height:1.4em; color:#777;}

.keynote .wkz{margin:50px 50px 0;}
.keynote .wkz span{display:inline-block; width:290px; height:250px; float:right; margin-right:40px; background:url(../pic/pic-wkz.png?t=201412291800) no-repeat}
.keynote .wkz .read{float:left; width:520px; margin-left:50px; margin-top:50px}

.keynote .anywhere{margin:50px 80px 0;}
.keynote .anywhere span{display:inline-block; width:290px; height:200px; float:left; margin-left:0; background:url(../pic/pic-anywhere.png?t=201412291800) no-repeat}
.keynote .anywhere .read{float:right; margin-right:0; margin-top:50px}

.keynote .safe{margin:50px 80px 0;}
.keynote .safe span{display:inline-block; width:290px; height:200px; float:left; margin-right:0px; background:url(../pic/pic-safe.png) no-repeat}
.keynote .safe .read{float:right; margin-left:0; margin-top:50px;width:474px}

.keynote .link{margin:50px 80px 0;}
.keynote .link span{display:inline-block; width:290px; height:200px; float:right; margin-right:40px; background:url(../pic/pic-ota.png?t=201412291800) no-repeat}
.keynote .link .read{float:left; margin-left:120px; margin-top:50px}

/*download*/
.downbox{padding:70px 0px 50px 0px; background:#fff; border-bottom:1px solid #e1e1e1;}
.downbox .download{padding-left:60px}
.downbox .icon{width:145px; height:180px; float:left; background:url(../pic/icon-cloudinn.png?t=201412291800) no-repeat;}
.downbox ul{margin-top:20px; margin-left:120px; float:left; width:620px;}
.downbox ul li{float:left; width:213px; height:55px; margin-top:10px; margin-right:30px; background:url(../pic/btnbg-devicetype.png?t=201412291800) no-repeat}
.downbox ul li:hover{opacity:.8}
.downbox ul li a{display:inline-block; width:213px; height:55px; line-height:55px; font-size:18px; text-align:center}
.downbox ul li a.soon{color:#999; font-size:16px; cursor:not-allowed}
.downbox .ipa {margin-top:20px; background:none; height:40px; line-height:40px;}
.downbox .ipa a {height:40px; line-height:40px; font-size:12px;}
.downbox .codebox{width:200px; height:260px; float:right; margin-right:100px; margin-top:-20px;}
.downbox .codebox span{width:200px; height:200px; display:inline-block; background:url(../pic/qrcode.jpg?t=201412291800) no-repeat;}
.downbox .codebox tt{padding-top:3px; display:block; font-size:12px; color:#999; text-align:center; font-family:Verdana, Geneva, sans-serif}

.ic-weibo {display:inline-block; width:16px; height:16px; margin:0 3px; background:url(../pic/logo-sns.png?t=201412291800) 0 0 no-repeat; overflow:hidden; vertical-align:-2px; *vertical-align:middle;}
.ic-wechat {display:inline-block; width:16px; height:16px; margin:0 3px; background:url(../pic/logo-sns.png?t=201412291800) 0 -16px no-repeat; overflow:hidden; vertical-align:-2px; *vertical-align:middle;}

/*contact*/
.contact{padding:60px 0px 0px 0px;}
.contact h3{font-size:18px}
.contact .l{ overflow: hidden;}
.contact .r{margin-top: 60px; overflow: hidden;}
.contact p{font-size:14px; color:#777; line-height:1.8em; margin-top:15px}
.product,.service{ float: left;overflow: hidden; width: 38%;}
.service{width: 62%;}

.followus{position:relative; margin-top:5px}
.followus a.weixin{display:block; width:208px; height:35px; background:url(../pic/btn-weixin.png?t=201412291800) no-repeat}
.followus p{display:block; position:absolute; width:265px; height:288px; top:-150px; left:-10px}
.followus p a{display:block; width:265px; height:288px; background:url(../pic/weixin-code2.png?t=201412291800) no-repeat;}

#footer{width:100%; color:#777; text-align:center; text-shadow: 0px 1px 1px #fff; padding:20px 0; background:#f4f4f4; margin-top: 60px;}
#footer a{color:#777}
.lianxi{ float: left; margin-right: 72px;}
.lianxi img{ display: block;}
.lianxi p{width: 100%; padding-top: 0;}
.contact .intro{ float: left; width: 50%; padding-right: 30px;border-right:1px solid #ddd;}
.contact .address{float: left; width: 43%;padding-left: 35px;}

.contact .chat-online{color:#090;}
.contact .chat-online:hover{color:#00d800;}
@media (max-width: 800px) {
.length {width:100%;}
#header .length {padding-top:15px;}
#header .logo {display:block; float:none;margin:0 auto;}
#header .slogan {display:none;}
.splash {height:220px;}
.splash .pdevice, .splash .video {display:none;}
.splash h1, .splash .btns {text-align:center; font-size:18px; position:static;}
.splash h1 {margin:20px auto 10px;}
.splash .text {position:static; font-size:14px; line-height:30px; text-align:center; margin:10px 0;}
.splash .text strong {font-size:18px;}

.keynote .anywhere, .keynote .safe, .keynote .link, .keynote .wkz {margin-left:auto; margin-right:auto;}
.keynote .anywhere .read, .keynote .safe .read, .keynote .link .read, .keynote .wkz .read {float:none; margin:30px auto; width:300px;}
.keynote .anywhere span, .keynote .safe span, .keynote .link span, .keynote .wkz span {float:none; margin:0 auto; display:block; width:217px; height:150px; background-size:217px 150px;}
.keynote h2 {font-size:18px;}
.keynote p {font-size:14px;}

.downbox {padding:10px;}
.downbox .download {padding:0;}
.downbox .icon {float:none; margin:0 auto;}
.downbox ul {width:213px; margin:0 auto; float:none;}
.downbox ul li {margin-right:0;}
.downbox .codebox {float:none; margin:20px auto;}

.contact {padding:10px;}
.contact .l {float:none;}
.contact .r {float:none; border-left:0; margin:20px 0 0; padding:0;}


.contact .intro{ float: none; width: 100%;;margin-right: 0;text-align: center;}
.contact .address{float: none;width: 100%;border-left: none;padding-left:0;text-align: center;}
.contact h3{ text-align: center;}
.lianxi{ float: none; margin:0 auto; text-align: center; margin-bottom: 20px;}
.lianxi img{ margin: 0 auto;}
.product,.service{ float: none;overflow: hidden; width: 50%; margin: 0 auto;}
.product p,.service p{ text-align: center;}
#footer{margin-top: 20px;}
}